h4ck4life/web-extension-boilerplate

The web extension boilerplate help to set up project quickly using typescript, jest, webpack, githook, prettier and github actions

Web Extension Boilerplate

This boilerplate provides a skeleton to start developing cross-browser web extensions.

Development

npm i

Chrome

npm run dev-chrome

Edge

npm run dev-edge

Firefox

npm run dev-firefox

Production

npm i

Chrome

npm run chrome

Edge

npm run edge

Firefox

npm run firefox

Load package to browsers

Chrome

1. Go to the browser's URL address bar
2. Enter chrome://extensions/
3. Switch to "Developer mode"
4. Load extension by clicking "Load unpacked"
5. Browse to dist/ in source code
6. Done!

Check here for more detail: https://developer.chrome.com/extensions/getstarted

Edge

1. Go to the browser's URL address bar
2. Enter edge://extensions/
3. Turn on Developer mode
4. Load extension by clicking "Load unpacked"
5. Browse to dist/ in source code
6. Done!

Firefox

1. Go to the browser's URL address bar
2. Enter about:debugging#/runtime/this-firefox
3. Click Load Temporary Add-on...
4. Browse to your manifest.json & click Open
5. Done!

Check here for more details: https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/

Privacy Policy file

Web stores require you to describe what the extension is or if you collect data of users. You also need to describe why you do that.

Make sure you include this file when you publish an extension, the web store may ask you to upload it.

Note: If you don't know how to write a privacy policy file, you can look at the existing one attached on this repository.

Badges

You can add badges to your project to indicate the version or to show how many users use your extension here:

• https://shields.io/

CI/CD with github action

You can modify the .github/workflows to show the CI/CD flow.

• https://docs.github.com/en/free-pro-team@latest/actions/guides/building-and-testing-nodejs

How to publish web extension

Browsers	Web store
Chrome	https://developer.chrome.com/webstore/publish
Microsoft Edge	https://docs.microsoft.com/en-us/microsoft-edge/extensions-chromium/publish/publish-extension
Firefox	https://extensionworkshop.com/documentation/publish/submitting-an-add-on

References

• Develop your first Chrome extension & Chromium Edge: https://developer.chrome.com/extensions
• Develop your first Firefox add-on: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
• If you have any Chrome extension issues, you can post it here: https://groups.google.com/a/chromium.org/forum/#!forum/chromium-extensions
• Jack and Amy Dev youtube channel, which explains some common mistakes made when developing Chrome extensions.

Showcase

This boilerplate was used to develop Spotify Web Extension