Chrome 扩展：拒绝执行内联脚本，但不存在内联脚本？

Question

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

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-irwQGzGiWtpl6jTh4akRDdUUXCrtjkPABk5rinXZ5yw='), or a nonce ('nonce-...') is required to enable inline execution.

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

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，但是，我实际上并没有看到 link 的解决方案。

Answer 1

我首先会尝试至少删除您在 manifest.json 中添加的许多内容安全策略当您的清单中没有哈希码时，您会在错误中得到一个哈希码，这有点奇怪。所以尝试从错误中添加哈希，然后我会尝试删除清单中的整个内容安全策略行，然后再次测试，如果这不起作用，请尝试仅添加 script-src 'self'，然后仅添加 default-src 'self'，然后添加 object-src 'self'，最近具有 google 扩展名的 CSP 很奇怪，因此您必须进行试验，而且 default-src 'self' 经常会弄乱 html 格式。

希望对您有所帮助

Answer 2

问题出在浏览器脚本中 Babel 的工作方式。由于 CSP 对扩展的限制，您必须在本地使用 Babel 转译 jsx 代码，并且仅将转译后的 (js) 文件添加到您的 html.

您可以从命令行运行 Babel。请参阅相关guide here. For later development, consider using a tool such as Browserify with the babelify plugin. See usage examples here.

Answer 3

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

为我工作

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

Chrome 扩展：拒绝执行内联脚本，但不存在内联脚本？

Chrome Extension: Refused to execute inline script, but no inline scripts present?

javascript

google-chrome-extension

content-security-policy

reactjs