Cross-browser extension boilerplate - barebones template with Parcel 2, options handler and auto-publishing.
Screenshot of extension options:
Note: When you create a repository from the template, the Template Cleanup workflow will be triggered to delete and edit template-specific resources. Wait a moment until the workflow finishes (you will see a commit pushed with 'Template cleanup' message).
git clone https://github.com/my-username/my-awesome-extension/
npm install
to install all required dependenciesnpm run build
The build step will create the distribution
folder, this folder will contain the generated extension.
Using web-ext is recommended for automatic reloading and running in a dedicated browser instance. Alternatively you can load the extension manually (see below).
npm run watch
to watch for file changes and build continuouslynpm install --global web-ext
(only only for the first time)web-ext run -t chromium
You can also load the extension manually in Chrome or Firefox.
"name": "My Awesome Extension",
Note: Firefox will automatically reload content scripts when the extension is updated, Chrome requires you to reload the page to reload the content scripts.
Here are some websites you should refer to:
The extension doesn't target any specific ECMAScript environment or provide any transpiling by default. The extensions output will be the same ECMAScript you write. This allows us to always target the latest browser version, which is a good practice you should be following.
Being based on Parcel 2 and its WebExtension transformer, you get all the good parts:
manifest.json
Options are managed by fregante/webext-options-sync, which auto-saves and auto-restores the options form, applies defaults and runs migrations.
It's possible to automatically publish to both the Chrome Web Store and Mozilla Addons at once by adding these secrets on GitHub Actions:
CLIENT_ID
, CLIENT_SECRET
, and REFRESH_TOKEN
from Google APIs.WEB_EXT_API_KEY
, and WEB_EXT_API_SECRET
from AMO.Also include EXTENSION_ID
in the secrets (how to find it) and add Mozilla’s gecko.id
to manifest.json
.
The GitHub Actions workflow will:
19.6.16
and sets it in the manifest.jsonThanks to the included GitHub Action Workflows, if you set up those secrets in the repo's Settings, the deployment will automatically happen:
Extension icon made by Freepik from www.flaticon.com is licensed by CC 3.0 BY.
This browser extension template is released under CC0 and mentioned below. There is no license
file included in here, but when you clone this template, you should include your own license file for the specific license you choose to use.