[크롬 확장 프로그램 제작] 셋팅 방법

크롬 확장 프로그램을 아시나요?

크롬 확장프로그램

크롬 확장 프로그램 프로젝트를 진행하기 위한 셋팅을 알아보겠습니다.

 

---

 

1. 프로젝트 CRA(create-react-app)로 시작

npx create-react-app extension-project

 

설치가 완료되면 구조가 이러합니다.

create-react-app 구조

 

 

 

2. manifest.json 파일 수정

public > manifest.json

{
  "name": "your project name",
  "icons": {
    "16": "icon-16x16.png",
    "48": "icon-32x32.png",
    "64": "icon-64x64.png",
    "128": "icon-128x128.png"
  },
  "permissions": [],
  "manifest_version": 3,
  "version": "0.0.1",
  "action": {
    "default_popup": "index.html",
    "default_title": "your project title"
  }
}

여기서 참고할사항은 manifest_version입니다. 

검색을 해보면 대부분 2 버전으로 되어있는데, 2와 3을 잘 파악해서 쓰시기를 바랍니다.

action과 같은 몇개의 부분들이 변경된 듯합니다.

name에 프로젝트 이름과 함께 icons에 아이콘을 등록해줍시다.

16 사이즈는 아래와 같이 확장 플러그인 액세스 고정하면 나오는 아이콘이고 favicon.ico등 여러 확장자가 가능한 듯합니다.

액세스 고정시 나오는 영역

48, 64, 128 등의 사이즈는 확장 플러그인 관리창이나 다운로드 창에서 사용된다고 합니다.

확장 플러그인 관리창은 chrome://extensions/로 이동하거나 아래와 같이 아이콘을 클릭하면 나옵니다.

확장 프로그램 아이콘 클릭 > 확장 프로그램 관리

이동하면 보이는 아이콘들입니다.

아이콘들

 

permissions는 사용자의 컴퓨터에 권한을 설정하는 곳입니다. 즉 storage를 사용하기 위해서는 permissions에 추가해야합니다.

version은 출시하는 버전을 작성하면되고, 스토어에 버전정보가 노출됩니다.

actions은 2버전에서는 browser_action이었는데 3에서 통합되었다고 합니다.

확장 기능 액션 수행 시 필요한 곳입니다.

 

 

 

3. .env 파일

.env 파일은 루트에 생성하도록 합니다.

.env 생성

.env 파일은 환경 변수를 저장하는 파일인데, 아래와 같은 코드를 추가합니다.

extension에서는 인라인 자바스크립트를 허용하지 않기 때문에 추가해야한다고 하는데, 여튼 이게 없으면 오류가 납니다.

// .env
INLINE_RUNTIME_CHUNK=false

 

 

 

4. 빌드

자 이제 빌드해줍니다.

npm run build

build

 

 

 

5. 확장 프로그램 등록

파일을 등록해주겠습니다.

위에서 설명한 확장 프로그램 관리 페이지로 이동합니다.

chrome://extensions/ 

확장프로그램 페이지

1) 왼쪽 상단의 개발자 모드 버튼 클릭

2) 압축해제된 확장 프로그램을 로드합니다. 등의 버튼이 뜨면 해당 버튼 클릭

3) build 폴더를 찾아서 등록

build 폴더 등록

4) 등록된 것 확인

확장프로그램 등록된 캡쳐

5) 확장 프로그램 아이콘 클릭 > 내가 등록한 프로그램 고정

확장프로그램 고정 캡쳐

6) 등록확인

확장프로그램 등록 확인

 

 

---

https://developer.chrome.com/docs/extensions/mv3/intro/