🚀 web-extension-starter

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

🙋‍♂️ Made by @abhijithvijayan

Donate: PayPal, Patreon

❤️ 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


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

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

daily.dev in daily.dev extension
Jiffy Reader in ansh/jiffyreader.com
kutt-extension in abhijithvijayan/kutt-extension
doubanIMDb in lisongx/doubanIMDb
Mooc Assistant in unbyte/mooc-assistant
ArtiPub in crawlab-team/artipub

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

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

Shared Eslint & Prettier Configuration - @abhijithvijayan/eslint-config
Shared TypeScript Configuration - @abhijithvijayan/tsconfig

duncanhealy/web-extension-starter