Question

我使用react-create-app构建chrome扩展名。当我在react-create-app中使用npm run build时出现错误：

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

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" />
    <meta name="theme-color" content="#000000" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

manifest.json

{
  "manifest_version": 2,
  "name": "IC Project chrome extension",
  "description": "This extension is a starting point to create a real Chrome extension",
  "version": "0.0.1",
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  },
  "icons": {
    "16": "assets/icon-128.png",
    "48": "assets/icon-128.png",
    "128": "assets/icon-128.png"
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

Answer 1

几个小时的无奈之后，我找到了一个可行的解决方案。 Mac和PC之间的运行脚本有所不同。我发现很多答案都包含“ set”和不包含“ set”。没有“ &&”，没有...没有人为我工作。

TLDR：像这样使用“ cross-env” npm软件包：

cross-env INLINE_RUNTIME_CHUNK=false react-scripts build

这可以在PC上运行，也可能在Mac上运行。当然，您需要先npm install --save-dev cross-env。

Answer 2

对于INLINE_RUNTIME_CHUNK not recognized as a command仍然存在问题的用户，您需要在构建脚本中添加 set 。

"build": "set INLINE_RUNTIME_CHUNK=false&&react-scripts build"

通过这种方式， INLINE_RUNTIME_CHUNK 值将在构建时设置，而不是在环境变量中查找。

Answer 3

在package.json中，将"build"脚本更新为：

"build": "INLINE_RUNTIME_CHUNK=false react-scripts build"

Answer 4

在int main(int argc, char **argv){ unsigned int *p; size_t q; q = (size_t) p; printf("p = %x q = %x\n", p, q) }中，将“构建”脚本更新为：

package.json

或改为使用此boilerplate。

内联脚本，因为它违反了以下内容安全策略指令：“ script-src'self'”

4 个答案: