작업 구현

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

작업 등록

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

manifest.json:

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

작업에 응답

사용자가 작업 아이콘을 클릭할 때 onClicked 핸들러를 등록합니다. 매니페스트 파일에 팝업이 등록되어 있으면 이 이벤트가 트리거되지 않습니다.

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'});

도움말

매니페스트 파일의 "action" 키 아래에 있는 "default_title" 필드에 도움말을 등록합니다.

manifest.json:

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

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