Next.js Chrome Extension Starter

Next.js Chrome Extension Starter is a demo boilerplate for building a Chrome extension with Next.js, React, and Node.js, and it produces a static export that loads directly into Chrome as an unpacked extension.

What is Next.js Chrome Extension Starter?

Next.js Chrome Extension Starter is an example application that demonstrates how to combine a Next.js front end with the Chrome extension platform. It takes a standard Next.js multi-page app as input and, through the build and export pipeline, outputs a static 'out' folder that Chrome can load as an unpacked extension. The project was created by Justinas Kairys (ibnzUK), is published on GitHub under the MIT License, and has received 217 stars.

Key Features

• Multi-page Next.js application — The starter comes with a demo app that uses multiple pages, showing how Next.js routing behaves inside an extension.
• Automated export with '_next' rename — Running npm run build triggers prep and export commands that create the 'out' folder and rename '_next' to 'next' so Chrome accepts the extension's assets.
• Local development workflow — npm run dev serves the app at http://localhost:3000, allowing normal Next.js development before building the extension.
• Unpacked extension loading — The README provides a step-by-step process: open chrome://extensions, enable Developer mode, click "Load Unpacked", and select the generated out folder.
• MIT License — The project can be freely used, modified, and distributed; the license text is included in the repository.

Who is it for?

• Chrome extension developers who prefer building their UI with Next.js and React instead of plain JavaScript or Create React App.
• Next.js developers who want a working reference for adapting a Next.js site into a browser extension.
• Learners who want a minimal, documented example of the Next.js to Chrome extension export pipeline.

What can you do with it?

• Create a new extension popup or options page — Use the multi-page structure as a starting point for your own extension's interface.
• Experiment with Next.js static export — Observe how the export step handles assets and the '_next' folder so you can replicate the setup in other projects.
• Customize the demo — Replace the sample pages with your own components; since it's a demo, it's intentionally minimal and easy to fork.

How does Next.js Chrome Extension Starter work?

After cloning the repository, run npm install to install dependencies. To develop, run npm run dev and open http://localhost:3000. To create the extension, run npm run build; this runs the prep and export scripts to generate an 'out' folder with the '_next' directory renamed to 'next'. In Chrome, go to chrome://extensions, enable Developer mode, click "Load Unpacked", and choose that out folder.

FAQ

Is Next.js Chrome Extension Starter free?

Yes, the project is open source and distributed under the MIT License, so you can use, modify, and redistribute it freely as long as you preserve the copyright notice.

How do I load the built extension into Chrome?

Follow the README steps: run npm run build, open chrome://extensions, enable Developer mode, click "Load Unpacked", and select the out folder generated by the build. The extension then appears in your browser.

What does the build command do?

npm run build runs the prep and export scripts, creating a static 'out' folder. It also renames the '_next' directory to 'next'; this rename is necessary because Chrome's extension loader does not accept the underscore prefix.

Does the starter include a popup or content script?

The README describes a demo application with multiple pages; it does not mention specific Chrome extension features like content scripts or background workers. The focus is on the Next.js UI integration.

Can I use this with a different Chrome extension version?

The content does not specify a Manifest V2 or V3 version, but the load-unpacked workflow described works with the current Chrome extension loading mechanism.