Build a browser extension with React + TypeScript + esbuild. Supporting both Firefox and Chrome.
Following examples are for yarn
. For npm
, please translate by yourself.
Firefox:
npm run build:firefox
With watch mode:
npm run build:firefox --watch
Enable source map:
npm run build:firefox --dev
Chrome:
npm run build:chrome
Build for both browsers:
npm run build
Firefox:
npm run run:firefox
Chrome
npm run run:chrome
npm run package:firefox
To install an unsigned add-on, you must use Firefox Developer Edition. https://support.mozilla.org/en-US/kb/add-on-signing-in-firefox
Edit firefox.json
.
It looks like ID need to match following format:
{<UUID>}
- e.g.
{abac34b6-b4bd-4fc7-af89-6f7d30be386b}
- e.g.
<alphanum>@<alphanum>
- e.g.
dummy@dummy
- e.g.
cf. https://stackoverflow.com/questions/45339492/firefox-add-on-id-conventions
Edit build.ts
and configure esbuild.
Here is an article about this template.