davidnguyen11davidnguyen11
62

Web Extension Svelte Boilerplate

screenshot of Web Extension Svelte Boilerplate
svelte
less

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

Github

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.

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.

svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

less
LESS

Less CSS is a dynamic stylesheet language that extends the capabilities of CSS, allowing developers to write cleaner, more modular, and reusable stylesheets with features like variables, mixins, and nested rules.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

Stylelint

Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.