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

아키텍처 개요

확장 프로그램은 웹에서 사용되는 HTML, CSS, JavaScript, 이미지 및 기타 파일의 압축된 번들입니다. 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는 URL로 이동하여 볼 수 있습니다. chrome://extensions입니다. PATH_TO_FILE는 확장 프로그램의 최상위 폴더, 상대 URL과 일치합니다.

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

아키텍처

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

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

백그라운드 스크립트

백그라운드 스크립트는 확장 프로그램의 이벤트 핸들러입니다. 리스너가 포함되고 이벤트 목록을 가져옵니다. 이벤트가 시작될 때까지 휴면 상태임 명령된 로직을 수행합니다 효과적인 백그라운드 스크립트는 필요할 때만 로드되고 언로드됩니다.

UI 요소

확장 프로그램의 사용자 인터페이스는 목적이 있고 최소화되어야 합니다. UI는 맞춤설정하거나 브라우징 환경을 개선할 수 있습니다. 대부분의 확장 프로그램에는 브라우저가 있고 다른 형태의 UI를 포함할 수 있지만 예를 들어 컨텍스트 메뉴, 검색주소창 사용, 단축키.

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

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

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

콘텐츠 스크립트

웹페이지를 읽거나 쓰는 확장 프로그램은 콘텐츠 스크립트를 활용합니다. 이 콘텐츠 스크립트에는 있습니다. 콘텐츠 스크립트는 브라우저가 방문하는 웹페이지의 DOM을 읽고 수정합니다.

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

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

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

옵션 페이지

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

Chrome API 사용

확장 프로그램은 웹페이지와 동일한 API에 액세스할 수 있을 뿐만 아니라 브라우저와의 긴밀한 통합을 생성하는 확장 프로그램 관련 API입니다. 확장 프로그램 및 웹페이지는 표준 window.open() 메서드에 둘 다 액세스하여 URL을 열 수 있지만 확장 프로그램은 Chrome API를 사용하여 URL을 표시할 창 지정 tabs.create 메서드를 사용할 수 있습니다.

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

대부분의 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()와 같은 chrome.extension 메서드를 사용하여 서로를 찾을 수 있음 및 getBackgroundPage() 한 페이지에 다른 확장 페이지에 대한 참조가 있으면 첫 번째 확장 페이지에 다른 페이지에서 함수를 호출하고 해당 DOM을 조작할 수 있습니다. 또한 확장 프로그램은 storage API를 사용하여 저장된 값에 액세스하고 메시지 전달이 포함됩니다.

데이터 저장 및 시크릿 모드

확장 프로그램은 storage API, HTML5 웹 스토리지인 API를 호출하거나 데이터 저장을 초래하는 서버 요청을 실행할 수 있습니다. 확장 프로그램이 저장해야 하는 경우 먼저 시크릿 창에서 가져온 것인지 확인합니다. 기본적으로 확장 프로그램은 시크릿 창에서 실행되지 않습니다.

시크릿 모드는 창에 아무 것도 남기지 않습니다. 인코더-디코더 아키텍처를 시크릿 창을 사용하는 경우 확장 프로그램은 이 약속을 지켜야 합니다. 확장 프로그램에서 일반적으로 인터넷 사용 기록을 저장하는 경우 시크릿 창의 기록을 저장하지 않습니다. 하지만 확장 프로그램은 모든 창에서 환경설정을 변경할 수 있습니다.

창이 시크릿 모드인지 감지하려면 관련 incognito 속성에서 tabs.Tab 또는 windows.Window 객체를 반환합니다.

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

다음 단계 수행

개요를 읽고 시작하기 튜토리얼을 완료한 후 개발자는 자신만의 확장 프로그램을 작성할 준비가 되어 있어야 합니다. 디지털 세상에 푹 빠져 보세요. 다음 리소스를 참고하세요.

확장 프로그램을 디버깅하는 데 사용할 수 있는 옵션에 대해서는 디버깅 튜토리얼을 참고하세요.
Chrome 확장 프로그램은 오픈 웹에서 제공되는 것 이상의 강력한 API에 액세스할 수 있습니다. chrome.* API 문서에서 각 API를 살펴봅니다.
확장 프로그램 개발 개요에는 고급 확장 프로그램 생성과 관련된 문서를 참조하세요.