작업 구현

작업은 사용자가 툴바 아이콘(일반적으로 확장 프로그램의 작업 아이콘이라고 함)을 클릭하면 발생하는 작업입니다. 작업이 Action API를 사용하여 확장 프로그램 기능을 호출하거나 팝업을 엽니다. 이 페이지에서는 확장 프로그램 기능을 호출하는 방법을 설명합니다. 팝업을 사용하려면 팝업 추가를 참고하세요.

작업 등록

chrome.action API를 사용하려면 확장 프로그램의 매니페스트 파일에 "action" 키를 추가합니다. 이 필드의 선택적 속성에 관한 자세한 설명은 chrome.action API 참조의 매니페스트 섹션을 참고하세요.

manifest.json:

{
  "name": "My Awesome action Extension",
 ...
  "action": {
   ...
  }
 ...
}

작업에 응답

사용자가 작업 아이콘을 클릭할 때를 위한 onClicked 핸들러를 등록합니다. 이 이벤트는 manifest.json 파일에 팝업이 등록된 경우 트리거되지 않습니다.

service-worker.js로 이동하세요.

chrome.action.onClicked.addListener((tab) => {
  chrome.action.setTitle({
    tabId: tab.id,
    title: `You are on tab: ${tab.id}`});
});

조건부로 작업 활성화

chrome.declarativeContent API를 사용하면 페이지 URL을 기반으로 또는 CSS 선택자가 페이지의 요소와 일치하는 경우 확장 프로그램의 작업 아이콘을 사용 설정할 수 있습니다. 확장 프로그램의 작업 아이콘이 사용 중지되면 아이콘이 비활성화됩니다. 사용자가 사용 중지됨 아이콘을 클릭하면 확장 프로그램의 컨텍스트 메뉴가 표시됩니다.

작업 배지

배지는 작업 아이콘 위에 배치된 서식이 지정된 텍스트 조각으로, 확장 프로그램 상태 또는 사용자가 작업을 필요로 하는 사항 등을 나타냅니다. 이를 보여주기 위해 Drink Water 샘플은 사용자가 알람을 설정했음을 나타내기 위해 'ON' 상태의 배지를 표시하고 확장 프로그램이 유휴 상태일 때는 아무것도 표시하지 않습니다. 배지에는 최대 4자(영문 기준)를 포함할 수 있습니다.

chrome.action.setBadgeText()를 호출하여 배지 텍스트를 설정하고 chrome.action.setBadgeBackgroundColor()`를 호출하여 배경 색상을 설정합니다.

service-worker.js로 이동하세요.

chrome.action.setBadgeText({text: 'ON'});
chrome.action.setBadgeBackgroundColor({color: '#4688F1'});

도움말

manifest.json 파일에서 "action" 키 아래의 "default_title" 필드에 도움말을 등록합니다.

manifest.json:

{
  "name": "Tab Flipper",
 ...
  "action": {
    "default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
  }
...
}

action.setTitle()`를 호출하여 도움말을 설정하거나 업데이트할 수도 있습니다. 도움말이 설정되지 않은 경우 확장 프로그램의 이름이 표시됩니다.