/web-extension-starter

๐Ÿ–ฅ๐Ÿ”‹Web Extension starter to build "Write Once Run on Any Browser" extension

Primary LanguageJavaScriptMIT LicenseMIT

๐Ÿš€ web-extension-starter

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

Travis Build DEPENDENCIES LICENSE TWEET

๐Ÿ™‹โ€โ™‚๏ธ Made by @abhijithvijayan

Donate: PayPal, Patreon

Buy Me a Coffee


โค๏ธ it? โญ๏ธ it on GitHub or Tweet about it.

๐Ÿง™โ€โ™‚๏ธ React + TypeScript = This branch

๐Ÿ˜จ React + JavaScript = Checkout react-javascript branch

๐Ÿ‘ถ๐Ÿผ HTML + JavaScript = Checkout master branch

Features

  • Cross Browser Support (Web-Extensions API)
  • Browser Tailored Manifest generation
  • Automatic build on code changes
  • Auto packs browser specific build files
  • SASS styling
  • TypeScript by default
  • ES6 modules support
  • React UI Library by default
  • Smart reload

Browser Support

Chrome Firefox Opera Edge Yandex Brave vivaldi
49 & later โœ” 52 & later โœ” 36 & later โœ” 79 & later โœ” Latest โœ” Latest โœ” Latest โœ”

Used by extensions in production that has over 100,000+ users.

and many more...

Use this template

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

๐Ÿš€ Quick Start

Ensure you have

Then run the following:

  • npm install to install dependencies.
  • npm run dev:chrome to start the development server for chrome extension
  • npm run dev:firefox to start the development server for firefox addon
  • npm run dev:opera to start the development server for opera extension
  • npm run build:chrome to build chrome extension
  • npm run build:firefox to build firefox addon
  • npm run build:opera to build opera extension
  • npm run build builds and packs extensions all at once to extension/ directory

Development

  • npm install to install dependencies.

  • To watch file changes in development

    • Chrome
      • npm run dev:chrome
    • Firefox
      • npm run dev:firefox
    • Opera
      • npm run dev:opera
  • 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 browsers folder in extension/.
  • 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

  • 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.

Generating browser specific manifest.json

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

Bugs

Please file an issue here for bugs, missing documentation, or unexpected behavior.

Linting & TypeScript Config

License

MIT ยฉ Abhijith Vijayan