Coinward/web-extension-starter

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

🚀 web-extension-starter

TypeScript + React Version

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

🙋‍♂️ Made by @abhijithvijayan

Donate: PayPal, Patreon

---

👶🏼 Looking for Non React/TypeScript Version instead?

Features

• Cross Browser Support (Web-Extensions API)
• Browser Taylored 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

49 & later ✔	52 & later ✔	36 & later ✔	79 & later ✔	Latest ✔	Latest ✔	Latest ✔

Demo

• abhijithvijayan/kutt-extension

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 developement

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

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 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-loader package for more details

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.