🚀 web-extension-starter

Web Extension starter to build "Write Once Run on Any Browser" extension

🙋‍♂️ Made by @abhijithvijayan

Features

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

Browser Support

| | | | | | | | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | 49 & later ✔ | 52 & later ✔ | 36 & later ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔

Demo

abhijithvijayan/kutt-extension

🚀 Quick Start

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.

Usage

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

Development

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)
Load extension in browser
- Chrome
  - 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.
- Firefox
  - Load the Add-on via about:debugging as temporary Add-on.
  - Choose the manifest.json file in the extracted directory
- Opera
  - Load the extension via opera:extensions
  - Check the Developer Mode and load as unpacked from extension’s extracted directory.

Production

yarn run build builds the extension for all the browsers to extension/BROWSER directory respectively.

Show your support

Give a ⭐️ if this project helped you!

Licence

Code released under the MIT License.

landsurveyorsunited / web-extension-starter Goto Github PK