Next.js 15 + TypeScript Chrome Extension CSP Issue Issue

[Karan Goraniya]

I'm building a Chrome extension using Next.js 15 with TypeScript, but encountering a Content Security Policy (CSP) error:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'".

Setup:

• Next.js Version: 15
• Manifest Version: 3
• Output Mode: "export" in next.config.ts

Files:

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
 output: "export",
};

 export default nextConfig;

manifest.json

{
  "manifest_version": 3,
  "name": "Next Js App",
  "version": "1.0.0",
  "description": "Next Js App Example",

  "action": {
    "default_popup": "index.html",
    "default_width": "400px",
    "default_height": "600px"
  }
}

package.json

    "dev": "next dev -p 8797",
    "build": "next build && mv out/_next out/next && cp -r ./extension ./out",
    "start": "next start",
    "lint": "next lint"


What I Tried:

• Adding "content_security_policy" in manifest.json → Still getting the error.
• Using next/script to avoid inline scripts → No effect.

Question:

• How to fix this CSP issue and ensure Next.js complies with Manifest V3?
• Is there a way to move inline scripts to separate files in the Next.js export build?

[Karan Goraniya]

Can you help me in this ?

[Oliver Dunk]

Hi Karan,

Would you be comfortable uploading the source / output from Next.js somewhere? This could be either your full project or an example project that demonstrates the same problem.

I'm not familiar with the available configuration or the output it generates, which makes it hard to share an answer here. Usually the expectation would be that you use something like this:

```

<script src="myfile.js></script>

```

Rather than this:

```

<script>// Code goes here.</script>

```

It isn't possible to change the CSP in an extension page to allow the latter, so a configuration change is probably the right approach. If that isn't possible there are some workarounds (see here) but they have tradeoffs and probably aren't what you want.

Oliver Dunk | DevRel, Chrome Extensions | https://developer.chrome.com/ | London, GB

[Karan Goraniya]

Hi Oliver, thanks for the response. Can you share your GitHub so I can send you an invite to the repo?

[Oliver Dunk]

Hi,

Thanks for sharing that.

I can see the issue and my initial reaction is that some work might be needed on the Next.js side to properly support extensions. I'm asking around though to see if anyone on our team who is more familiar with Next.js might have suggestions.

It's not ideal, but one thing you could fiddle with in the meantime is taking the inline scripts from index.html and moving them to a separate file.

For example, take the following:

```

<script>(self.__next_f = self.__next_f || []).push([0])</script>
<script>self.__next_f.push([...])</script>
...

```

And move that into a hydrate.js file like this:

```

(self.__next_f = self.__next_f || []).push([0])

self.__next_f.push([...])

```

You can then update your index.html file to reference that script:

```

<script src='hydrate.js'></script>

```

You would need to be careful that everything still loads in the order Next.js expects, and it's something you would need to do manually / write a script for. Perhaps that might unblock you in the short term though.

Oliver Dunk | DevRel, Chrome Extensions | https://developer.chrome.com/ | London, GB

[Cuyler Stuwe]

It's worth noting that the whole point of Next.js is to seamlessly support SSR (Server-Side Rendering) for React apps served over the Internet.

A Chrome Extension generally should have as many of its resources served locally as possible, instead.

So unless you're stuck with trying to make Next.js work for some reason (e.g., it's a deeply-committed decision at work or something), I would just use something else. Maybe you could get it to work, but you'd be going against the entire purpose of the framework.

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/CAOsQqB%3D0LEcDFFALBrDYS8pkC1hG5VB0Snv8CL9HMbE9oe_JfA%40mail.gmail.com.

[Karan Goraniya]

Hi Oliver,
I tried it, and it worked somehow. I created a js folder inside
next/static/js/hydrate.js.

But now, I’m getting this error and warning.

[Karan Goraniya]

Hello Cuyler,  

Good point! In that case, which React framework would be the best fit for a Chrome extension?