Svelte5 Chrome Extension

Chrome Extension Starter using Vite, Svelte 5, TypeScript, TailwindCSS, and DaisyUI

Chrome Extension Starter

A modern Chrome extension starter template powered by Vite, Svelte 5, TypeScript, TailwindCSS, and DaisyUI. This template is designed for rapid development of MV3 (Manifest Version 3) extensions with a focus on performance, modularity, and modern developer tools.

✨ Features

Vite: Lightning-fast bundler for modern web development.
Svelte 5: Minimalistic framework for building user interfaces.
TypeScript: Static typing for better code quality and maintainability.
TailwindCSS: Utility-first CSS framework for rapid UI development.
DaisyUI: TailwindCSS-based components for faster styling.
Chrome Manifest V3: Secure and powerful API for Chrome extensions.

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v16 or higher)
npm or pnpm (v7 or higher)
Google Chrome

Installation

Clone the Repository:

git clone https://github.com/your-username/chrome-extension-starter.git
cd chrome-extension-starter

Install Dependencies:

Using npm:
```
npm install
```
Or using pnpm:
```
pnpm install
```
Run Development Server:
```
npm run dev
```
This will start the Vite dev server for live reloading and hot module replacement (HMR). The extension will be pre-rendered for Chrome MV3 development.
Build for Production:
```
npm run build
```
The production-ready extension will be output to the dist/ directory.

Load the Extension in Chrome

Open chrome://extensions in your browser.
Enable Developer Mode (toggle in the top-right corner).
Click Load unpacked and select the dist/ folder generated by the build process.

🛠️ Project Structure

.
├── public/                 # Static assets (manifest.json, icons)
├── src/
│   ├── background/         # Background scripts
│   ├── content/            # Content scripts for injecting into web pages
│   ├── popup/              # Popup UI components
│   ├── lib/                # Reusable components and utilities
│   ├── options/            # Options page components
│   ├── styles/             # TailwindCSS styles
│   ├── types/              # TypeScript declarations
│   └── main.ts             # Entry point for the application
├── tailwind.config.js      # TailwindCSS configuration
├── tsconfig.json           # TypeScript configuration
├── vite.config.ts          # Vite configuration
├── postcss.config.js       # PostCSS plugins (for TailwindCSS)
└── package.json            # Project dependencies and scripts

📄 Manifest Configuration

The manifest.json file is located in the public/ directory and defines the Chrome extension’s permissions and entry points.

Key Settings:

Permissions: Add only the permissions you need to maintain user privacy.
Background Service Worker: Configured using Vite for background tasks.
Content Scripts: Enable interaction with web pages.

{
  "manifest_version": 3,
  "name": "Chrome Extension Starter",
  "version": "0.0.1",
  "description": "A modern Chrome extension template with Svelte, Vite, TypeScript, TailwindCSS, and DaisyUI.",
  "action": {
    "default_popup": "popup/index.html",
    "default_icon": "icons/icon-128.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content/index.js"]
    }
  ],
  "permissions": ["storage", "tabs"],
  "icons": {
    "16": "icons/icon-16.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  }
}

🎨 Styling with TailwindCSS and DaisyUI

TailwindCSS: Highly customizable utility classes for rapid UI design.
DaisyUI: Prebuilt Tailwind components for a polished design.

Customizing Tailwind: Edit the tailwind.config.js file to add your themes, colors, or plugins.

module.exports = {
  content: ["./src/**/*.{html,js,svelte,ts}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
};

DaisyUI Example:

<script>
  let count = $state(0);
</script>

<div class="p-4 bg-base-200">
  <button class="btn btn-primary" onclick={() => count++}>
    Increment: {count}
  </button>
</div>

🧑‍💻 Development Scripts

npm run dev: Start the development server with HMR.
npm run build: Build the extension for production.
📜 Alternative Scripts

If you don't have just installed, you can use the shell scripts in the scripts/ directory:

# Install dependencies
./scripts/install.sh

# Start development server
./scripts/dev.sh

# Build for production
./scripts/build.sh

# Clean build artifacts
./scripts/clean.sh

# Show project status
./scripts/status.sh

# Prepare for Chrome Web Store
./scripts/prepare-publish.sh

# Quick test (rebuild + open Chrome)
./scripts/test.sh

# Show all available scripts
./scripts/help.sh

All scripts include:

✅ Colored output with status messages
✅ Error handling and validation
✅ Help text and usage instructions
✅ Consistent behavior across platforms

Note: Scripts require chmod +x scripts/*.sh to be executable.

🔧 Configuration

Vite Configuration (`vite.config.ts`)

The project uses Vite for bundling. Customizations can be added in vite.config.ts.

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";

export default defineConfig({
  plugins: [svelte()],
  build: {
    rollupOptions: {
      input: {
        popup: "./src/popup/index.html",
        background: "./src/background/index.ts",
        content: "./src/content/index.ts",
      },
    },
  },
});

🛡️ Security Notes

Minimal Permissions: Only request permissions that are absolutely necessary.
Static Asset Validation: Ensure all static assets (icons, scripts) are valid and trusted.
Content Script Isolation: Use content scripts judiciously to avoid conflicts with the web page.

📚 Resources

🐛 Reporting Issues

If you encounter any issues or bugs, please file an issue in the GitHub repository.

☕ Support

If you find this project helpful, consider buying me a coffee!

Support on Ko-fi ❤️

📜 License

This project is licensed under the MIT License.

👨‍💻 Author

Trent Brew

Ko-fi: ko-fi.com/trentbrew
GitHub: @trentbrew

Top categories