chrome 확장 프로그램

 

일반 웹 개발 vs 크롬 확장 개발

웹 개발 vs 크롬 확장 개발

시작점	index.html 같은 메인 페이지	manifest.json (설정 파일)
권한 시스템	없음 (브라우저가 제한)	manifest.json에 명시적으로 선언해야 브라우저 기능 사용 가능
페이지 접근	현재 페이지 안에서만 동작	다른 웹페이지의 DOM도 조작 가능 (content.js)
백그라운드 처리	백엔드(API 서버) 필요	background.js에서 이벤트 처리 가능
UI 실행 방식	URL 직접 접속	아이콘 클릭 → 팝업(popup.html) 실행
보안 제한(CSP)	적당히 자유로움	매우 엄격 (CDN, inline script 금지 등)
스토리지	localStorage, DB 등	chrome.storage.local, sync 등 브라우저 내장 스토리지
배포	서버에 올리면 끝	크롬 웹스토어 등록 필요 (심사 포함)

---

manifest.json이란?

크롬 확장의 모든 설정과 권한을 정의하는 파일이다.

1. 필수 기본 정보

"manifest_version"	버전 지정 (V3 고정)
"name"	확장 프로그램 이름
"version"	버전 (예: "1.0.0")
"description"	간단한 설명 (웹스토어에도 사용됨)

---

2. 동작 구조 관련

"action": 아이콘 클릭 시 뜨는 팝업

"action": {
  "default_popup": "popup.html",
  "default_icon": "icons/icon32.png"
}

하위 항목 설명

default_popup	아이콘 클릭 시 열릴 HTML
default_icon	툴바에 표시될 아이콘

---

"background": 백그라운드 작업 정의

"background": {
  "service_worker": "background.js"
}

service_worker

이벤트 처리 파일 (항상 백그라운드에서 대기)

---

"content_scripts": 웹페이지 삽입 코드 정의

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["contents.js"],
    "run_at": "document_idle"
  }
]

matches	어떤 페이지에 삽입할지 (*://*.naver.com/* 등도 가능)
js	삽입할 자바스크립트
run_at	실행 시점 (document_start, document_idle 등)

---

3. 권한 관련

"permissions": 일반 권한 요청

"permissions": [
  "storage",
  "tabs",
  "activeTab",
  "scripting",
  "contextMenus"
]

storage	chrome.storage.local 사용
tabs	탭 정보 읽기/제어
activeTab	사용자가 보고 있는 탭 접근
scripting	JS 삽입 관련
contextMenus	우클릭 메뉴 생성

---

"host_permissions": 도메인 접근 권한

"host_permissions": ["<all_urls>"]

특정 웹사이트에 접근하려면 명시 필요

예: ["*://*.naver.com/*"], ["https://example.com/*"]

---

4. 자원 관련

"icons": 확장 아이콘 이미지

"icons": {
  "16": "icons/icon16.png",
  "32": "icons/icon32.png",
  "48": "icons/icon48.png",
  "128": "icons/icon128.png"
}

"web_accessible_resources": 확장에서 외부에 노출할 파일 (ex. WASM)

"web_accessible_resources": [
  {
    "resources": ["libs/tesseract-core.wasm.wasm"],
    "matches": ["<all_urls>"]
  }
]

---

5. 부가 설정 (선택)

"options_page": 설정 페이지

"options_page": "options.html"

"default_locale": 다국어 번역 지원

"default_locale": "ko"

"commands": 단축키 지정

"commands": {
  "_execute_action": {
    "suggested_key": {
      "default": "Ctrl+Shift+Y"
    }
  }
}

---

전체 예시

{
  "manifest_version": 3,
  "name": "Sisyphus Wordbook",
  "version": "1.0",
  "description": "웹에서 단어를 추출하고 저장하는 크롬 확장 프로그램",
  "permissions": ["tabs", "storage", "contextMenus", "scripting", "activeTab"],
  "host_permissions": ["<all_urls>"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icons/icon32.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contents.js"],
      "run_at": "document_idle"
    }
  ],
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "web_accessible_resources": [
    {
      "resources": ["libs/tesseract-core.wasm.wasm"],
      "matches": ["<all_urls>"]
    }
  ]
}

manifest_version	버전 (무조건 3)
name, version, description	메타 정보
permissions	기능 권한
host_permissions	웹사이트 접근 권한
action	팝업 & 아이콘 설정
background	서비스 워커 설정
content_scripts	웹페이지에 삽입할 JS
web_accessible_resources	외부에 공개할 리소스 (wasm 등)

---

chrome. 으로 시작하는 주요 API 정리

크롬이 확장에 열어주는 내부 기능/브라우저 조작들을 담당, js파일에서 사용

---

1.  chrome.runtime — 확장 전역 제어 & 메시지 통신

chrome.runtime.sendMessage()	background, popup, content 간 메시지 전송
chrome.runtime.onMessage.addListener()	메시지 수신
chrome.runtime.getURL('file')	확장 내부 리소스 파일 경로 가져오기
chrome.runtime.onInstalled.addListener()	확장 설치 시 호출됨 (우클릭 메뉴 생성 등)

 

chrome.runtime.sendMessage({ action: "start" });

---

2. 🧠 chrome.storage — 확장 내 데이터 저장소 (localStorage 대체)

chrome.storage.local.set({key: value})	저장
chrome.storage.local.get(['key'], callback)	읽기
chrome.storage.local.clear()	전체 삭제

 

chrome.storage.local.set({ word: "apple" });
chrome.storage.local.get(["word"], (result) => {
  console.log(result.word);
});

---

3. chrome.tabs — 탭 정보 읽기 & 조작

chrome.tabs.query()	현재 탭 정보 가져오기
chrome.tabs.sendMessage()	content.js로 메시지 전송
chrome.tabs.captureVisibleTab()	현재 탭 화면 캡처 (스크린샷)

 

chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  chrome.tabs.sendMessage(tabs[0].id, { action: "startDrag" });
});

---

4.  chrome.action — 확장 아이콘 관련 제어

chrome.action.setBadgeText()	아이콘에 숫자 배지 표시
chrome.action.setPopup()	동적으로 팝업 설정 변경

 

chrome.action.setBadgeText({ text: "ON" });

---

5. chrome.contextMenus — 우클릭 메뉴 생성

chrome.contextMenus.create()	메뉴 추가
chrome.contextMenus.onClicked.addListener()	클릭 감지

 

chrome.contextMenus.create({
  id: "saveWord",
  title: "📌 단어장에 추가",
  contexts: ["selection"]
});

---

6. chrome.scripting — 코드 삽입 (content.js를 동적으로 삽입)

chrome.scripting.executeScript()	탭에 JS 코드 삽입
chrome.scripting.insertCSS()	탭에 CSS 삽입

 

chrome.scripting.executeScript({
  target: { tabId },
  files: ["content.js"]
});

---

7. chrome.permissions — 권한 요청/체크

chrome.permissions.request()	동적으로 권한 요청
chrome.permissions.contains()	권한 확인

---

8. chrome.identity — 사용자 인증 (Google 계정 연동 등)

chrome.identity.getAuthToken()	OAuth 인증 토큰 요청
chrome.identity.getProfileUserInfo()	사용자 이메일 등 가져오기

---

상황 사용 API

페이지 안에서 텍스트 드래그 감지	content.js + chrome.runtime.sendMessage
현재 탭에서 캡처	chrome.tabs.captureVisibleTab()
우클릭 메뉴 추가	chrome.contextMenus.create()
확장 저장소에 데이터 저장	chrome.storage.local.set()
확장 아이콘 클릭 → 팝업 표시	manifest.json → action.default_popup
메시지 송수신	chrome.runtime.sendMessage() / onMessage.addListener()

 

확장 프로그램 / 개발  |  Chrome for Developers