크롬 확장 프로그램 분석기

회사에서 크롬 확장 프로그램을 개발하는 건 아니고 오픈 소스로 올라와 있는 크롬 확장 프로그램을 이용해야 해서 구조를 분석해야 하는 일이 생겼다. 잘 정리된 글들은 많았는데 내 머리가 부족해서 이해를 계속 실패하는 듯 해서 정리해본다.

참조
https://developer.chrome.com/docs/extensions/
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions
https://techblog.woowahan.com/2707/
https://zuminternet.github.io/Zum-Chrome-Extension/
https://www.letmecompile.com/chrome-extension-with-react/

구조

Mainifest.json

  • 모든 확장 프로그램이 가지고 있어야 하는 파일
  • 확장 프로그램 이름, 버전
    {
      "manifest_version": 2, // 해당 매니페스트의 버전 표시 
      "name": "...", // 확장 프로그램 이름
    	"description": "...", // 확장 프로그램 상세 설명
      "icons": { // 아이콘
        "48": "icon.png",
        "96": "[email protected]"
      },
    	"permissions": [
    	    "bookmarks",             
    	    "topSites", 
    	    "https://*.example.com/*" 
    	    "<all_urls>"
    	    "activeTab",
    	    "tabs", 
    	    "storage",
    	    "history"
    	],
      "background": {
        "scripts": ["jquery.js", "my-background.js"],
      },
      "browser_action": {
        "default_icon": {
          "19": "button/geo-19.png",
          "38": "button/geo-38.png"
        },
        "default_title": "Whereami?",
        "default_popup": "popup/geo.html"
      },
      "content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
      "content_scripts": [
        {
          "exclude_matches": ["*://developer.mozilla.org/*"],
          "matches": ["*://*.mozilla.org/*"],
          "js": ["borderify.js"]
        }
      ],
    }
  • content_security_policy(CSP)
  • permissions : 플러그인에서 사용될 권한들 정의. tabs, storage, webRequest와 같은 값들을 많이 사용한다고 함.
  • content_scripts: 파일 경로는 Mainifest.json을 기준으로 함
  • background: 개별 페이지의 생애 주기와 관련없이 특정 작업을 하고 싶을 때 처리함.

Background Script

  • 대부분의 Extension API가 사용 가능함 : chrome.*
  • 개별 웹 페이지에 대한 접근 권한은 없음
  • 이벤트 핸들러

Content Script

  • 브라우저 내의 웹 페이지를 제어 할 수 있는 영역. DOM 객체 제어, 조작이 가능하다.
  • 아주 일부의 Extension API에만 접근이 가능함 : chrome.runtime.* 접근 가능
  • background scripts와 메세지를 통해 정보를 교환하는 방식으로 프로그램을 설계해야 함.
  • 브라우저에 로딩된 페이지의 context에서 실행 될 수 있는 Javascript를 삽입 할 수 있음
  • window.postMessage를 통해서 개별 웹 페이지의 스크립트와도 통신이 가능함.
  • background.js 정보 교환 하는 방법
    chrome.runtime.onMessage
    chrome.runtime.sendMessage
  • 브라우저와 정보 교환 하는 방법
    window.postMessage
    var port = chrome.runtime.connect(); port.postMessage

개발 환경 세팅

  • 확장 프로그램 메뉴에서 개발자 모드를 on 해주고 Mainifest.json 이 존재하는 폴더를 로드해준다.
  • Background script에 대해서 디버깅 가능하다.

좋은 웹페이지 즐겨찾기