https://github.com/siddsarkar/browser-extension-starter
Kick Start your browser extension with preconfigured options. :octocat:
https://github.com/siddsarkar/browser-extension-starter
browser-extension chrome-extension firefox-extension tailwindcss typescript webpack
Last synced: 3 months ago
JSON representation
Kick Start your browser extension with preconfigured options. :octocat:
- Host: GitHub
- URL: https://github.com/siddsarkar/browser-extension-starter
- Owner: siddsarkar
- Created: 2022-03-22T09:31:46.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-22T10:59:47.000Z (over 4 years ago)
- Last Synced: 2025-02-19T07:36:25.116Z (over 1 year ago)
- Topics: browser-extension, chrome-extension, firefox-extension, tailwindcss, typescript, webpack
- Language: CSS
- Homepage:
- Size: 94.7 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# browser-extension-starter
> Cross-browser extension boilerplate - with support for both mv2 and mv3 manifest versions.
Screenshot of extension options:
## Features
- Get desired extension outputs:
- Firefox (mv2)
- Chromium (mv3)
- Use npm dependencies thanks to Webpack.
- Out of the box [TypeScript](https://www.typescriptlang.org/) support
- Universal api interact with [Extensions API](https://developer.chrome.com/docs/extensions/reference/)
- [Tailwind CSS](https://tailwindcss.com/) support out of the box
## Getting started
### 1️⃣ Create your own copy
1. Click [Use this template](https://github.com/siddsarkar/browser-extension-starter/generate) to make a copy of your own. 😉
### 🛠 Build locally
1. Checkout the copied repository to your local machine eg. with `git clone https://github.com/my-username/my-awesome-extension/`
1. Run `npm install` to install all required dependencies
1. Run `npm run build`
The build step will create the `dist` folder, this folder will contain the generated extensions for both chrome and firefox
### 🏃 Run the extension
Using [web-ext](https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/) is recommened for automatic reloading and running in a dedicated browser instance. Alternatively you can load the extension manually (see below).
1. Run `npm run dev` to watch and run extensions for chrome and firefox simultaneously
> Alternatively you can run `npm run dev:chrome` for chrome and `npm run dev:firefox` for firefox only
The above step will automatically fire up firefox and chrome with extension loaded, to verify installation go to url [chrome://extensions/](chrome://extensions/) for chrome and [about:addons](about:addons) for firefox
#### Manually
You can also [load the extension manually in Chrome](https://www.smashingmagazine.com/2017/04/browser-extension-edge-chrome-firefox-opera-brave-vivaldi/#google-chrome-opera-vivaldi) or [Firefox](https://www.smashingmagazine.com/2017/04/browser-extension-edge-chrome-firefox-opera-brave-vivaldi/#mozilla-firefox).
### ✏️ Make the first change
1. For example, edit `"name"` key in `manifests\manifest.chrome.json` to your desired name for your extension
1. Go back to your browser, reload and see the change take effect
Note: Firefox will automatically reload content scripts when the extension is updated, Chrome requires you to reload the page to reload the content scripts.
### 📕 Read the documentation
Here are some websites you should refer to:
- [Chrome extensions’ API list](https://developer.chrome.com/docs/extensions/reference/)
- [Firefox WebExtensions API list](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
## License
To the extent possible under law,
Siddhartha Sarkar
has waived all copyright and related or neighboring rights to
browser-addon-template.
This work is published from: India.
