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
- Utilizes Next.js for seamless UI development
- Styled with Tailwind CSS for rapid design iteration
- Chrome Manifest v3 compliant
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 |
-
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
-
Install Dependencies
bun install
-
Compile the Extension
bun bun:extension
pack:extensionscript
: Compiles the actualcontent-script.js
andinject-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.
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.
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.
This project is licensed under the MIT License - see the LICENSE.md file for details.