Svelte Tailwind Extension Boilerplate

Overview

The Svelte Tailwind Extension Boilerplate is a code template that allows developers to start building a Chrome extension using JavaScript or TypeScript. It utilizes Svelte for the frontend, Tailwind CSS for styling, Jest for testing, and Rollup as the build system. With automatic reloading during development and optimized bundle sizes, this boilerplate aims to make the process of developing Chrome extensions easier and more enjoyable.

Features

• Automatic reloading during development: No need to constantly refresh the page to see your changes.
• TypeScript support: Saves you from ambiguous bugs and provides easy code navigation.
• Tailwind CSS integration: Offers a balance between speed and flexibility in styling.
• Svelte framework: Helps keep bundle sizes small and facilitates code navigation.
• Jest testing framework: Comes with features for mocking, testing DOM interactions, and ensuring expected functionality.
• Rollup build system: Utilizes ES Modules for optimized bundle sizes and ease of reading and updating.

Installation

To get started using the Svelte Tailwind Extension Boilerplate, follow these steps:

1. Using degit, type the following command into your terminal:

npx degit <repository-url>

2. Alternatively, you can create a copy of the repository by using the GitHub template. Click on “Use this template” at the top of the page to get your own copy.

For development with automatic reloading, follow these additional steps:

1. Open the Extensions Dashboard, enable “Developer mode”, and click on “Load unpacked”.

2. Choose the dist folder to load the extension.

For production build and publishing to Chrome, run the following command:

npm run build

This will create a ZIP file with your package name and version in the releases folder.

If you prefer to use TypeScript, you can set up a TypeScript development environment using the provided script. After cloning the template, run the script with the following command:

bash scripts/setup-typescript.sh

To remove the TypeScript setup script, use the following command:

rm scripts/setup-typescript.sh

Summary

The Svelte Tailwind Extension Boilerplate provides developers with a convenient starting point for building Chrome extensions. It offers features such as automatic reloading during development, TypeScript support, Tailwind CSS integration, the Svelte framework, the Jest testing framework, and the Rollup build system. These choices were made to prioritize ease of use, optimal development experience, small bundle sizes, and efficient CSS styling. Special thanks are given to extend-chrome for their rollup-plugin-chrome-extension and to other repos that contributed to the creation of this boilerplate.