Web Extension Example

Modern Chrome and Firefox Web Extension Example to set and remember your favorite color.

• Install
• Features
• Configuration
• Development
  • Building
  • Chrome Setup
  • Firefox Setup

Install

• Google Chrome Web Store
• Mozilla Firefox Add-ons
• Microsoft Edge Add-ons

All Chromium Based Browsers can install the extension from the Chrome Web Store.

Features

• Set and Display your Favorite Color
• Set Selected Text to Favorite Color

Configuration

You can pin the Addon by clicking the Puzzle Piece, find the Web Extension icon, then;
Firefox, click the Settings Wheel and Pin to Toolbar.
Chrome, click the Pin icon.

To open the options, click on the icon (from above) then click Open Options.

Development

Quick Start

To install and run chrome or firefox with web-ext.

npm isntall
npm run chrome
npm run firefox

To Load Unpacked/Temporary Add-on make a manifest.json and run from the src folder.

npm run manifest:chrome
npm run manifest:firefox

For more information on web-ext, read this documentation.
To pass additional arguments to an npm run command, use --.
Example: npm run chrome -- --chromium-binary=...

Building

Install the requirements and copy libraries into the src/dist directory by running npm install. See gulpfile.js for more information on postinstall.

npm install

To load unpacked or temporary addon from the src folder, you must generate the src/manifest.json for the desired browser.

npm run manifest:chrome
npm run manifest:firefox

If you would like to create a .zip archive of the src directory for the desired browser.

npm run build
npm run build:chrome
npm run build:firefox

For more information on building, see the scripts in the package.json file.

Chrome Setup

1. Build or Download a Release.
2. Unzip the archive, place the folder where it must remain and note its location for later.
3. Open Chrome, click the 3 dots in the top right, click Extensions, click Manage Extensions.
4. In the top right, click Developer Mode then on the top left click Load unpacked.
5. Navigate to the folder you extracted in step #3 then click Select Folder.

Firefox Setup

Note: Firefox Temporary addon's will not remain after restarting Firefox, therefore; it is very useful to keep addon storage after uninstall/restart with keepStorageOnUninstall.

1. Build or Download a Release.
2. Unzip the archive, place the folder where it must remain and note its location for later.
3. Go to about:debugging#/runtime/this-firefox and click Load Temporary Add-on...
4. Navigate to the folder you extracted earlier, select manifest.json then click Select File.
5. Open about:config search for extensions.webextensions.keepStorageOnUninstall and set to true.

If you need to test a restart, you must pack the addon. This only works in ESR, Development, or Nightly.

1. Run npm run build:firefox then use web-ext-artifacts/{name}-firefox-{version}.zip.
2. Open about:config search for xpinstall.signatures.required and set to false.
3. Open about:addons and drag the zip file to the page or choose Install from File from the Settings wheel.