Skip to content

A boilerplate template for building cross browser extensions (Chrome and Firefox).

License

Notifications You must be signed in to change notification settings

williankeller/browser-extension-boilerplate

Repository files navigation

Cross-browser Extension Boilerplate

Travis status Licence JavaScript Style Guide

A boilerplate template for building cross-browser extensions for Chrome and Firefox. The idea here is make easier to start a great extension for Chrome and Firefox. This template allow you start your cross-browser extension fast and also work with a organized code structure.

Starting:

  • Open the manifest.json file and change the matches URL to match exactly with the URL you want your script load.
  • You can add more than one URL at the same time, or add a Regex rule, like:
"matches": ["https://any-url.com/*"],
  • Install Yarn in scope global.
    • $ npm install -g yarn
  • Install dependencies.
    • $ cd browser-extension-boilerplate/ && yarn
  • Start project - Watch files in project and rebuild if any file changed.
    • yarn start
  • Build for production
    • yarn build

Installing (Chrome)

  1. Visit chrome://extensions/ in Chrome;
  2. Enable the Developer mode;
  3. Click on Load unpacked extension;
  4. Select the folder browser-extension-boilerplate/extension or the folder name you changed.

Handler:

  • Your script that will handle the page or tab should be inserted inside the src/app/main.js file.

Locales:

  • You are able to translate your extension, just go to the _locales folder and create the respective language folder.
  • This boilerplate starts with two folder examples, like en to English (as default language) and pt to Portuguese.
  • After create the new language folder, you must create a messages.json file and insert inside:
{
  "keyName": {
    "message": "Value translatable",
    "description": "Description of translatable value"
  }
}