stateful / web-extension-starter-kit

A starter template to build cross browser web extensions.

My Web Extension

This is a starter kit for building cross platform browser extensions. You can use it as a template for your project. It comes with a Vite + TailwindCSS + WebdriverIO setup for building and testing extension popup modals, content and background scripts. Read more about building cross platform browser extensions in our corresponding blog post.

A browser web extension that works on Chrome, Firefox and Safari. Download the extension on the marketplaces:

• Chrome:: https://chrome.google.com/webstore/detail/my-web-extension/lnihnbkolojkaehnkdmpliededkfebkk
• Firefox: https://addons.mozilla.org/en-GB/firefox/addon/my-web-extension/
• Safari: (not yet supported, see stateful/web-extension-starter-kit#1)

Development

Setup

Install dependencies via:

npm install

then start a browser with the web extension installed:

# run Chrome
npm run start:chrome

or

# run Firefox
npm run start:firefox

This will build the extension and start a browser with it being loaded in it. After making changes, Vite automatically will re-compile the files and you can reload the extension to apply them in the browser.

Build

Bundle the extension by running:

npm run build

This script will bundle the extension as web-extension-chrome-vX.X.X.crx and web-extension-firefox-vX.X.X.zip. The generated files are in dist/. You can also grab a version from the latest test run on the main branch.

Load in Firefox

To load the extension in Firefox go to about:debugging#/runtime/this-firefox or Firefox > Preferences > Extensions & Themes > Debug Add-ons > Load Temporary Add-on.... Here locate the dist/ directory and open manifestv2.json

Load in Chrome

To load the extensions in Google Chrome go to chrome://extensions/ and click Load unpacked. Locate the dist directory and select manifest.json.

Test

This project tests the extension files using component tests and the extension integration via e2e test with WebdriverIO.

Run unit/component tests:

npm run test:component

Run e2e tests:

npm run test:e2e

Files:

• content-script - UI files
• background.ts - Background script/Service worker
• index.html - popup UI

If you have any questions feel free to open an issue.

web-extension-starter-kit's Issues

`npm run start:firefox` not loading firefox

Hi there,

I love to seeing the work on cross browser web extension starter kits.

I've been trying to get npm run start:firefox to work, I've commented out all the parts that run chrome, but I must have missed something because chrome keeps showing up.

Terminal output:

Changes made to start.js (switched from tsx)

Any help would be greatly appreciated. Thanks!

webextension-polyfill seems to be incompatible with manifest 3

After adding the "module" type to the background, I get an error when loading the addon

"background": { "service_worker": "./background/background.js", "type": "module" },

is there anything I've missed?

Add support for Safari

Set up a way to automatically build and publish this extension to the App Store to be used within Safari.

Fix tests

Currently the pipeline is broken due to breaking changes in Chromedriver. This will be resolved with webdriverio/webdriverio#10767. I will circle back and update the dependencies once that lands.