작업 구현

작업은 사용자가 툴바 아이콘(일반적으로 확장 프로그램의 작업 아이콘이라고 함)을 클릭하면 발생하는 작업입니다. 작업이 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 선택자가 페이지의 요소와 일치하는 경우 확장 프로그램의 작업 아이콘을 사용 설정할 수 있습니다. 확장 프로그램의 작업 아이콘이 사용 중지되면 아이콘이 회색으로 표시됩니다. 사용자가 사용 중지된 아이콘을 클릭하면 확장 프로그램의 컨텍스트 메뉴가 표시됩니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 사용 중지된 작업 아이콘

작업 배지

배지는 작업 아이콘 위에 배치되는 서식이 지정된 텍스트로서 확장 프로그램 상태 또는 사용자에게 필요한 작업이 있음을 나타냅니다. 이를 보여주기 위해 Drink Water 샘플에서는 배지가 '켜짐'으로 표시됩니다. 알람을 설정했음을 표시하고 확장 프로그램이 유휴 상태일 때는 아무것도 표시하지 않도록 합니다. 배지는 최대 4자까지 포함할 수 있습니다.

<ph type="x-smartling-placeholder">

</ph>

배지가 없는 확장 프로그램 아이콘 (왼쪽)과 배지가 있는 확장 프로그램 아이콘 (오른쪽)

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