svelte-chrome-extension-starter

A project template for a Svelte-based Chrome extension with out-of-the-box support for TypeScript, Tailwind CSS, and the Flowbite Component library.

Features

• :zap: Svelte 5: A lightweight framework for building user interfaces.
• :zap: TypeScript: Offers static typing and improved tooling.
• :zap: Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
• :zap: Flowbite Svelte: Svelte-native UI components from the Flowbite UI library.
• :zap: Hot Reloading: Instantly preview changes in your extension without having to reload it manually.
• :zap: Encapsulation: Content script elements are placed under the Shadow DOM, keeping them isolated from the host page.

Getting Started

Development

1. Clone the repository:

   git clone [email protected]:kklemon/svelte-chrome-extension-starter.git
   

2. Install dependencies:

   npm install
   

   (Alternatively, use the Bun or Deno runtime.)

3. Start dev mode:

   npm run dev
   

4. Load the extension in Chrome:

   • Open chrome://extensions/ in Chrome.
   • Enable Developer Mode in the top-right corner.
   • Click Load unpacked and select the dist/ folder.
   • The unpacked extension should now be installed. Pin it by clicking the puzzle icon in the toolbar and then the pin icon next to your extension. Clicking on the extension icon will open the popup.

Hot Reloading

This project uses the CRXJS Vite plugin to enable Hot Module Replacement (HMR). Changes you make to the source code are automatically reflected in the installed extension when running in dev mode. However, due to Tailwind CSS’s relatively slow compilation, changes may sometimes take a few seconds (up to a minute) to fully reload.

Production

To create a production-ready build, run:

npm run build

A fully optimized build of the extension will be generated in the dist/ folder, which you can then load or package for the Chrome Web Store.