Electron Toolkit

"Command Line Gui Tools" to make launching Electron apps easier, faster and fun

• GUI for electron-builder - package and build your app
• App Icon Generator - generate app icons for all platforms
  • .ico for Windows
  • .icns for macOS
  • .png for Linux
• Screen Capturer - create assets for mockups, store listings, online marketing...
  • Take screenshots
  • Record videos
• Website Builder - go public and launch a website for your app
  • Lean template for desktop apps
  • Responsive design
  • Custom styling options

Screenshots

Getting Started

1. Install electron-toolkit inside your Electron app directory

npm install electron-toolkit --save-dev

1. Add the electron-toolkit script to your package.json file

{
  ...
  "scripts": {
    "electron-toolkit": "electron ./node_modules/electron-toolkit"
  }
}

1. Make sure Electron and Electron Builder are installed.

npm install electron --save-dev
npm install electron-builder --save-dev

1. Now you can run electron-toolkit directly from your project directory

npm run electron-toolkit

Supported Platforms

• Windows (32/64 bit)
• macOS
• Linux

Usage

See Wiki

Security Checklist

• Only display secure (https) content:

<webview :src="'https://' + url" :preload="preloadScript" ></webview>

• Disable the Node integration in all renderers that display remote content (setting nodeIntegration to false in webPreferences)
• Enable context isolation in all renderers that display remote content (setting contextIsolation to true in webPreferences)
• Use ses.setPermissionRequestHandler() in all sessions that load remote content
• Do not disable webSecurity. Disabling it will disable the same-origin policy.
• Define a Content-Security-Policy , and use restrictive rules (i.e. script-src 'self')
• Override and disable eval , which allows strings to be executed as code.
• Do not set allowRunningInsecureContent to true.
• Do not enable experimentalFeatures or experimentalCanvasFeatures unless you know what you're doing.
• Do not use blinkFeatures unless you know what you're doing.
• WebViews: Do not add the nodeintegration attribute.
• WebViews: Do not use disablewebsecurity
• WebViews: Do not use allowpopups
• WebViews: Do not use insertCSS or executeJavaScript with remote CSS/JS.
• WebViews: Verify the options and params of all <webview> tags before they get attached using the will-attach-webview event

app.on('web-contents-created', (event, contents) => {
  contents.on('will-attach-webview', (event, webPreferences, params) => {
    // Strip away preload scripts if unused or verify their location is legitimate
    delete webPreferences.preload
    delete webPreferences.preloadURL

    // Disable node integration
    webPreferences.nodeIntegration = false

    // Verify URL being loaded
    if (!params.src.startsWith('https://yourapp.com/')) {
      event.preventDefault()
    }
  })
})

Want to contribute?

We welcome and encourage all sorts of contributions that help us make this project more awesome. Contact me [email protected].

License

1. License for electron-toolkit

   MIT License
   Copyright (c) 2017 Philipp Langhans & Alina Sinelnikova / Hytag,inc

2. License for website template (inside Website Builder)

   Copyright (c) 2017 Hytag, inc

   The License grants you, free of charge, an ongoing, non-exclusive, worldwide license to use, copy, modify, manipulate the template to create a website for your commercial or non-commercial end product. You are not allowed to sublicense, and/or sell the template.