反应Chrome扩展不呈现

Question

I am beginning to build a Chrome Extension using React. 我开始使用React构建一个Chrome扩展程序。 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. 我的第一个目标就是让React徽标在浏览器扩展中打开，就像任何React项目在其初始构建后一样。 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: 我还没有编辑任何其他文件，所以index.html看起来像这样：

<!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. 当我将扩展程序文件上传到Chrome并尝试运行此扩展程序时，只会显示一个小白框。 I would expect the usual React logo to have rendered in my extension. 我希望通常的React徽标都能在我的扩展程序中呈现出来。 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. 标签和一些文本添加到我的index.html中，然后该文本将出现在浏览器扩展中。

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. 我猜想我需要一些信息来告知清单，index.html将引用哪些文件，但是到目前为止我还没有运气。 If anyone could get me on the right track I would greatly appreciate it. 如果有人能让我走上正确的道路，我将不胜感激。

Answer 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) 转到扩展程序标签（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 . 您将看到一个错误，该错误类似于“ 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-....' ) 复制在错误消息上看到的sha（ 'sha256-....' ）
Go to your manifest.json 转到您的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. 再次运行npm run build或yarn build 。
Reload extension 重新加载扩展
It should work now! 现在应该可以工作了！

反应Chrome扩展不呈现

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-04-24 20:24:41

反应Chrome扩展不呈现

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-04-24 20:24:41

解决方案1
2 已采纳 2019-04-24 20:24:41