Skip to content

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

License

Notifications You must be signed in to change notification settings

davidnguyen11/web-extension-boilerplate

Repository files navigation

Web Extension Boilerplate



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

All Contributors

jest code style: prettier PRs Welcome ci/cd by

Prerequisites

You need to install pnpm

Development

npm install -g pnpm
pnpm i

Chrome

pnpm app:chrome-dev

Edge

pnpm app:edge-dev

Firefox

pnpm app:firefox-dev

Production

pnpm i
pnpm app:chrome

Edge

pnpm app:edge

Firefox

pnpm app: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/

How to keep devtool appears when developing

Simple, just open chrome extension as a page. To do that, follow below steps:

  1. Open extension management page

Screen Shot 2021-05-27 at 14 44 56

  1. Copy extension id

Screen Shot 2021-05-27 at 14 45 20

  1. Open extension as a page chrome-extension://<extension-id>/popup.html
  • For example: chrome-extension://npjcjlkchmiidojhockoecphakigbaej/popup.html

chrome-extension://npjcjlkchmiidojhockoecphakigbaej/popup.html

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:

CI/CD with github action

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

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

Showcase

Contributors ✨

Thanks goes to these wonderful people (emoji key):


David Nguyen

💻 📖 🎨 🚧 👀 ⚠️

Minh Ngo

💻 ⚠️

Ben Harned

📖

This project follows the all-contributors specification. Contributions of any kind welcome!