Web Extension starter to build "Write Once Run on Any Browser" extension
β€οΈ it? βοΈ it on GitHub or Tweet about it.
π§ββοΈ React + TypeScript = This branch
π¨ React + JavaScript = Checkout react-javascript branch
πΆπΌ HTML + JavaScript = Checkout master branch
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|---|
49 & later β | 52 & later β | 36 & later β | 79 & later β | Latest β | Latest β | Latest β |
and many more...
Create a new directory and run
curl -fsSL https://github.com/abhijithvijayan/web-extension-starter/archive/react-typescript.tar.gz | tar -xz --strip-components=1
Ensure you have
Then run the following:
npm install
to install dependencies.npm run dev:chrome
to start the development server for chrome extensionnpm run dev:firefox
to start the development server for firefox addonnpm run dev:opera
to start the development server for opera extensionnpm run build:chrome
to build chrome extensionnpm run build:firefox
to build firefox addonnpm run build:opera
to build opera extensionnpm run build
builds and packs extensions all at once to extension/ directorynpm install
to install dependencies.
To watch file changes in development
npm run dev:chrome
npm run dev:firefox
npm run dev:opera
Load extension in browser
chrome://extensions
Developer Mode
button to enable it.Load Unpacked Extensionβ¦
button.extension/
.about:debugging
as temporary Add-on.manifest.json
file in the extracted directoryopera:extensions
Developer Mode
and load as unpacked from extensionβs extracted directory.npm run build
builds the extension for all the browsers to extension/BROWSER
directory respectively.Note: By default the manifest.json
is set with version 0.0.0
. The webpack loader will update the version in the build with that of the package.json
version. In order to release a new version, update version in package.json
and run script.
If you don't want to use package.json
version, you can disable the option here.
Update source/manifest.json
file with browser vendor prefixed manifest keys
{
"__chrome__name": "SuperChrome",
"__firefox__name": "SuperFox",
"__edge__name": "SuperEdge",
"__opera__name": "SuperOpera"
}
if the vendor is chrome
this compiles to:
{
"name": "SuperChrome",
}
Add keys to multiple vendors by separating them with | in the prefix
{
__chrome|opera__name: "SuperBlink"
}
if the vendor is chrome
or opera
, this compiles to:
{
"name": "SuperBlink"
}
See the original README of wext-manifest-loader
package for more details
Please file an issue here for bugs, missing documentation, or unexpected behavior.
@abhijithvijayan/eslint-config
@abhijithvijayan/tsconfig
MIT Β© Abhijith Vijayan