我开始使用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会引用哪些文件,但到目前为止我还没有运气。如果有人能让我走上正轨,我将非常感激。
问题是扩展程序生成了错误,很可能是内容安全策略错误。
这就是我解决这个问题的方法:
Refused to execute inline script because it violates the following Content Security Policy directive
这样的错误。复制您在错误消息上看到的sha('sha256-....'
)manifest.json
"content_security_policy": "script-src 'self' 'sha256-...INSERT COPIED SHA256 HERE'; object-src 'self'"`
npm run build
或yarn build
。