<p>저는 <code>react-create-app</code>를 사용하여 Chrome 확장 프로그램을 빌드합니다. React-create-app에서 <code>npm run build</code>를 사용하면 다음 오류가 발생합니다. </p>
<인용문>
<p>인라인 스크립트 실행은 콘텐츠 보안 정책 지침 "script-src 'self'"를 위반하기 때문에 거부되었습니다. 인라인 실행을 활성화하려면 "unsafe-inline" 키워드, 해시('sha256-5=') 또는 일회성 nonce('nonce-...')를 사용하세요. </p>
</인용문>
<p><code>index.html</code></p>에 오류가 있습니다.
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html lang="ko">
<머리>
<meta charset="utf-8" />
<link rel="단축 아이콘" 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" />
<링크
rel="스타일시트"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
무결성="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="익명"
/>
<!--
Manifest.json은 웹 애플리케이션이 사용자의 모바일 장치 또는 데스크톱에 설치될 때 사용되는 메타데이터를 제공합니다. https://developers.google.com/web/fundamentals/web-app-manifest/를 참조하세요.
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
위 태그에서 %PUBLIC_URL% 사용에 유의하세요.
빌드 프로세스 중에 'public' 폴더의 URL로 대체됩니다.
`public` 폴더에 있는 파일만 HTML에서 참조할 수 있습니다.
"/favicon.ico" 또는 "favicon.ico"와 달리 "%PUBLIC_URL%/favicon.ico"는 클라이언트 경로 및 루트가 아닌 공개 URL에서 올바르게 작동합니다.
루트가 아닌 공개 URL을 구성하는 방법을 알아보려면 `npm run build`를 실행하세요.
-->
React 앱
</머리>
<본문>
<noscript>이 애플리케이션을 실행하려면 JavaScript를 활성화해야 합니다. </noscript>
<div id="root"></div>
<!--
이 HTML 파일은 템플릿입니다.
브라우저에서 직접 열면 빈 페이지가 나타납니다.
이 파일에 웹 글꼴, 메타 태그 또는 분석을 추가할 수 있습니다.
빌드 단계에서는 번들 스크립트를 `` 태그에 넣습니다.
개발을 시작하려면 'npm start' 또는 'yarn start'를 실행하세요.
프로덕션 번들을 생성하려면 'npm run build' 또는 'yarn build'를 사용하세요.
-->
</body>
</html></pre>
<p><strong>manifest.json</strong></p>
<pre class="brush:php;toolbar:false;">{
"manifest_version": 2,
"name": "IC 프로젝트 크롬 확장 프로그램",
"description": "이 확장 프로그램은 실제 Chrome 확장 프로그램을 만들기 위한 시작점입니다.",
"버전": "0.0.1",
"browser_action": {
"default_popup": "index.html",
"default_title": "팝업 열기"
},
"아이콘": {
"16": "자산/icon-128.png",
"48": "자산/icon-128.png",
"128": "자산/icon-128.png"
},
"content_security_policy": "script-src 'self' '안전하지 않은 평가'; object-src 'self'"
}</pre>
<p><br /></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
몇 시간 동안 고민한 끝에 효과적인 해결책을 찾았습니다. 스크립트 실행은 Mac과 PC 간에 다릅니다. 내가 찾은 답변 중 상당수는 "설정"이 있는 경우와 "설정"이 없는 경우에 차이가 있었습니다. 일부는 "&&"가 있고 일부는 없습니다. 하지만 그 중 어느 것도 나에게 적합하지 않습니다.
간단히 말하면 다음과 같이 "교차 환경" npm 패키지를 사용하세요.
으아악이 기능은 PC에서 작동하며 아마도 Mac에서도 작동할 것입니다. 물론 그 전에
npm install --save-dev cross-env해야 합니다.