Svelte Themes Logo Svelte Themes
Web Extension Svelte Boilerplate screenshot

Web Extension Svelte Boilerplate

Author Avatar Theme by Davidnguyen11
Updated: 17 Mar 2024
62 Stars

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

Github

Categories

Less

Overview

The Web Extension Svelte Boilerplate is a useful tool for developers looking to create cross-browser web extensions using Svelte. This boilerplate provides a skeleton structure to start developing web extensions that are compatible with Chrome, Edge, and Firefox.

Features

  • Cross-Browser Compatibility: The boilerplate supports development for Chrome, Edge, and Firefox, allowing developers to create web extensions that work across different browsers.
  • Easy Installation: The installation process for the boilerplate is simple and straightforward, with specific instructions provided for each browser.
  • Devtool Support: Developers can easily keep the devtool open while developing by opening the chrome extension as a page.

Installation

Below are installation instructions for each supported browser:

Chrome

  1. Go to the browser’s URL address bar.
  2. Enter chrome://extensions/.
  3. Switch to “Developer mode”.
  4. Load the extension by clicking on “Load unpacked”.
  5. Browse to the dist/ folder in the source code.
  6. Click “Open”.
  7. The extension is now loaded and ready to use.

Edge

  1. Go to the browser’s URL address bar.
  2. Enter edge://extensions/.
  3. Turn on Developer mode.
  4. Load the extension by clicking on “Load unpacked”.
  5. Browse to the dist/ folder in the source code.
  6. Click “Open”.
  7. The extension is now loaded and ready to use.

Firefox

  1. Go to the browser’s URL address bar.
  2. Enter about:debugging#/runtime/this-firefox.
  3. Click on “Load Temporary Add-on…”.
  4. Browse to your manifest.json file and click “Open”.
  5. The extension is now loaded and ready to use.

Summary

The Web Extension Svelte Boilerplate is a handy tool for developers wanting to create cross-browser web extensions using Svelte. It offers features like cross-browser compatibility, easy installation, and support for devtool usage. By following the provided installation instructions, developers can quickly set up and start developing their web extensions on Chrome, Edge, and Firefox.