이 페이지는 Cloud Translation API를 통해 번역되었습니다.

아키텍처 개요

확장 프로그램은 웹 플랫폼에서 사용되는 HTML, CSS, 자바스크립트, 이미지 및 기타 파일의 압축된 번들으로, Chrome 탐색 환경을 맞춤설정합니다. 확장 프로그램은 웹 기술을 사용하여 빌드되며 브라우저가 공개 웹에 제공하는 것과 동일한 API를 사용할 수 있습니다.

확장 프로그램에는 다양한 기능적 가능성이 있습니다. 또한 사용자에게 표시되는 웹 콘텐츠를 수정하고 상호작용하거나 브라우저 자체의 동작을 확장하고 변경할 수 있습니다.

확장 프로그램을 Chrome 브라우저를 가장 개인화된 브라우저로 만들기 위한 관문으로 활용해 보세요.

확장 프로그램 파일

확장 프로그램은 파일 유형과 디렉터리 수에 따라 다르지만 모두 [manifest][docs-manifest]가 있어야 합니다. 기본적이지만 유용한 확장 프로그램은 매니페스트와 툴바 아이콘으로만 구성될 수 있습니다.

manifest.json라는 매니페스트 파일은 가장 중요한 파일 및 확장 프로그램이 사용할 수 있는 기능 등 확장 프로그램에 대한 정보를 브라우저에 제공합니다.

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": {
    "128": "icon_16.png",
    "128": "icon_32.png",
    "128": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "persistent": false,
    "scripts": ["background_script.js"]
  },
  "permissions": ["https://*.google.com/", "activeTab"],
  "browser_action": {
    "default_icon": "icon_16.png",
    "default_popup": "popup.html"
  }
}

확장 프로그램에는 브라우저 툴바에 표시되는 아이콘이 있어야 합니다. 툴바 아이콘을 사용하면 쉽게 액세스하고 사용자가 어떤 확장 프로그램이 설치되었는지 알 수 있습니다. 대부분의 사용자는 아이콘을 클릭하여 팝업을 사용하는 확장 프로그램과 상호작용합니다.

이 Google Mail Checker 확장 프로그램은 브라우저 작업을 사용합니다.

Google Mail Checker 확장 프로그램 스크린샷

이 Mappy 확장 프로그램은 페이지 작업 및 콘텐츠 스크립트를 사용합니다.

Mappy 확장 프로그램의 스크린샷

파일 참조

확장 프로그램의 파일은 일반 HTML 페이지의 파일처럼 상대 URL을 사용하여 참조할 수 있습니다.

<img src="images/my_image.png">

또한 각 파일은 절대 URL을 사용하여 액세스할 수도 있습니다.

chrome-extension://EXTENSION_ID/PATH_TO_FILE

절대 URL에서 EXTENSION_ID는 확장 프로그램 시스템이 각 확장 프로그램에 대해 생성하는 고유 식별자입니다. 로드된 모든 확장 프로그램의 ID는 URL chrome://extensions로 이동하여 볼 수 있습니다. PATH_TO_FILE은 확장 프로그램의 최상위 폴더에 있는 파일의 위치로, 상대 URL과 일치합니다.

압축해제된 확장 프로그램에서 작업하는 동안 확장 프로그램 ID가 변경될 수 있습니다. 특히 확장 프로그램이 다른 디렉터리에서 로드되면 압축해제된 확장 프로그램의 ID가 변경되고, 확장 프로그램이 패키징될 때 ID가 다시 변경됩니다. 확장 프로그램의 코드가 절대 URL에 의존하는 경우 chrome.runtime.getURL() 메서드를 사용하여 개발 중에 ID 하드코딩을 방지할 수 있습니다.

아키텍처

확장 프로그램의 아키텍처는 기능에 따라 다르지만 많은 강력한 확장 프로그램에는 여러 구성요소가 포함됩니다.

매니페스트
백그라운드 스크립트
UI 요소
콘텐츠 스크립트
옵션 페이지

백그라운드 스크립트

백그라운드 스크립트는 확장 프로그램의 이벤트 핸들러로, 확장 프로그램에 중요한 브라우저 이벤트의 리스너가 포함되어 있습니다. 이벤트가 발생한 후 명령에 지정된 로직을 실행할 때까지 휴면 상태로 있습니다. 효과적인 백그라운드 스크립트는 필요할 때만 로드되고 유휴 상태가 되면 로드 해제됩니다.

UI 요소

확장 프로그램의 사용자 인터페이스는 용도가 명확하고 간결해야 합니다. UI는 방해가 되지 않는 탐색 환경을 맞춤설정하거나 개선해야 합니다. 대부분의 확장 프로그램에는 브라우저 작업 또는 페이지 작업이 있지만 컨텍스트 메뉴, 검색주소창 사용, 단축키 만들기와 같은 다른 형태의 UI가 포함될 수 있습니다.

팝업과 같은 확장 프로그램 UI 페이지에는 자바스크립트 로직이 포함된 일반 HTML 페이지가 포함될 수 있습니다. 확장 프로그램은 tabs.create 또는 window.open()를 호출하여 확장 프로그램에 있는 추가 HTML 파일을 표시할 수도 있습니다.

페이지 작업 및 팝업을 사용하는 확장 프로그램은 선언적 콘텐츠 API를 사용하여 사용자에게 팝업을 사용할 수 있는 시점에 관해 백그라운드 스크립트에서 규칙을 설정할 수 있습니다. 조건이 충족되면 백그라운드 스크립트가 팝업과 통신하여 아이콘을 사용자가 클릭할 수 있도록 만듭니다.

팝업을 표시하는 페이지 작업이 포함된 브라우저 창

콘텐츠 스크립트

웹페이지를 읽거나 쓰는 확장 프로그램은 콘텐츠 스크립트를 활용합니다. 콘텐츠 스크립트에는 브라우저에 로드된 페이지의 컨텍스트에서 실행되는 자바스크립트가 포함됩니다. 콘텐츠 스크립트는 브라우저가 방문하는 웹페이지의 DOM을 읽고 수정합니다.

페이지 작업과 콘텐츠 스크립트가 있는 브라우저 창

콘텐츠 스크립트는 메시지를 교환하고 storage API를 사용하여 값을 저장하여 상위 확장 프로그램과 통신할 수 있습니다.

콘텐츠 스크립트와 상위 확장 프로그램 간의 통신 경로를 표시합니다.

옵션 페이지

확장 프로그램을 사용하여 사용자가 Chrome 브라우저를 맞춤설정할 수 있는 것처럼 옵션 페이지에서 확장 프로그램을 맞춤설정할 수 있습니다. 옵션을 사용하여 기능을 사용 설정하고 사용자가 자신의 필요와 관련된 기능을 선택하도록 할 수 있습니다.

Chrome API 사용

확장 프로그램은 웹페이지와 동일한 API에 액세스할 수 있을 뿐만 아니라 브라우저와 긴밀하게 통합하는 확장 프로그램별 API를 사용할 수도 있습니다. 확장 프로그램과 웹페이지는 모두 표준 window.open() 메서드에 액세스하여 URL을 열 수 있지만 대신 확장 프로그램은 Chrome API tabs.create 메서드를 사용하여 URL을 표시할 창을 지정할 수 있습니다.

비동기 메서드와 동기 메서드 비교

대부분의 Chrome API 메서드는 비동기식입니다. 작업이 완료될 때까지 기다리지 않고 즉시 반환됩니다. 확장 프로그램에서 비동기 작업의 결과를 알아야 하는 경우 메서드에 콜백 함수를 전달할 수 있습니다. 콜백은 나중에, 메서드가 반환된 후 실행됩니다.

확장 프로그램이 사용자가 현재 선택한 탭을 새 URL로 이동해야 하는 경우 현재 탭의 ID를 가져온 다음 해당 탭의 주소를 새 URL로 업데이트해야 합니다.

tabs.query 메서드가 동기식이면 다음과 같을 것입니다.

//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();

query()가 비동기식이므로 이 접근 방식은 실패합니다. 작업이 완료될 때까지 기다리지 않고 반환되며 값을 반환하지 않습니다. 서명에서 콜백 매개변수를 사용할 수 있는 경우 메서드는 비동기식입니다.

// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)

탭을 올바르게 쿼리하고 URL을 업데이트하려면 확장 프로그램이 콜백 매개변수를 사용해야 합니다.

//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
  chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();

위 코드에서는 1, 4, 2의 순서로 줄이 실행됩니다. query()에 지정된 콜백 함수가 호출되고 2행이 실행되지만 현재 선택된 탭에 관한 정보가 사용 가능한 후에만 실행됩니다. 이는 query()가 반환된 후 발생합니다. update()는 비동기식이지만 확장 프로그램이 업데이트 결과로 아무 작업도 하지 않으므로 코드는 콜백 매개변수를 사용하지 않습니다.

// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()

이 메서드는 동기식으로 URL을 string로 반환하고 다른 비동기 작업을 실행하지 않습니다.

세부정보 더보기

자세한 내용은 Chrome API 참조 문서를 살펴보고 다음 동영상을 시청하세요.

페이지 간 통신

확장 프로그램의 여러 구성요소가 서로 통신해야 하는 경우가 많습니다. 여러 HTML 페이지에서 getViews() 및 getBackgroundPage()와 같은 chrome.extension 메서드를 사용하여 서로를 찾을 수 있습니다. 페이지에 다른 확장 프로그램 페이지 참조가 있으면 첫 번째 페이지가 다른 페이지의 함수를 호출하고 DOM을 조작할 수 있습니다. 또한 확장 프로그램의 모든 구성요소는 storage API를 사용하여 저장된 값에 액세스하고 메시지 전달을 통해 통신할 수 있습니다.

데이터 및 시크릿 모드 저장

확장 프로그램은 storage API, HTML5 웹 Storage API를 사용하거나 데이터 저장을 유도하는 서버 요청을 실행하여 데이터를 저장할 수 있습니다. 확장 프로그램에서 항목을 저장해야 하는 경우 먼저 시크릿 창에서 저장된 것인지 고려하세요. 기본적으로 확장 프로그램은 시크릿 창에서 실행되지 않습니다.

시크릿 모드는 창에 흔적을 남기지 않습니다. 시크릿 창의 데이터를 처리할 때 확장 프로그램은 이 약속을 준수해야 합니다. 확장 프로그램이 일반적으로 방문 기록을 저장하는 경우 시크릿 창의 방문 기록을 저장하지 마세요. 그러나 확장 프로그램은 시크릿 모드 여부에 관계없이 모든 창에서 설정 환경설정을 저장할 수 있습니다.

창이 시크릿 모드인지 감지하려면 관련 tabs.Tab 또는 windows.Window 객체의 incognito 속성을 확인합니다.

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

다음 단계 수행

개요를 읽고 시작하기 튜토리얼을 완료한 후에는 개발자는 자체 확장 프로그램을 작성할 준비가 되어 있어야 합니다. 다음 리소스를 통해 맞춤 Chrome에 대해 자세히 알아보세요.

디버깅 튜토리얼에서 확장 프로그램 디버깅에 사용할 수 있는 옵션에 대해 알아보세요.
Chrome 확장 프로그램을 사용하면 공개 웹의 API를 넘어 강력한 API에 액세스할 수 있습니다. chrome.* API 문서에서 각 API를 안내합니다.
확장 프로그램 개발 개요에는 고급 확장 프로그램 만들기와 관련된 문서의 수십 개의 추가 링크가 포함되어 있습니다.