Chrome Extension Svelte Boilerplate

Overview

The Chrome Extension Svelte Boilerplate is a basic foundation boilerplate for creating rich Chrome Extensions using Svelte and Webpack. It provides a modular and modern approach to JavaScript coding, easy loading of CSS, and automatic browser reload on code changes. This boilerplate assumes that the user has already familiarized themselves with Svelte, Webpack, and Chrome Extension documentation.

Features

• Modular code structure: All development code for the extension is placed in the src folder, including the extension manifest. The boilerplate already includes a popup, options page, and background page, which can be easily customized.
• Svelte components: Svelte components are located in the src/svelte/ directory, with the example popup component provided at src/svelte/popup.svelte. The use of the .svelte extension differentiates components from static HTML files.
• Webpack auto-reload and HRM: The boilerplate utilizes the Webpack server for development, with an auto reload feature that automatically refreshes the browser when a file is saved. This improves workflow efficiency.
• Content Scripts: The boilerplate allows writing bundle files to the disk on every code change, enabling the use of these bundles as content scripts in the extension manifest. However, these entry points need to be excluded from hot reloading by configuring the webpack.config.js file.

Installation

To develop a Chrome extension using the Chrome Extension Svelte Boilerplate, follow these steps:

1. Make sure your Node.js version is >= 6.
2. Clone the boilerplate repository.
3. Install the Yarn package manager.
4. Run yarn to install the required dependencies.
5. Change the package’s name and description in the package.json file.
6. Change the name of your extension in the src/manifest.json file.
7. Run npm run start to start the development server.
8. Load your extension in Chrome by:
   • Accessing chrome://extensions/
   • Enabling Developer mode
   • Clicking on “Load unpacked extension”
   • Selecting the build folder of the boilerplate.
9. Enjoy developing your Chrome extension!

Summary

The Chrome Extension Svelte Boilerplate provides a solid foundation for creating powerful and modern Chrome extensions using Svelte and Webpack. Its modular code structure, support for Svelte components, and automatic browser reload make it a convenient tool for efficient development. By following the installation guide, developers can quickly set up their development environment and start building their Chrome extensions.