Building a Simple Chrome Extension with Next.js

Creating a Chrome extension can seem daunting, but with the power of Next.js and some basic knowledge, you can have a working extension up and running in no time. In this blog post, we'll walk through the process of building a simple Chrome extension using Next.js, setting up icons, and configuring the necessary files.

What You'll Need

1. Node.js: Make sure you have Node.js installed.
2. Next.js: We'll be using Next.js for our project setup.
3. Basic HTML, CSS, and JavaScript: Familiarity with these is helpful but not required.

Step 1: Setting Up Your Next.js Project
First, let's create a new Next.js project. Open your terminal and run the following commands:
npx create-next-app@latest my-chrome-extension
cd my-chrome-extension

This will scaffold a new Next.js project for you. Once the setup is complete, navigate into your project directory.

Step 2: Adding a "Hello World" Component
To display a simple "Hello World" message in your Chrome extension, you'll need to create a React component in your Next.js project. This component will be part of the static files exported to the out folder.

export default function Home() {
  return (
    <main>
      <div>
        <span className="text-gray-800">Hello world</span>
      </div>
    </main>
  );
}

Step 3: Configure Next.js for Static Export
Since Chrome extensions are static by nature, we need to configure our Next.js project to generate static files. Edit your next.config.js file as follows:

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    assetPrefix: process.env.NODE_ENV === 'production' ? '/.' : '',
    output: 'export',
    trailingSlash: true,
  };

  export default nextConfig;

This configuration ensures that your Next.js application is exported as static files, ready to be used in a Chrome extension.

Step 4: Creating the Chrome Extension Manifest
A Chrome extension requires a manifest.json file to define the extension's metadata and behavior. Create a manifest.json file in your project's root directory with the following content:

{
  "manifest_version": 3,
  "name": "Hello world Extension",
  "version": "1.0",
  "description": "Extension that displays hello world.",
  "action": {
    "default_popup": "index.html",
    "default_icon": {
      "16": "icon16.svg",
      "48": "icon48.svg",
      "128": "icon128.svg"
    }
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self';"
  }
}

Step 5: Build the Project
With the configuration in place, let's build the project:
npm run build
This command will generate a static version of your site in the out folder, which is what we'll use for our Chrome extension.
Now rename the _next file in the out folder as chrome extensions cannot include directories or filenames that start with an underscore (e.g., _next).

Step 6: Adding Icons
Chrome extensions require icons of various sizes for different parts of the UI. Create an icons directory within your project and add the following icon files:

• icon16.png (16x16 pixels)

• icon48.png (48x48 pixels)

• icon128.png (128x128 pixels)

Make sure these icons are correctly sized and placed in the icons directory. The paths in the manifest.json file should match the location of these icons.

Step 7: Load the Extension into Chrome
Now that everything is set up, let's load our extension into Chrome:

• Open Chrome and navigate to chrome://extensions/.

• Enable "Developer mode" by toggling the switch in the top-right corner.

• Click "Load unpacked" and select the out folder generated by the build process.

• Test Your Extension: You should see your extension in the Chrome toolbar. Clicking on it should display the "Hello World" message you set up in your Next.js project.

Step 8: Test and Iterate
Your basic "Hello World" Chrome extension is now up and running! From here, you can add more functionality, styles, and features as needed.

Final Thoughts
Building a Chrome extension using Next.js allows you to leverage the power of modern React-based development while still creating something simple and static.

Whether you're creating a personal tool or something to share with the world, Next.js makes the development process smooth and efficient.

With the knowledge from this guide, you can easily create more complex extensions, integrate APIs, or enhance the user experience with custom styles and interactivity. The sky's the limit!

Happy coding! 🚀