Helpful Tips for Starting a Next.js Chrome Extension

This article details the process of creating a Chrome extension using Next.js, focusing on leveraging React for the popup and achieving efficient code organization. The author shares their experience rewriting a Twitter theme project as a Next.js extension, highlighting the advantages of Next.js's structure over alternatives like Create React App.

The key benefit cited is improved code organization, minimizing boilerplate. While Next.js features like static HTML export, JavaScript preloading, and routing are beneficial, the primary motivation was cleaner code.

The author outlines a practical folder structure:

<code>? extension
  ? manifest.json
? next-app
  ? pages
  ? public
  ? styles
  ? package.json
README.md</code>

A crucial aspect is the customized build script. The standard next export needs modification to handle Chrome extension specifics. The script exports the Next.js app to the extension directory, renames files (removing leading underscores), and manages assets from the public folder. The final, comprehensive build script, including asset handling, is provided.

The manifest.json file is configured to utilize the action keyword (Manifest V3) to specify the popup HTML file generated by Next.js:

{
  "name": "Next Chrome",
  "description": "Next.js Chrome Extension starter",
  "version": "0.0.1",
  "manifest_version": 3,
  "action": {
    "default_title": "Next.js app",
    "default_popup": "index.html"
  }
}

Important limitations are noted: Server-side Next.js features (e.g., next/image) are incompatible with Chrome extensions.

The final steps involve building the extension using npm run build (or yarn build), loading the unpacked extension in Chrome (chrome://extensions), and enabling developer mode.

In conclusion, the article provides a practical guide for developers seeking to leverage Next.js's strengths for building Chrome extensions, offering a streamlined development process and improved code organization. It emphasizes the importance of a customized build process and highlights potential pitfalls to avoid.

The above is the detailed content of Helpful Tips for Starting a Next.js Chrome Extension. For more information, please follow other related articles on the PHP Chinese website!