π web-extension-starter
Web Extension starter to build "Write Once Run on Any Browser" extension
@abhijithvijayan
πββοΈ Made byβ€οΈ 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
Then run the following:
yarn install
to install dependencies.yarn run dev:chrome
to start the development server for chrome extensionyarn run dev:firefox
to start the development server for firefox addonyarn run dev:opera
to start the development server for opera extensionyarn run build:chrome
to build chrome extensionyarn run build:firefox
to build firefox addonyarn run build:opera
to build opera extensionyarn 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
- Chrome
-
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/
.
- Go to the browser address bar and type
-
Firefox
- Load the Add-on via
about:debugging
as temporary Add-on. - Choose the
manifest.json
file in the extracted directory
- Load the Add-on via
-
Opera
- Load the extension via
opera:extensions
- Check the
Developer Mode
and load as unpacked from extensionβs extracted directory.
- Load the extension via
Production
yarn run build
builds the extension for all the browsers toextension/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