Web Extension starter to build "Write Once Run on Any Browser" extension
🙋♂️ Made by @abhijithvijayan
- Cross Browser Support (Web-Extensions API)
- Browser Taylored Manifest generation
- Automatic build on code changes.
- Auto packs browser specific build files
- ES6 modules support
- SASS styling
| | | | | | | | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | 49 & later ✔ | 52 & later ✔ | 36 & later ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔
yarn install
to install dependencies.yarn run dev:chrome
to start the development server for chrome extension.yarn run dev:firefox
to start the development server for firefox addon.yarn run dev:opera
to start the development server for opera extension.yarn run build:chrome
to build chrome extension.yarn run build:firefox
to build firefox addon.yarn run build:opera
to build opera extension.yarn run build
builds and packs extensions all at once to extension/ directory.
Update src/manifest/index.js
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 seperating 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 package for more details
-
yarn install
to install dependencies. -
To watch file changes in developement
- Chrome
yarn run dev:chrome
- Firefox
yarn run dev:firefox
- Opera
yarn run dev:opera
(Reload Extension Manually in the browser)
- Chrome
-
Load extension in browser
-
- Go to the browser address bar and type
chrome://extensions
- Check the
Developer Mode
button to enable it. - Click on the
Load Unpacked Extension…
button. - Select your extension’s extracted directory.
- Go to the browser address bar and type
-
- Load the Add-on via
about:debugging
as temporary Add-on. - Choose the
manifest.json
file in the extracted directory
- Load the Add-on via
-
- Load the extension via
opera:extensions
- Check the
Developer Mode
and load as unpacked from extension’s extracted directory.
- Load the extension via
-
yarn run build
builds the extension for all the browsers toextension/BROWSER
directory respectively.
Give a ⭐️ if this project helped you!
Code released under the MIT License.