rezasohrabi / chrome-ext-starter

Get started with building your Chrome extension effortlessly! Our starter kit combines the power of cutting-edge technologies like Vite, TypeScript, React, CRX, Tailwind CSS, and DaisyUI, making extension development a breeze.

Chrome Extension Starter Kit 🚀

Get started with building your dream Chrome extension effortlessly! Our starter kit combines the power of cutting-edge technologies like Vite, TypeScript, React, CRX, Tailwind CSS, and DaisyUI, making extension development a breeze.

Why choose this template? 🤔 Well, there are countless templates out there, but if you're eyeing Tailwind for your Chrome extension, you're in luck! 🎉 With this template, diving into extension development becomes a breeze – no configuration needed! 💻

Key Features

• 🛠️ Vite: for lightning-fast development and hot module replacement.
• 🧰 TypeScript: for type safety and enhanced productivity.
• ⚛️ React: for building dynamic and interactive UI components.
• 📦 CRX: for easy packaging and distribution of your extension.
• 🎨 Tailwind CSS: for hassle-free styling, including seamless integration in content scripts.
• 🌼 DaisyUI: for beautiful and customizable UI elements right out of the box.

Why Choose Our Starter Kit?

• 🚀 Streamlined Setup: Say goodbye to configuration headaches. Get up and running in minutes.
• ⚡ Optimized Performance: Leverage Vite's speed and Tailwind CSS's efficiency for blazing-fast development.
• 👩‍💻 Developer-Friendly: TypeScript support and React components empower developers to build feature-rich extensions with ease.

Usage Instructions

1. 📥 Clone the repository.
2. 🔧 Install dependencies with npm install.
3. 🚀 Start development server with npm run dev.
4. 🏗️ Build your extension for production with npm run build.

Need Help?

Join our vibrant community on Discord for support, collaboration, and inspiration.

🔗 GitHub Repository 🔗 Discord Community

chrome-ext-starter's Issues

Question about import 'index.css?inline'

Hey @rezasohrabi , thank you so much for this repo; I learned/reused a lot of things from here for the extension I'm working on.

I do have one question: in content/index.tsx, we're doing import styles from './index.css?inline'; however, when I do it, my editor is complaining that it "cannot the module or its declarations", however this does not happen in your code.

I tried comparing my Typescript-related things with yours (tsconfig etc), but I'm not sure what's missing on my side.

It's worth saying that vite is working fine: picking up the styles, adding them to the shadow root, etc. so, technically, it's not an issue, but it bothers me to see the error in my editor.

Tried searching the internet, but I don't seem to be able to find anything related to this import ...?inline syntax, which is new to me