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

• kutt-extension in abhijithvijayan/kutt-extension
• Virtual backgrounds for Google Meet in Coderantine/VirtualBackgroundsForWeb
• doubanIMDb in lisongx/doubanIMDb
• Mooc Assistant in unbyte/mooc-assistant

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

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

License

MIT © Abhijith Vijayan