I use react-create-app to build my chrome-extension. When I use npm run build in react-create-app I have error:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-5='), or a nonce ('nonce-...') is required to enable inline execution.
Error in 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'"
}
After a couple of hours full of frustration I've found a working solution. There is a difference in running scripts between Mac and a PC. A lot of answers I found had it inline with a "set" and without. With "&&" and without... Neither one was working for me.
TLDR: use the "cross-env" npm package like this:
cross-env INLINE_RUNTIME_CHUNK=false react-scripts build
This works on a PC and probably on Mac as well. Of course you need to npm install --save-dev cross-env it before.
In package.json , update the "build" script to be:
"build": "INLINE_RUNTIME_CHUNK=false react-scripts build"
For those still having problem with the INLINE_RUNTIME_CHUNK not recognized as a command , you need to add set to the build script.
"build": "set INLINE_RUNTIME_CHUNK=false&&react-scripts build"
This way the INLINE_RUNTIME_CHUNK value will be set on building rather than looking for it on the environment variables.
In package.json , update the "build" script to be:
"build": "INLINE_RUNTIME_CHUNK=false && react-scripts build"
or use this boilerplate instead.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.