Issue #940

We can develop Nextjs 13 apps and export it to a Chrome extension.

Start by init the project

npx create-next-app@latest

Here is the project structure with app router and not using src directory. I put an extension to the root of the project, where we can copy over the generated out folder

    - manifest.json
    - page.tsx
    - images

Here is my script to build and copy over generated out and public images to extension folder


    "name": "my-extension",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint",
        "copy-out": "mv out/_next out/next && sed -i '' -e 's/\\/_next/\\.\\/next/g' out/**.html && mv out/index.html ./extension && rsync -va --delete-after out/next/ ./extension/next/ && rm -rf out",
        "copy-public": "cp public/images/* extension/images",
        "export": "next build && npm run copy-out && npm run copy-public"

We need to specify export mode in next.config.js so we can just next build

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export'

module.exports = nextConfig

We should also ignore generated content in extension. Add this to your .gitignore file

# extension