中文

NextExtension-Starter

This is a chrome extension starter based on Next.js. The extension manifest version is set as v3.

Instructions

Modifying Files

Code Directory	Generated File
app/(pages)/options	options.html
app/(pages)/popup	popup.html
app/scripts/content	content-script.js
app/scripts/inject	inject-script.js

How to Build

1. Install dependencies

   npm install

2. Build extension

   npm run build:extension

3. Generate icon

   python3 icon_generator.py nextextension-start.png

You can use bun alternatively:

1. Install dependencies by bun

   bun install
   

2. Build extension by bun

   bun bun:extension
   

NPM Script Descriptions

• pack:extensionscript: Generates the actual content-script.js and inject-script.js.

• afterbuild: Extracts inline scripts from the packaged HTML files and includes them using the src attribute. The reason is Chrome extensions do not support inline scripts.

• zip:extension: Generates a packaged file for the extension, making it easier for distribution. The zip file can be included in the project release.

Configuration Details

• extension.next.config.js: Contains the actual Next.js configuration for the extension. The original next.config.js is preserved for debugging HTML styles locally using npm run dev.

• extension.webpack.config.js: Corresponds to the npm script pack:extensionscript, used for packaging the two script files. You can also add additional scripts as needed.