I have been trying to get a Next.js browser extension to work using the app router. Unfortunately, I have been hitting the following error when I open the extension after I loaded it into [ARC/BRAVE/CHROME]:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-o+vI5waJFQ8KpujZ+vH6gMOPl05v7BWUyGDbDio2hSg=')" or a nonce ('nonce-...') is required to enable inline execution.

It’s a pretty simple npx create-next-app@latest template, primarily using the app router, which seems to return an error when built and loaded as an extension. The only changes I made are:

// next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  distDir: "out",
  output: "export",
};
export default nextConfig;

// package.json

...
  "scripts": {
    "dev": "next dev",
    "build": "next build && mv out/_next out/next",
    "start": "next start",
    "lint": "next lint"
  },
...

// public/manifest.json

{
  "name": "demo",
  "version": "1.0.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "index.html"
  }
}

What I have tried:

1. Added INLINE_RUNTIME_CHUNK=false to a .env file (reference).
2. Added

   "content_security_policy": {
     "extension_pages": "script-src 'self' 'unsafe-inline', scripts.js"
   }
   

   to the manifest.json.

3. Checked and replaced references to /_next in the index.html using

   sed -i 's/_next/next/g' "./out/index.html"
   

4. Added 'use client' to the page.tsx.
5. Used the page router instead, which worked, but I want to use the app router.