• Stars
    star
    2,002
  • Rank 23,135 (Top 0.5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 5 years ago
  • Updated 10 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

πŸ–₯πŸ”‹Web Extension starter to build "Write Once Run on Any Browser" extension

πŸš€ 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.

πŸ§™β€β™‚οΈ 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 βœ”

Used by extensions in production that has over 100,000+ users.

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

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

License

MIT Β© Abhijith Vijayan

More Repositories

1

stargazed

πŸ“‹ Creating your own Awesome List of GitHub stars!
JavaScript
464
star
2

awesome-stars

A curated list of my GitHub stars by stargazed
83
star
3

react-minimal-side-navigation

Minimal side navigation component for React
TypeScript
67
star
4

sherlock

πŸ”Ž Find usernames across social networks.
HTML
56
star
5

ghost-on-github-pages

πŸ’»β° Ghost on Github Pages. Build and deploy Ghost for free in a few minutes.
Shell
52
star
6

wext-manifest-loader

Webextension Manifest Generator that you specify `manifest.json` properties to appear only in specific browsers and environment
TypeScript
25
star
7

gulp-sass-bootstrap-boilerplate

β°πŸ“Œ Boilerplate with gulp.js, Sass, Babel, and Browsersync.
JavaScript
24
star
8

WhatsApp-IP-logger

WhatsApp Privacy bug: Captures IPv4 & IPv6
PHP
20
star
9

v6

Source code for v6 of my personal website build with Next.js
JavaScript
19
star
10

import-github-labels-cli

CLI to sync labels between repositories on GitHub
TypeScript
17
star
11

parcel-sass-bootstrap-boilerplate

β°πŸ“Œ Boilerplate with Parcel.js, Sass, Babel & Bootstrap
HTML
15
star
12

eslint-config

My shared ESLint & Prettier configuration for projects
JavaScript
12
star
13

portfolio-cli

CLI to use my portfolio site template to build yours!
JavaScript
9
star
14

create-remote-repo-cli

Create GitHub repo from Command-line
JavaScript
9
star
15

awesome-react-icons

Yet another minimal icons library
TypeScript
8
star
16

just-YouTube

Extension to show only YouTube results in Google Videos Search
JavaScript
8
star
17

react-initials-avatar

Minimal initials avatar component for React
JavaScript
7
star
18

dotfiles

How do I use What?
Shell
6
star
19

real-estate-app

Real estate app using Next.js and TypeScript
TypeScript
6
star
20

ts-utils

Collection of JavaScript utility functions
TypeScript
5
star
21

abhijithvijayan-cli

The Abhijith Vijayan CLI
JavaScript
5
star
22

OpenAir

Real-time Air Quality Monitoring and Navigation System based on IoT
TypeScript
5
star
23

onepass

OnePass Password Manager in the making.
JavaScript
4
star
24

ghost-local-on-heroku-demo

Ghost local on heroku demo
JavaScript
4
star
25

AR-ZombieWorld

πŸ§ŸπŸ“± Simple Augmented Reality Project
C#
4
star
26

advanced-css-reset

Simple and Clean CSS Reset for modern day web development
CSS
4
star
27

emoji-log

Log to console with emojis πŸ¦„
TypeScript
4
star
28

wext-manifest-webpack-plugin

Webpack plugin to solve the problem of generating js file for manifest.json entry
TypeScript
4
star
29

keystone-handlebars-starter

Keystone Handlebars Express Starter
JavaScript
3
star
30

countdowner

⏱🎊 A flexible countdown-timer written in JavaScript
JavaScript
2
star
31

label-pr-on-merge-bot

GitHub actions bot to label pull requests with custom label on merge
TypeScript
2
star
32

Budgetly

πŸ’ΈπŸ’°πŸ—“ Awesome Budget App
JavaScript
2
star
33

styler

CSS Modules Style Helper
TypeScript
2
star
34

vaccine-notifier

Vaccine Notifier
JavaScript
2
star
35

AMB-Calculator

🏦 πŸ’° Average Monthly Balance-Calculator to avoid fine.
JavaScript
2
star
36

site-scrapper

A simple websitesite scrapper
JavaScript
1
star
37

serve-no-cors

Serve JavaScript from your local machine to the internet without CORS disturbing your inner peace.
1
star
38

status.abhijithvijayan.in

Status Page for abhijithvijayan.in
JavaScript
1
star
39

abhijithvijayan.github.io

Don't mind this
HTML
1
star
40

YouTubeNative

React-Native Clone of YouTube App
JavaScript
1
star
41

eslint-config-airbnb

Airbnb's ESLint config with optional TypeScript support
JavaScript
1
star
42

thanks

Thanks to my sponsors.
1
star
43

helloworld

1
star
44

side-navigation-react-example

Example of using react-minimal-side-navigation with react-router-dom
CSS
1
star
45

glitch-2.0

Online Quiz Hunt
JavaScript
1
star
46

keycodes

⌨️ JavaScript Event KeyCodes Identifier
JavaScript
1
star
47

Eden-Onboarding

TypeScript
1
star
48

labels

Repository to hold my GitHub issue labels to sync from.
1
star
49

corona-screening-portal

COVID'19 Screening Portal for Pathanamthitta
JavaScript
1
star
50

esp8266-web-server

Run a web server within a NodeMCU ESP8266
C++
1
star
51

abhijithvijayan

hello world!
1
star
52

Pig-theDiceGame

πŸ– Pig - The Dice Game 🎲
HTML
1
star
53

v7

it's mine, move on !
TypeScript
1
star
54

tsconfig

TypeScript configuration I use for my projects
1
star
55

MLH-LocalHackDay-18

πŸš€ Website for MLH Local Hack Day by GitHub πŸ₯‡
HTML
1
star
56

HiBus

Backend for a bus tracking system using crowd-sourcing. Merged repo -->
JavaScript
1
star
57

medicine-intake-notifier

A simple notifier
JavaScript
1
star
58

selenium-router-cli

Automate Router Domain Blacklisting for DLink Router
JavaScript
1
star
59

status-cron-abhijithvijayan_in

Cron to refresh status page cache of status.abhijithvijayan.in
JavaScript
1
star
60

hyper-atlantic-night-owl

hyper-atlantic-night-owl is a beautiful and elegant theme for the Hyper terminal
JavaScript
1
star
61

ghost-blog-demo

πŸ’» Demo Blog based on https://github.com/abhijithvijayan/ghost-on-github-pages Live version:
HTML
1
star