Web Extension Starter

🖥🔋Web Extension starter to build "Write Once Run on Any Browser" extension
Alternatives To Web Extension Starter
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Plasmo6,0723a day ago199September 25, 202259mitTypeScript
🧩 The Browser Extension Framework
React Perf Devtool2,307
6 months ago29JavaScript
A browser developer tool extension to inspect performance of React components.
Web Extension Starter1,630
5 months ago9mitJavaScript
🖥🔋Web Extension starter to build "Write Once Run on Any Browser" extension
2 years ago29gpl-3.0JavaScript
A Chrome Extension that contains useful tools
4 days ago13bsd-3-clauseJavaScript
Fast, open and free-to-use new tab page for modern browsers
Hacker Tab Extension315
a year ago19mitJavaScript
Browser extension to view GitHub trending projects on new tab :octocat: 📈
Extension Save To Pocket258
7 months ago24mitJavaScript
Save to Pocket is a browser extension that is used to save pages to a connected Pocket account
Extension Fingerprints162
a year agomitJavaScript
Check how trackable you are based on your browser extensions.
Csgo Trader Extension140
2 days ago57gpl-3.0JavaScript
CSGO Trader Browser Extension to help with CS:GO item trading, marketing and much more
4 years agoJavaScript
Handy Google Chrome extension for reviewing MiniMongo.
Alternatives To Web Extension Starter
Select To Compare

Alternative Project Comparisons

🚀 web-extension-starter

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

🙋‍♂️ Made by @abhijithvijayan

Donate: PayPal, Patreon

Buy Me a Coffee

❤️ it? ⭐️ it on GitHub or Tweet about it.

👶🏼 HTML + JavaScript = This branch

🧙‍♂️ React + TypeScript = Checkout react-typescript branch

😨 React + JavaScript = Checkout react-javascript branch


  • Cross Browser Support (Web-Extensions API)
  • Browser Tailored Manifest generation
  • Automatic build on code changes
  • Automatic extension reload on browser
  • Auto packs browser specific build files
  • ES6 modules support
  • SASS styling

Browser Support

Chrome Firefox Opera Edge Yandex Brave vivaldi
49 & later ✔ 52 & later ✔ 36 & later ✔ 79 & later ✔ Latest ✔ Latest ✔ Latest ✔


Use this template

Create a new directory and run

curl -fsSL https://github.com/abhijithvijayan/web-extension-starter/archive/master.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


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


  • 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 src/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


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

Linting Config


MIT © Abhijith Vijayan

Popular Browser Extension Projects
Popular Reactjs Projects
Popular Web Browsers Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Chrome Extension
Firefox Extension
Browser Extension
Cross Browser
Opera Extension