This boilerplate using Svelte provides a skeleton to start developing cross-browser web extensions.
npm i
Chrome
npm run app:chrome-dev
Edge
npm run app:edge-dev
Firefox
npm run app:firefox-dev
npm i
npm run app:chrome
Edge
npm run app:edge
Firefox
npm run app:firefox
Chrome
- Go to the browser's URL address bar
- Enter
chrome://extensions/
- Switch to "Developer mode"
- Load extension by clicking "Load unpacked"
- Browse to
dist/
in source code - Done!
Check here for more detail: https://developer.chrome.com/extensions/getstarted
Edge
- Go to the browser's URL address bar
- Enter
edge://extensions/
- Turn on
Developer mode
- Load extension by clicking "Load unpacked"
- Browse to
dist/
in source code - Done!
Firefox
- Go to the browser's URL address bar
- Enter
about:debugging#/runtime/this-firefox
- Click Load Temporary Add-on...
- Browse to your
manifest.json
& click Open - Done!
Check here for more details: https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/
Simple, just open chrome extension as a page. To do that, follow below steps:
- Open extension management page
- Copy extension id
- Open extension as a page
chrome-extension://<extension-id>/popup.html
- For example: chrome-extension://npjcjlkchmiidojhockoecphakigbaej/popup.html
Web stores require you to describe what the extension is or if you collect data of users. You also need to describe why you do that.
Make sure you include this file when you publish an extension, the web store may ask you to upload it.
Note: If you don't know how to write a privacy policy file, you can look at the existing one attached on this repository.
You can add badges to your project to indicate the version or to show how many users use your extension here:
You can modify the .github/workflows
to show the CI/CD flow.
- Develop your first Chrome extension & Chromium Edge: https://developer.chrome.com/extensions
- Develop your first Firefox add-on: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
- If you have any Chrome extension issues, you can post it here: https://groups.google.com/a/chromium.org/forum/#!forum/chromium-extensions
- Jack and Amy Dev youtube channel, which explains some common mistakes made when developing Chrome extensions.
Follow me on Twitter! https://twitter.com/davidnguyen1791
Thanks!
MIT
Thanks goes to these wonderful people (emoji key):
David Nguyen ๐ป ๐ ๐จ ๐ค ๐ ๐ง ๐ |
DK ๐ป ๐ค ๐ ๐ง ๐ |
This project follows the all-contributors specification. Contributions of any kind welcome!