🚀 Chrome Extension Toolkit

A Modern Chrome Extension Template

Built with React 19, TypeScript, Vite, and TailwindCSS

---

✨ Features

• 🎨 Beautiful UI - Modern design with glassmorphism effects and animations
• 🔧 Chrome APIs - Complete utilities for tabs, storage, messaging, and scripting
• 🔍 DOM Inspector - Visual element selection with detailed information extraction
• ⚡ Fast Development - Hot reload with Vite and TypeScript support
• 🎯 Type Safety - Full TypeScript coverage with Chrome extension types
• 🌈 Styled Components - TailwindCSS with custom design system
• 📱 Responsive - Optimized for Chrome extension popup (350px)
• 🧪 Developer Tools - ESLint, Prettier, and development utilities

🖼️ Screenshots

🚦 Quick Start

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Google Chrome browser

1. Clone & Install

git clone https://github.com/yourusername/chrome-extension-toolkit.git
cd chrome-extension-toolkit
npm install

2. Development

# Start development server (for UI development)
npm run dev

# Build extension for Chrome
npm run build:extension

# Lint code
npm run lint

3. Load Extension in Chrome

1. Open Chrome and navigate to chrome://extensions/
2. Enable "Developer mode" in the top right
3. Click "Load unpacked"
4. Select the dist/ folder from your project
5. Click the extension icon in the toolbar to open!

📁 Project Structure

chrome-extension-toolkit/
├── public/
│   ├── icons/           # Extension icons (16, 48, 128px)
│   └── manifest.json    # Chrome extension manifest
├── src/
│   ├── components/      # React components
│   │   ├── Homepage.tsx
│   │   ├── Header.tsx
│   │   └── FeatureCard.tsx
│   ├── content/         # Content scripts
│   │   └── inspector-content.ts
│   ├── utils/           # Chrome extension utilities
│   │   ├── tabs.ts      # Tab management
│   │   ├── storage.ts   # Storage operations
│   │   ├── messaging.ts # Message passing
│   │   └── inspector.ts # DOM inspection
│   ├── App.tsx
│   └── main.tsx
├── tailwind.config.js   # TailwindCSS configuration
├── vite.config.ts       # Vite build configuration
└── package.json

🛠️ Chrome Extension Utilities

Tab Management

import { getActiveTab, createTab, closeTab } from './utils';

// Get currently active tab
const activeTab = await getActiveTab();

// Create new tab
const newTab = await createTab('https://example.com');

// Close tab
await closeTab(tabId);

Storage Operations

import { setStorageItem, getStorageItem } from './utils';

// Store data
await setStorageItem('key', 'value', 'local'); // or 'sync', 'session'

// Retrieve data
const value = await getStorageItem('key', 'local');

DOM Inspector

import { startDOMInspection, getSelectedElementInfo } from './utils';

// Start visual element selection
await startDOMInspection();

// Get detailed element information
const elementInfo = await getSelectedElementInfo();
console.log(elementInfo.xpath, elementInfo.cssSelector);

Messaging

import { sendMessageToBackground, onMessage } from './utils';

// Send message to background script
await sendMessageToBackground({ type: 'action', data: 'value' });

// Listen for messages
onMessage((message, sender, sendResponse) => {
  console.log('Received:', message);
  sendResponse({ success: true });
});

🎨 Customization

Theme Configuration

The project uses a custom TailwindCSS theme with predefined colors:

// tailwind.config.js
theme: {
  extend: {
    colors: {
      primary: { /* blue shades */ },
      secondary: { /* purple shades */ },
      accent: { /* orange shades */ },
      // ... more colors
    }
  }
}

Adding New Features

1. Create components in src/components/
2. Add utilities in src/utils/
3. Update manifest permissions if needed
4. Add to the main homepage feature grid

📝 Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run build:extension	Build and prepare extension
npm run lint	Run ESLint
npm run preview	Preview built app

📋 Chrome Extension Permissions

This template includes these permissions in manifest.json:

• activeTab - Access to currently active tab
• scripting - Execute scripts in web pages (for DOM inspector)

Add more permissions as needed for your specific use case.

🔧 Development Tips

Hot Reload for Extension Development

1. Use npm run dev for UI components development
2. Use npm run build:extension + reload extension for Chrome API testing
3. Chrome extension APIs only work in actual extension context

Debugging

• Popup: Right-click extension icon → "Inspect popup"
• Content Script: Open DevTools on any webpage
• Background Script: Go to chrome://extensions/ → "Inspect views"

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🌟 Acknowledgments

• Chrome Extensions Documentation
• React - The web framework used
• Vite - Build tool and dev server
• TailwindCSS - Utility-first CSS framework
• TypeScript - Language and type system

---

Made with ❤️ by developers, for developers

⭐ Star this repo if it helped you build awesome Chrome extensions!