Skip to content

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

License

Notifications You must be signed in to change notification settings

onramper/onramper-web-extension

This branch is 3 commits ahead of, 4 commits behind abhijithvijayan/web-extension-starter:react-typescript.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

21713fb · Oct 31, 2022
Jun 12, 2022
Oct 31, 2022
Jan 31, 2020
Jun 6, 2020
Jan 27, 2020
Nov 15, 2020
May 23, 2021
Nov 16, 2019
Jan 30, 2020
Nov 15, 2020
Oct 31, 2022
Oct 31, 2022
Oct 29, 2020
Nov 15, 2020
Oct 31, 2022

Repository files navigation

🚀 web-extension-starter

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

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

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"
}

About

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

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 61.4%
  • TypeScript 17.7%
  • SCSS 16.3%
  • HTML 4.6%