jeffgca/browser-extension-template

📕 Barebones boilerplate with webpack, options handler and auto-publishing

browser-extension-template

Barebones boilerplate with Parcel 2, options handler and auto-publishing.

Features

• Use npm dependencies thanks to Parcel 2.
• Use modern Promise-based browser.* APIs webextension-polyfill.
• Auto-syncing options.
• Auto-publishing with auto-versioning and support for manual releases.
• Extensive configuration documentation.

How to use this template

Click Use this template and make a copy of your own. 😉

Configuration

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.

Parcel 2

Being based on Parcel 2 and its WebExtension transformer, you get all the good parts:

• Browserlist-based code transpiling (which defaults to just the latest Chrome and Firefox versions)
• Automatically picks up any new file specified in manifest.json
• Adding TypeScript support is as easy as renaming your files to .ts; sindresorhus/tsconfig is also advised in that case.

Auto-syncing options

Options are managed by fregante/webext-options-sync, which auto-saves and auto-restores the options form, applies defaults and runs migrations.

Publishing

It's possible to automatically publish to both the Chrome Web Store and Mozilla Addons at once by adding these secrets on GitHub Actions:

1. CLIENT_ID, CLIENT_SECRET, and REFRESH_TOKEN from Google APIs.
2. 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:

1. Build the extension
2. Create a version number based on the current UTC date time, like 19.6.16 and sets it in the manifest.json
3. Deploy it to both stores

Auto-publishing

Thanks to the included GitHub Action Workflows, if you set up those secrets in the repo's Settings, the deployment will automatically happen:

• on a schedule, by default every week (but only if there are any new commits in the last tag)
• manually, by clicking "Run workflow" in the Actions tab.

Credits

Extension icon made by Freepik from www.flaticon.com is licensed by CC 3.0 BY.

Extensions created using this template

• notlmn/copy-as-markdown - Browser extension to copy hyperlinks, images, and selected text as Markdown.

License

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.