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
-
Clone the repository:
git clone https://github.com/subhroster/chrome-extension-tailwind-starter.git
-
Navigate to the project directory:
cd chrome-extension-tailwind-starter
-
Install dependencies:
npm install
Development
Build the CSS:
npm run build
Loading the Extension in Chrome
- Open Chrome and navigate to chrome://extensions
- Enable "Developer mode" in the top right corner
- 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
- Create a .zip file of your extension directory
- Visit the Chrome Developer Dashboard (https://chrome.google.com/webstore/developer/dashboard)
- 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.
