Skeleton for Google Chrome extensions
- includes awesome messaging module
- webpack-based build system
- full ES6 support with Babel 6
- linting using eslint with airbnb configuration
- use node.js libraries
- unit-tests in mocha
- CircleCI friendly
git clone email@example.com:salsita/chrome-extension-skeleton.git # in case you don't have webpack yet: sudo npm install -g webpack
To install dependencies:
cd chrome-extension-skeleton npm install
Then to start a developing session (with watch), run:
To start a unit testing session (with watch):
To check code for linting errors:
npm run lint
To build production code + crx:
npm run build
To run unit tests in CI scripts:
npm run test:ci
/build # this is where your extension (.crx) will end up, # along with unpacked directories of production and # develop build (for debugging) /src /css # CSS files /html # HTML files /images # image resources /js # entry-points for browserify, requiring node.js `modules` /libs # 3rd party run-time libraries, excluded from JS-linting /modules # node.js modules (and corresponding mocha # unit tests spec files) manifest.json # skeleton manifest file, `name`, `description` # and `version` fields copied from `package.json` /webpack # webpack configuration files .babelrc # Babel configuration .eslintrc # options for JS-linting circle.yml # integration with CircleCI mykey.pem # certificate file, YOU NEED TO GENERATE THIS FILE, see below package.json # project description file (name, version, dependencies, ...)
After you clone:
package.json, rename the project, description, version, add dependencies and any other fields necessary.
Generate your .pem key and store it in the root as
mykey.pemfile. On unix / mac, the command to generate the file is
openssl genrsa 2048 | openssl pkcs8 -topk8 -nocrypt > mykey.pem. Note: the generated file is in
.gitignorefile, it won't be (and should NOT be) commited to the repository unless you know what you are doing.
Add content (HTML, CSS, images, JS modules), update
code/manifest.json, leave only JS entry-points you use (remove the ones you don't need).
When developing, write unit-tests, use
npm testto check that your code passes unit-tests and
npm run lintto check for linting errors.
When ready to try out the extension in the browser, use
npm startto build it. In
builddirectory you'll find develop version of the extension in
devsubdirectory (with source maps), and production (uglified) version in
.crxpacked version is created from
When done developing, publish the extension and enjoy it (profit!).
Use any 3rd party libraries you need (both for run-time and for development /
testing), use regular npm node.js modules (that will be installed into
node_modules directory). These libraries will be encapsulated in the resulting
code and will NOT conflict even with libraries on pages where you inject the
resulting JS scripts to (for content scripts).
For more information, please check also README.md files in subdirectories.
Under the hood:
If you want to understand better the structure of the code and how it really works, please check the following sources (note: these resources are out of date, with respect to the build system and ES6):