Chrome Extension Tailwind Starter

A streamlined starter template for building Chrome extensions with Tailwind CSS integration.

Features

• Pre-configured Tailwind CSS setup
• Basic Chrome extension structure
• Simple interactive popup
• NPM scripts for easy development

Getting Started

Prerequisites

• Node.js (v14 or later)
• npm (v6 or later)

Installation

1. Clone the repository: git clone https://github.com/subhroster/chrome-extension-tailwind-starter.git

2. Navigate to the project directory: cd chrome-extension-tailwind-starter

3. Install dependencies: npm install

Development

Build the CSS:

npm run build

Loading the Extension in Chrome

1. Open Chrome and navigate to chrome://extensions
2. Enable "Developer mode" in the top right corner
3. Click "Load unpacked" and select the project directory

Project Structure

• manifest.json: Chrome extension configuration
• popup.html: Main popup interface
• popup.js: JavaScript for popup functionality
• popup.css: Input CSS file for Tailwind
• dist/popup.css: Compiled and minified CSS output
• icons/: Directory containing extension icons

Customization

• Modify popup.html and popup.js to change the extension's functionality
• Update popup.css to add custom styles
• Adjust tailwind.config.js to customize Tailwind CSS settings

Building for Production

To create a production build: npm run build

This will generate minified CSS in the dist directory.

Publishing to Chrome Web Store

1. Create a .zip file of your extension directory
2. Visit the Chrome Developer Dashboard (https://chrome.google.com/webstore/developer/dashboard)
3. Click "New Item" and follow the prompts to upload your extension

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

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