反应Chrome扩展不呈现 [英] React Chrome Extension not rendering
问题描述
我开始使用React构建一个Chrome扩展程序.我的第一个目标就是让React徽标在浏览器扩展中打开，就像任何React项目在其初始构建后一样.我遵循了一些教程，并设置了清单文件:
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"
}
我还没有编辑任何其他文件，所以index.html看起来像这样:
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>
当我将扩展程序文件上传到Chrome并尝试运行此扩展程序时，只会显示一个小白框.我希望通常的React徽标都能在我的扩展程序中呈现出来.我一直在研究各种解决方案，但确实发现，如果在index.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.
我猜我需要一些信息来告诉清单.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. If anyone could get me on the right track I would greatly appreciate it.
推荐答案
问题在于扩展程序生成了错误，很可能是 Content Security Policy 错误.
The issue is that the extension generated an error, most likely a Content Security Policy error.
这是我解决该问题的方法:
This is how I fixed that problem:
- 转到扩展程序标签(chrome://extensions)
- 在您的扩展程序下，您应该看到一个错误按钮，单击它(如果您没有看到它，请单击弹出的扩展程序.)
- 您将看到类似
Refused to execute inline script because it violates the following Content Security Policy directive的错误.复制您在错误消息('sha256-....')上看到的sha - 转到您的
manifest.json - 添加以下密钥
- 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'"`
- 再次运行
npm run build或yarn build. - 重新加载扩展程序
- 现在应该可以使用！
- Run
npm run buildoryarn buildagain. - Reload extension
- It should work now!
这篇关于反应Chrome扩展不呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
