크롬 익스텐션 개발 기본 구조 및 개념, 쉽게 알아보자

크롬 익스텐션 구조

• contentscript.js
  • html 로드시 함꼐 작동하는 스크립트
  • 페이지의 현재 상태 및 dom을 읽어와 조작이 가능하다.
• background.js
  • 브라우저 영역에서 동작
  • 이벤트 트리거 방식으로 동작된다.
  • 보통 중요한 이벤트는 현재 페이지에서 contentscript를 통해 읽어드리고 이후 background.js에서 처리한다.
• popup.js
  • 크롬 오른쪽 상단에 앱 아이콘을 클릭할 시 나오는 페이지 조작 script이다.
  • 기본적인 html script와 동작 방식이 같다.
  • popup.html 이 script 역할을 한다.
• manifest.json
  • chrome extension 설정 정보 파일
  • 각 script 등록 및 permission 허가, 버전 관리 등을 여기서 한다.
  • 최근 manifest version 3 등장으로 보안적인 설정을 몇 해줘야 한다.

manfiest.json

{
  "name": "[app name]",
  "description": "[App_description]",
  "version": "0.2",
  "manifest_version": 3,
  "action": {
      "default_popup" : "popup.html"
  },
  "permissions": [
    "storage",
    "activeTab",
    "",
    "tabs"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["[url]"],
      "js": ["docker.js"],
      "run_at": "document_end"
    }
  ],
  "web_accessible_resources": [
    {
      "resources": [ "docker.html","test.html", "test2.html","https://jsonplaceholder.typicode.com/posts"],
      "matches": [ "" ]
    }
  ]
}

보통 manifest.jsondptj permission으로 등록한 것들이 chrome extension object가 제공하는 기능들인데 등록해야 사용할 수 있다.

• 간단한 설명
  • content_scripts로 등록해야 html load 시 가져와 사용할 수 있따.
  • match url의 경우 해당 url에만 script만 적용한다 적용시 모든 페이지에서 활성화 된다.
  • 외부 resource를 가져올 때는 반드시 web_accessible_resource로 등록해줘야 한다.

크롬 익스텐션 개발을 위해 공부해야 할 것들

• popup to contentscript 통신
• chrome storage
• background to page,popup
• contetnscript 개발 방식