chrome-extension-scaffold

Scaffolds out a Google Chrome extension with minimal structure.

Features

• Support for SASS/SCSS files
• Minification of JS and Stylesheets
• jQuery 3.2.1 included

Usage

• You should have Node.js installed
• Install gulp globally if you haven't yet
  • $> npm install gulp-cli -g
• Install this package globally.
  • $> npm install chrome-extension-scaffold -g // Try sudo npm if any issues in installation
• Run. That's it. It will ask you details interactively
  • $> chrome-extension-scaffold
• CD to the directory created with your extension name and install dependencies. You need only dev dependencies
  • $> cd <ext-name> && npm install --only=dev
• Start gulp
  • $> gulp
• Throw in your own icons with the same names as in src/icons directory
• The unpacked extension is build directory
• Zip the build directory and publish to Webstore Developer Dashboard

NOTE

• Do not use full path/relative path in src html tags unless you are creating subdirectories. Because all the files will be sent to build directory at same root level.
  • Example: Don't use <link rel="stylesheet" href="./styles/style.css"> or <script src="./js/popup.js">. Just use <link rel="stylesheet" href="style.css"> or <script src="popup.js">.
• Do not use scss/sass extensions in html. Use .css because the build directory will have only compiled files.
  • Example: Don't use <link rel="stylesheet" href="style.scss">. Just use <link rel="stylesheet" href="style.css">.