prasoonthakur8 / NextChromeX

πŸ’Ž NextChromeX is an all-in-one starter kit for creating Chrome extensions with Next.js and Tailwind CSS. Designed for quick development and stylish UI, it's fully compliant with Chrome's Manifest v3

Home Page:https://prasoonthakur.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

NextChromeX 🌐

Next.js Tailwind CSS Chrome

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

πŸ“š Table of Contents


πŸ“ 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

  1. Install Dependencies

    npm install
  2. Compile the Extension

    npm run build:extension
  3. 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 πŸ₯

  1. Install Dependencies

    bun install
  2. 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.

About

πŸ’Ž NextChromeX is an all-in-one starter kit for creating Chrome extensions with Next.js and Tailwind CSS. Designed for quick development and stylish UI, it's fully compliant with Chrome's Manifest v3

https://prasoonthakur.com/


Languages

Language:JavaScript 54.6%Language:TypeScript 31.6%Language:Python 8.8%Language:CSS 5.0%