크롬 확장자 개발기, 구성요소 살펴보기👀

• 구성요소:
  • 배경 스크립트
  • 콘텐츠 스크립트
  • 옵션 페이지
  • UI 요소

1. 메니페스트 파일 만들기

확장프로그램은 매니페스트에서 시작한다.
manifest.json 파일을 만들어 기본 세팅 코드 복붙하기:

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
   "externally_connectable": {
    "matches": ["*://*.naver.com/*", "*://*.google.com/*", ...]
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["src/scripts/run.ts"]
    }
  ],
}

아이콘, 실행시킬 백그라운드 파일 위치 등 기본적인 것부터 중요한 정보를 제공하는 내용들을 세팅할 수 있다.

• content_scripts: 웹 페이지 내용에 실행될 꾸밈 파일. 표준 DOM을 사용해 브라우저가 방문하는 웹페이지의 세부정보를 읽고 변경해서 extension에 전달 할 수 있게 해줌. 만든 css,js를 인젝트할 때 사용함.
  • matches: 콘텐츠 스크립트가 삽입될 페이지를 지정
• externally_connectable: 외부 연결 가능 여부
  • matches: 연결이 허용된 웹 페이지 의 URL 패턴입니다. 이는 콘텐츠 스크립트에 영향을 미치지 않습니다. 비워두거나 지정하지 않으면 웹 페이지에 연결할 수 없습니다. , http:///, ://.com/, 심지어 http://.appspot.com/*없습니다.

2. 매니페스트에 백그라운드 스크립트 추가

매니페스트에 백그라운드 스크립트를 등록하면 참조할 파일과 해당 파일이 작동하는 방식을 익스텐션에 알린다.

// manifest.json
{
 ...
 "background": {
     "scripts": ["path"]
 }
}

3. 백그라운드 스크립트 만들기

let color = '#3aa757';
chrome.runtime.onInstalled.addListener(()=>{
  chrome.storage.sync.set({color});
  console.log(`set color is ${color}`);
})

• onInstalled: 확장 프로그램이 처음 설치될 때, 확장 프로그램이 새버전으로 업데이트될 때, 크롬이 새 버전으로 업데이트될 때 실행.