Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

아키텍처 개요

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

확장 프로그램은 다양한 기능을 제공합니다. 사용자가 보고 상호작용하는 웹 콘텐츠를 수정하거나 브라우저 자체의 동작을 확장하고 변경할 수 있습니다.

확장 프로그램을 통해 Chrome 브라우저를 가장 맞춤설정된 브라우저로 만들 수 있습니다.

확장 파일

확장 프로그램은 파일 유형과 디렉터리 수가 다양하지만 모두 [매니페스트][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는 chrome://extensions URL로 이동하여 확인할 수 있습니다. PATH_TO_FILE은 확장 프로그램의 최상위 폴더에 있는 파일의 위치이며 상대 URL과 일치합니다.

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

아키텍처

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

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

백그라운드 스크립트

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

UI 요소

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

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

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

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

콘텐츠 스크립트

웹페이지를 읽거나 쓰는 확장 프로그램은 콘텐츠 스크립트를 활용합니다. 콘텐츠 스크립트에는 브라우저에 로드된 페이지의 컨텍스트에서 실행되는 JavaScript가 포함되어 있습니다. 콘텐츠 스크립트는 브라우저가 방문하는 웹페이지의 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 참조 문서를 살펴보고 다음 동영상을 시청하세요.

페이지 간 통신

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

데이터 저장 및 시크릿 모드

확장 프로그램은 storage API, HTML5 웹 저장소 API를 사용하거나 데이터를 저장하는 서버 요청을 만들어 데이터를 저장할 수 있습니다. 확장 프로그램에서 무언가를 저장해야 하는 경우 먼저 시크릿 창에서 저장하는지 확인합니다. 기본적으로 확장 프로그램은 시크릿 창에서 실행되지 않습니다.

시크릿 모드는 창에 흔적이 남지 않도록 합니다. 시크릿 모드 창의 데이터를 처리할 때 확장 프로그램은 이 약속을 준수해야 합니다. 확장 프로그램이 일반적으로 탐색 기록을 저장하는 경우 시크릿 창의 기록은 저장하지 않습니다. 하지만 확장 프로그램은 시크릿 창을 포함한 모든 창에서 설정 환경설정을 저장할 수 있습니다.

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

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

다음 단계 수행

개요를 읽고 시작하기 튜토리얼을 완료한 후 개발자는 자체 확장 프로그램을 작성할 수 있습니다. 다음 리소스를 통해 맞춤 Chrome의 세계를 자세히 알아보세요.

디버깅 튜토리얼에서 확장 프로그램 디버깅에 사용할 수 있는 옵션에 대해 알아보세요.
Chrome 확장 프로그램은 오픈 웹에서 사용할 수 있는 것보다 훨씬 강력한 API에 액세스할 수 있습니다. chrome.* API 문서에서 각 API를 안내합니다.
확장 프로그램 개발 개요에는 고급 확장 프로그램 생성과 관련된 문서로 연결되는 링크가 수십 개 추가되어 있습니다.