React Chrome Extension not rendering

问题

I am beginning to build a Chrome Extension using React. My first goal is just to get the React logo to open in the browser extension just like any React project would after its initial build. I followed a few tutorials and set up my manifest file:

{
  "short_name": "React App",
  "name": "React Extension",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "public/index.html",
    "default_title": "React Ext"
  },
  "version": "1.0"
}

I haven't edited any other files so the index.html looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">

    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>
  </body>
</html>

When I upload my extension file to Chrome and try to run this extension, only a small white box appears. I would expect the usual React logo to have rendered in my extension. I have been playing around with various solutions and I did discover that if I added

tags and some text into my index.html then that text will appear in the browser extension.

I'm guessing I need something to tell my manifest which files the index.html will reference, but so far I haven't had any luck. If anyone could get me on the right track I would greatly appreciate it.

回答1:

The issue is that the extension generated an error, most likely a Content Security Policy error.

This is how I fixed that problem:

Go to the extensions tab (chrome://extensions)
Under your extension, you should see an errors button, click on it (if you do not see it, click on the extension pop up).
You are going to see an error that says something like Refused to execute inline script because it violates the following Content Security Policy directive. Copy the sha that you see on the error message ('sha256-....')
Go to your manifest.json
Add the following key

"content_security_policy": "script-src 'self' 'sha256-...INSERT COPIED SHA256 HERE'; object-src 'self'"`

Run npm run build or yarn build again.
Reload extension
It should work now!

来源：https://stackoverflow.com/questions/53301805/react-chrome-extension-not-rendering

标签

reactjs

google-chrome-extension