Web Extension Svelte Boilerplate

The web extension boilerplate which helps setting up browser extension project quickly using typescript, svelte, jest, webpack, githook, prettier and github actions

#chrome-extension #firefox-addon #webpack #jest #prettier #microsoft-edge-extension #cicd #github-actions #svelte #testing-library

Download

Web Extension Svelte Boilerplate

This boilerplate using Svelte provides a skeleton to start developing cross-browser web extensions.

Development

npm i

Chrome

npm run app:chrome-dev

Edge

npm run app:edge-dev

Firefox

npm run app:firefox-dev

Production

npm i

npm run app:chrome

Edge

npm run app:edge

Firefox

npm run app:firefox

Load package to browsers

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/

How to keep devtool appears when developing

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

Privacy Policy file

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.

Badges

You can add badges to your project to indicate the version or to show how many users use your extension here:

https://shields.io/

CI/CD with github action

You can modify the .github/workflows to show the CI/CD flow.

https://docs.github.com/en/free-pro-team@latest/actions/guides/building-and-testing-nodejs

How to publish web extension

Browsers	Web store
Chrome	https://developer.chrome.com/webstore/publish
Microsoft Edge	https://docs.microsoft.com/en-us/microsoft-edge/extensions-chromium/publish/publish-extension
Firefox	https://extensionworkshop.com/documentation/publish/submitting-an-add-on