反应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 build
oryarn build
again. - Reload extension
- It should work now!
这篇关于反应Chrome扩展不呈现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!