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

1. Clone the Repository:

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

2. Install Dependencies:

   Using npm:

   npm install
   

   Or using pnpm:

   pnpm install
   

3. 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.

4. Build for Production:

   npm run build
   

   The production-ready extension will be output to the dist/ directory.

Load the Extension in Chrome

1. Open chrome://extensions in your browser.
2. Enable Developer Mode (toggle in the top-right corner).
3. 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.
• npm run preview: Preview the built extension locally.

🔧 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

• Svelte Documentation
• Vite Documentation
• Chrome Extension Docs
• TailwindCSS Documentation
• DaisyUI Documentation

🐛 Reporting Issues

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

📜 License

This project is licensed under the MIT License.