Skip to content
πŸ–₯πŸ’‘ Web Extension starter to build "Write Once Write on any Browser" extension
JavaScript CSS HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src chore: declaratively inject content_scripts using manifest file Nov 16, 2019
.babelrc add babel plugins to provide spread operations & destructuring Oct 31, 2019
.eslintignore
.eslintrc.json add browser/webextensions env to eslint config Oct 25, 2019
.gitignore ignore haters Nov 9, 2019
.travis.yml chore: add travis config Nov 16, 2019
LICENCE
README.md update readme Nov 1, 2019
package.json chore: bump wext-manifest to 2.0.1 Nov 1, 2019
webpack.config.js refactor: add contentScript entry to webpack config Nov 16, 2019
yarn.lock chore: bump wext-manifest to 2.0.1 Nov 1, 2019

README.md

πŸš€ web-extension-starter

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

Features

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

Browser Support

Chrome Firefox Opera Yandex Brave vivaldi Edge
49 & later βœ” 52 & later βœ” 36 & later βœ” Latest βœ” Latest βœ” Latest βœ” Latest βœ”

Demo

πŸš€ Quick Start

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

Usage

Update src/manifest/index.js 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 package for more details

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

    (Reload Extension Manually in the browser)

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

Show your support

Give a ⭐️ if this project helped you!

Licence

Code released under the MIT License.

You can’t perform that action at this time.