1

I built a chrome extension using React and TypeScript.

When I run it as a stand-alone app (npm start), it renders correctly on the screen.

If I convert it to a Chrome Extension, some of the css styles are gone, and most of the svg's images are not rendering too.

What should I do in this case?

Here is my index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React extension</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script defer="defer" src="index.js"></script>
  </head>
  <body></body>
</html>

And my manifest.json:

{
  "version": "1.0.0",
  "manifest_version": 3,
  "name": "new React Chrome Extension",
  "description": "This is a Chrome extension built with React and TypeScript",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "js/index.html",
    "default_title": "React Chrome Extension"
  }
}

I also have App.css, index.css, global.css and each component also has it's own css file. There are many components in my application.

When inspecting the extension, I get those errors from the console:

index.js:2 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-k056...N0='), or a nonce ('nonce-...') is required to enable inline execution.

(anonymous) @ index.js:2
index.js:2 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://128.0.0.1:*". Either the 'unsafe-inline' keyword, a hash ('sha256-k056...='), or a nonce ('nonce-...') is required to enable inline execution.

(anonymous) @ index.js:2
index.html:1 Access to fetch at 'http://localhost:8080/api/' from origin 'chrome-extension://kk...d' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I also used Create-React-App and I do have a webpack.config.js file, but those solutoins are not working for me Inline script because it violates the following Content Security Policy directive: "script-src 'self'"

I also do not understand why the request URL always starts with chrome-extension:// and a combination of letters after.

Thanks a lot!

user22368560
  • 11
  • 2
  • The extension popup is a separate window with a URL like chrome-extension://extension-id/index.html because that's how extensions are implemented. In order to access localhost you need to add it to `host_permissions`. If you get "inline script" errors it may be because 1) you didn't apply the solution you've linked correctly or 2) you have code or a library that creates script elements and assigns their textContent or innerHTML e.g. google analytics. – wOxxOm Aug 16 '23 at 07:39
  • 3) Also make sure you're not looking at an old error: click `Clear all` button in chrome://extensions errors and reload the extension. Note that the popup is a separate window so it has its own separate devtools: right-click inside the popup and select "inspect" in the menu. – wOxxOm Aug 16 '23 at 07:41
  • @wOxxOm Thank you! Unfortunately I do not have the "regular" popup files, since I am trying to convert my react app into a chrome extension. This extension has a Login page and then the actual Home page, after the user logged in. It works fine as a stand-alone app, but after adding the manifest and webpack files, it renders poorly and after the user has logged in I get a FILE NOT FOUND error. – user22368560 Aug 16 '23 at 07:58
  • Your page is called `action` popup in the terminology of chrome extensions. The question is unfortunately unanswerable without [MCVE](/help/mcve). – wOxxOm Aug 16 '23 at 08:25
  • @wOxxOm I think of starting it again from scratch. Do you have any recommended tutorials? – user22368560 Aug 16 '23 at 11:11

0 Answers0