Question

我正在尝试使用reactjs构建一个非常基本的chrome扩展。但是，我收到以下错误：

拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src'self''unsafe-eval'”。要么是'unsafe-inline'关键字，哈希（'sha256-irwQGzGiWtpl6jTh4akRDdUUXCrtjkPABk5rinXZ5yw ='），要么是nonce（'nonce -...'）才能启用内联执行。

我不明白这是从哪里来的，考虑到我似乎没有任何内联脚本。

newtab.html：

<!DOCTYPE html>
<html>
  <head>
    <title>New Tab</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="babel.js"></script>
    <script type="text/jsx" src="test.jsx"></script>
  </head>
  <body>
    <div id='root'></div>
  </body>
</html>

test.jsx：

import React from "react";
import ReactDOM from "react-dom";

class Hello extends React.PureComponent {
  render() {
    return (
      <div>
        <h1>Hello!</h1>
      </div>
    );
  }
}

const element = <Hello />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

的manifest.json：

{
  "manifest_version": 2,

  "name": "SuperBasicReact",
  "description": "Just trying to make this work",
  "version": "0.1",

  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },

  "browser_action": {
    "default_title": "SuperBasicReact"
  },

  "permissions": [
    "http://*/*",
    "https://*/*"
  ],

  "content_scripts": [{
    "matches": ["http://*/", "https://*/"],
    "js": ["test.jsx", "babel.js"]
  }],

  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'; default-src 'self'"


}

我正在使用chrome版本65.0.3325.162。

任何和所有帮助将不胜感激。

修改

我见过"Refused to execute inline script" in ReactJS Chrome Extension even though there are no inline scripts但是，我实际上并没有看到该链接存在解决方案。

Answer 1

问题来自浏览器脚本中babel的工作方式由于CSP对扩展的限制，您必须将其转换为带有babel localy的jsx代码，只在你的html中添加了已编译的（js）文件您可以从命令行运行babel，请参阅相关的guide here 对于以后的开发，请考虑使用诸如带有babelify插件的browserify之类的工具，请参阅usage examples here。

Answer 2

我首先尝试删除你在manifest.json中添加的至少很多内容安全策略当您的清单中没有任何哈希代码时，您会在错误中获得哈希码，这有点奇怪。所以尝试从错误中添加哈希然后我会尝试删除清单中的整个内容安全策略行，然后再次测试，如果这不起作用，请尝试仅添加script-src 'self'，然后仅添加default-src 'self'，然后再添加object-src 'self'，最近使用谷歌扩展程序的CSP很奇怪，所以你必须进行实验，default-src 'self'经常会混淆html格式。

希望这有帮助

Answer 3

尝试将INLINE_RUNTIME_CHUNK=false放入您的.env文件并重建

为我工作

感谢https://github.com/facebook/create-react-app/issues/5897

Chrome扩展程序：拒绝执行内联脚本，但没有内联脚本？

3 个答案: