크롬 확장 프로그램 분석기
회사에서 크롬 확장 프로그램을 개발하는 건 아니고 오픈 소스로 올라와 있는 크롬 확장 프로그램을 이용해야 해서 구조를 분석해야 하는 일이 생겼다. 잘 정리된 글들은 많았는데 내 머리가 부족해서 이해를 계속 실패하는 듯 해서 정리해본다.
참조
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: 개별 페이지의 생애 주기와 관련없이 특정 작업을 하고 싶을 때 처리함.
{
"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"]
}
],
}
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에 대해서 디버깅 가능하다.
Author And Source
이 문제에 관하여(크롬 확장 프로그램 분석기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@minchoi/크롬-확장-프로그램-분석기-biauhudi저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)