带有 React 的 Chrome 扩展清单 v3
[英]Chrome extension manifest v3 with React
问题描述
I'm looking to add create a chrome extension with manifest v3 to use the scripting permission.
我正在寻找使用 manifest v3 创建一个 chrome 扩展来使用脚本权限。 I've created a React ui using v2 where I could copy over the dodgy SHA key from the Chrome error and make it allow it to run in my browser.我使用 v2 创建了一个 React ui，我可以从 Chrome 错误中复制狡猾的 SHA 密钥，并使其允许它在我的浏览器中运行。 Now in v3 the content_security_policy has changed to an object and with this version I can't get Chrome to allow my extension to show up.现在在 v3 中，content_security_policy 已更改为 object，并且在此版本中，我无法让 Chrome 显示我的扩展程序。 Have you got any idea how to get the chrome extension to play ball with my react app?你知道如何让 chrome 扩展与我的 react 应用一起玩吗？
Getting an error:收到错误：
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.
1 个解决方案
解决方案1
0 已采纳 2021-12-06 09:02:24
Thank you @Neea for helping with this.感谢@Neea 提供帮助。 The problem is indeed with the inline script that React places in the index.html file at build stage.问题确实出在 React 在构建阶段index.html文件中的内联脚本上。 The fix is to place it inside of a separate script file.解决方法是将其放在单独的脚本文件中。 Sounds a little counter intuitive tbh but it works!听起来有点反直觉，但它确实有效！
In index.html I needed to replace this:在 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>
...
with a simple script file, placed for example in the static/js/inline.js file together with the rest of the dynamically generated chunks:使用一个简单的脚本文件，例如与动态生成的块的 rest 一起放在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>
...
That's it.而已。 I will need to write a post-build script that will do this automatically now because doing it every time seems like a bit of a hassle.我需要编写一个构建后的脚本，它现在会自动执行此操作，因为每次都执行此操作似乎有点麻烦。
That was the main problem.那是主要问题。 The error was actually related to the fact that I left the CSR value inside of the manifest.yml file:该错误实际上与我将 CSR 值留在manifest.yml文件中的事实有关：
...
"content_security_policy": {
"extension_pages": "script-src 'self' 'sha256-m1InakbNccQ3GMWQxjDkpe3xtz7EYSSUcfxN6JYBtDk='; object-src 'self'"
},
},
...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.