Reactjs 不渲染的反应_Reactjs_Google Chrome Extension

Reactjs 不渲染的反应

reactjs google-chrome-extension

Reactjs 不渲染的反应,reactjs,google-chrome-extension,Reactjs,Google Chrome Extension,我开始使用React构建一个Chrome扩展。我的第一个目标就是让React徽标在浏览器扩展中打开，就像任何React项目在初始构建之后一样。我按照一些教程设置了清单文件： { "short_name": "React App", "name": "React Extension", "manifest_version": 2, "browser_action": { "default_popup": "public/index.html", "default_t

我开始使用React构建一个Chrome扩展。我的第一个目标就是让React徽标在浏览器扩展中打开，就像任何React项目在初始构建之后一样。我按照一些教程设置了清单文件：

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

我没有编辑任何其他文件，因此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>


反应应用程序

当我将扩展名文件上传到Chrome并尝试运行此扩展名时，只会出现一个小的白色框。我希望在我的扩展中呈现通常的React徽标。我一直在尝试各种解决方案，我发现如果我在index.html中添加了标记和一些文本，那么这些文本将出现在浏览器扩展中

我猜我需要一些东西来告诉我的清单index.html将引用哪些文件，但到目前为止我还没有任何运气。

如果有人能让我走上正轨，我将不胜感激。

问题是扩展生成了一个错误，很可能是内容安全策略错误

我就是这样解决这个问题的：

转到“扩展”选项卡(chrome://extensions)

在你的扩展下，你应该看到一个错误按钮，点击它（如果你没有看到，点击扩展弹出窗口）

您将看到一个错误，该错误表示，

拒绝执行内联脚本，因为它违反了以下内容安全策略指令

。复制您在错误消息中看到的sha（

'sha256-..”

）

转到您的

manifest.json

添加以下键

再次运行

npm运行构建

或

纱线构建

重新加载扩展

现在应该可以了

那是错误的教程。扩展页面应该有指向js的

script

标记。为react chrome扩展查找不同的教程，而不仅仅是react应用程序。要查看基本的香草扩展页面，请检查。@wOxxOm谢谢，我将看一看。@wOxxOm大多数扩展不涉及弹出式扩展。我知道要向扩展添加功能，我需要一个内容脚本，但现在我只想在扩展上显示react徽标。该弹出窗口称为“browserAction”，它不使用内容脚本（用于网页）。也一定要略读一遍。这很有帮助。看起来我需要将脚本标记添加到index.html中，以链接到需要扩展与之交互的任何其他页面。

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