소개

비망록 대신 개발을 시작할 때까지의 절차를 작성합니다.
목표는 툴바 아이콘을 클릭하여 create-react-app의 기본 페이지가 팝업 될 때까지



패키지 관리는 yarn

create-react-app 실행

v2.1.0 이후라면 --typescript 의 옵션이 사용 가능

htps : // 기주 b. 코 m / 후세 보오 k / c Rete-Rea ct-p / Repease s / g / v2.1.0

yarn에서
yarn create react-app <プロジェクト名> --typescript명령으로 create-react-app 설치/업데이트 및 프로젝트를 만들 수 있습니다.

manifest.json 편집

이대로는 Chrome 확장으로 인식되지 않으므로 manifest.json를 편집합니다.

htps : //에서 ゔぇぺぺr. ch 로메. 코 m / 에 x 텐시 온 s / 마니 후 st

최소한 필요한 항목

manifest_version

현재 유효한 버젼인 2 를 지정

version

도트 단락의 0~65535 의 1~4개의 정수로 표현할 수 있는 버젼 자동 갱신의 판단에도 사용된다

name

스토어 및 관리 화면에서도 표시되는 확장명 45자까지

아이콘 클릭 시 동작 설정

툴바에 상주하고, 클릭시에 표시되는 동작을 실현하기 위해서 아래와 같은 설정을 실시합니다

browser_action

브라우저 툴바에서 동작 설정 아이콘 지정 및 클릭시 팝업 표시 등

default_popup 로 표시 index.html

아래는 아이콘과 설명문을 추가한 예입니다.

manifest.json

{
  "name": "test-extension",
  "manifest_version": 2,
  "version": "1.0.0",
  "description": "test-extension | サンプルアプリ",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "browser_action": {
    "default_popup": "index.html"
  }
}

Chrome 확장 프로그램에 추가

빌드

프로젝트 루트에서 yarn build 실행./build/ 아래에 빌드된 파일이 확장됩니다.

Chrome에서 로드

chrome://extensions/ 부터

개발자 모드 사용

"패키지되지 않은 확장 기능로드"버튼을 클릭하십시오.

프로젝트의 ./build 폴더를 선택하고 추가합니다

지금까지의 작업으로 브라우저의 오른쪽 상단에 작성중인 확장 기능 아이콘이 표시되는 것을 확인할 수 있다고 생각합니다.
그러나 클릭하면 오류가 출력됩니다.

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

Content Security Policy 설정

오류 메시지에서도 인라인 스크립트를 실행할 수 있도록 CSP를 구성해야 합니다.

htps : //로 ゔぇぺぺr. ch 로메. 코 m / 에 x 텐시 온 s / 혼텐 츠쿠 쿠리 타이 포이 cy

기본 설정은 외부 리소스 블록과 인라인 스크립트 블록을 수행합니다.

"content_security_policy": "script-src 'self'; object-src 'self'"

인라인 스크립트 허용

오류로 표시된 해시 값을 CSP 설정에 포함하여 인라인 스크립트를 실행할 수 있습니다.
해시 값을 실제로 표시된 값으로 바꾸십시오.

"content_security_policy": "script-src 'self' 'sha256-xxx'; object-src 'self'"

설정을 추가한 후 다시 빌드하고 아이콘을 클릭하면 팝업이 표시되는지 확인할 수 있습니다.

CSP 설정을 포함한 manifest.json

manifest.json

{
  "name": "test-extension",
  "manifest_version": 2,
  "version": "1.0.0",
  "description": "test-extension | サンプルアプリ",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "browser_action": {
    "default_popup": "index.html"
  },
  "content_security_policy": "script-src 'self' 'sha256-xxx'; object-src 'self'"
}

요약

create-react-app를 사용하여 Chrome 확장 프로그램 개발을 시작하기 전까지 요약
다음 번에는 AWS Lambda에서 API를 준비하고 두드릴 때까지 게시하려고합니다.