NextChromeX 🌐

Your all-in-one open-source starter starter kit for building Chrome extensions with Next.js and Tailwind CSS.

👤 Developer: Prasoon Thakur
📝 Blog: https://prasoonthakur.com

🌟 Features

Utilizes Next.js for seamless UI development
Styled with Tailwind CSS for rapid design iteration
Chrome Manifest v3 compliant

📁 Directory Structure

Here's how the codebase is organized and what each folder/file corresponds to:

Code Directory	Output File
`app/pages/options`	`options.html`
`app/pages/popup`	`popup.html`
`app/scripts/content`	`content-script.js`
`app/scripts/inject`	`inject-script.js`

🛠 Build Process

Standard Method

Install Dependencies
```
npm install
```
Compile the Extension
```
npm run build:extension
```
Generate Icons

To install the required Pillow package, run the following command:
```
python3 -m pip install Pillow
```
```
python3 icon_generator.py icon.png
```

Using Bun as an Alternative 🥐

Install Dependencies
```
bun install
```
Compile the Extension
```
bun bun:extension
```

📜 NPM Scripts

pack:extensionscript: Compiles the actual content-script.js and inject-script.js.
afterbuild: Post-build actions to adhere to Chrome's inline script policies.
zip:extension: Creates a ZIP file of the extension for easy distribution.

📝 Configuration Files

extension.next.config.js: The Next.js configuration tailored specifically for the Chrome extension.
extension.webpack.config.js: The Webpack setup for packaging various script files.

📖 Open Source

This project is open to contributions from the developer community. If you find a bug or think of a new feature, please feel free to create an issue or open a pull request.

📄 License

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

prasoonthakur8/NextChromeX