/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

  • Node.js 10 or later installed
  • Yarn v1 or v2 installed

Then run the following:

  • 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

Development

  • yarn install to install dependencies.

  • To watch file changes in development

    • Chrome
      • yarn run dev:chrome
    • Firefox
      • yarn run dev:firefox
    • Opera
      • yarn 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

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