Chrome 带有 React 的扩展清单 v3

Question

我希望添加创建一个带有清单 v3 的 chrome 扩展以使用脚本权限。我使用 v2 创建了一个 React ui，我可以从 Chrome 错误中复制狡猾的 SHA 密钥，并允许它在我的浏览器中运行。现在在 v3 中，content_security_policy 已更改为一个对象，在这个版本中我无法获得 Chrome 以允许我的扩展程序显示。你知道如何让 chrome 扩展程序与我的 React 应用程序一起玩球吗？

出现错误：

Failed to load extension
File
\wsl$\Ubuntu\home\peterpoliwoda\Develop\git\react-plugin-typescript\build
Error
'content_security_policy.extension_pages': Insecure CSP value "'sha256-m1InakbNccQ3GMWQxjDkpe3xtz7EYSSUcfxN6JYBtDk='" in directive 'script-src'.
Could not load manifest.

Answer 1

感谢@Neea 的帮助。问题确实在于 React 在构建阶段放置在 index.html 文件中的内联脚本。修复方法是将它放在一个单独的脚本文件中。听起来有点违反直觉，但确实有效！

在 index.html 我需要替换这个：

<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

<script>!function(e){function t(t){for(var n,i,a=t[0], 
...
</script>

<script src="/static/js/2.828ba7e0.chunk.js"></script>
...

使用一个简单的脚本文件，例如与其余动态生成的块一起放在 static/js/inline.js 文件中：

<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

<script src="/static/js/inline.js"></script>

<script src="/static/js/2.828ba7e0.chunk.js"></script>
...

就是这样！我需要编写一个 post-build 脚本来自动执行此操作，因为每次都这样做似乎有点麻烦。

编辑：
您可以使用 Create React App 中的 INLINE_RUNTIME_CHUNK 选项直接删除内联脚本。这会自动修复所有问题！运行带有环境变量的构建脚本：

export INLINE_RUNTIME_CHUNK=false; yarn build

这是主要问题。该错误实际上与我将 CSR 值留在 manifest.yml 文件中有关：

...
"content_security_policy": {
  "extension_pages": "script-src 'self' 'sha256-m1InakbNccQ3GMWQxjDkpe3xtz7EYSSUcfxN6JYBtDk='; object-src 'self'"
  },
},
...

Chrome 带有 React 的扩展清单 v3

Chrome extension manifest v3 with React

google-chrome

google-chrome-extension

reactjs