Chrome Extension Starter with Vite, React, TypeScript, and Tailwind CSS

This project is a starter template for building modern Chrome extensions using Vite, React, TypeScript, and Tailwind CSS. It simplifies the setup so you can focus on building your extension's features.

• Fast reloading develop UI faster, view the popup and options page
• Vite for fast bundling and development
• React for building interactive UI components
• TypeScript for type-safe JavaScript development
• Tailwind CSS for easy and responsive styling
• chrome-types Chrome's API TS files for auto-completion

git clone https://github.com/omribarmats/chrome-extension-starter.git new-project

• Replace new-project with your project name

cd new-project

npm install

npm run dev

1. Run the build command: npm run build.
2. Go to chrome://extensions/ in your Chrome browser.
3. Enable Developer mode.
4. Click Load unpacked and select the dist folder from the project.

• Hot-reload enabled for easier development.
• Modify your code in the src folder.
• Tailwind CSS is already configured and ready to use.
• Run npm run build to implement changes to dist folder
• Go on chrome://extensions/ and click refresh ⟳

• Go on src/chrome-extension/popup/index.tsx
• Once changes are made open the terminal and run npm run build then visit chrome://extensions/ and click the refresh ⟳ button on your extension

• Go on src/chrome-extension/options/index.tsx

• Once changes are made open the terminal and run npm run build then visit chrome://extensions/ and click the refresh ⟳ button on your extension

• How to add a background script?

• Create a background.ts file inside the src folder

• Go on vite.config.ts and add this line background: resolve(__dirname, "src/background.ts"), under build.rollupOptions.input

• For example

 build: {
    rollupOptions: {
      input: {
        popup: resolve(__dirname, "popup.html"),
        options: resolve(__dirname, "options.html"),
        background: resolve(__dirname, "src/background.ts"),
      },
      output: {
        entryFileNames: "[name].js",
      },
    },
  },

• Go on manifest.json and add this code:

  "background": {
    "service_worker": "background.js",
    "type": "module"
  }

• Open the terminal and run npm run build then visit chrome://extensions/ and click the refresh ⟳ button on your extension

Feel free to fork the project and make improvements or submit bug reports or issues.