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

chrome.action

설명

chrome.action API를 사용하여 Chrome 툴바에서 확장 프로그램 아이콘을 제어합니다.

작업 아이콘은 브라우저 툴바의 검색주소창 옆에 표시됩니다. 설치 후 확장 프로그램 메뉴 (퍼즐 조각 아이콘)에 표시됩니다. 사용자가 확장 프로그램 아이콘을 툴바에 고정할 수 있습니다.

가용성

Chrome 88 이상 MV3 이상

매니페스트

이 API를 사용하려면 다음 키를 매니페스트에서 선언해야 합니다.

"action"

chrome.action API를 사용하려면 "manifest_version"를 3로 지정하고 매니페스트 파일에 "action" 키를 포함합니다.

{
  "name": "Action Extension",
  ...
  "action": {
    "default_icon": {              // optional
      "16": "images/icon16.png",   // optional
      "24": "images/icon24.png",   // optional
      "32": "images/icon32.png"    // optional
    },
    "default_title": "Click Me",   // optional, shown in tooltip
    "default_popup": "popup.html"  // optional
  },
  ...
}

"action" 키 (하위 요소 포함)는 선택사항입니다. 포함되지 않은 경우에도 확장 프로그램의 메뉴에 액세스할 수 있도록 확장 프로그램이 툴바에 계속 표시됩니다. 따라서 항상 "action" 및 "default_icon" 키를 포함하는 것이 좋습니다.

개념 및 사용

UI의 일부

아이콘

아이콘은 확장 프로그램의 툴바에 있는 기본 이미지이며 매니페스트의 "action" 키에 있는 "default_icon" 키로 설정됩니다. 아이콘의 너비와 높이는 기기 독립형 픽셀 (DIP) 16개여야 합니다.

"default_icon" 키는 크기와 이미지 경로의 사전입니다. Chrome은 이러한 아이콘을 사용하여 사용할 이미지 크기를 선택합니다. 정확한 일치 항목을 찾을 수 없는 경우 Chrome은 가장 근접한 항목을 선택하여 이미지에 맞게 크기를 조정하며, 이로 인해 이미지 품질에 영향을 줄 수 있습니다.

1.5배 또는 1.2배와 같이 흔하지 않은 크기 배율을 사용하는 기기가 점점 더 많아지고 있으므로 아이콘에 여러 크기를 제공하는 것이 좋습니다. 이렇게 하면 잠재적인 아이콘 디스플레이 크기 변경에 대비하여 확장 프로그램을 미래에 대비할 수 있습니다. 단, 크기를 하나만 제공하는 경우 "default_icon" 키를 사전 대신 단일 아이콘의 경로가 포함된 문자열로 설정할 수도 있습니다.

action.setIcon()를 호출하여 다른 이미지 경로를 지정하거나 HTML 캔버스 요소를 사용하여 동적으로 생성된 아이콘을 제공하거나 확장 프로그램 서비스 워커에서 설정하는 경우 오프스크린 캔버스 API를 사용하여 확장 프로그램의 아이콘을 프로그래매틱 방식으로 설정할 수도 있습니다.

const canvas = new OffscreenCanvas(16, 16);
const context = canvas.getContext('2d');
context.clearRect(0, 0, 16, 16);
context.fillStyle = '#00FF00';  // Green
context.fillRect(0, 0, 16, 16);
const imageData = context.getImageData(0, 0, 16, 16);
chrome.action.setIcon({imageData: imageData}, () => { /* ... */ });

참고: action.setIcon() API는 정적 이미지를 설정하기 위한 것입니다. 아이콘에 애니메이션 이미지를 사용하지 마세요.

패키징된 확장 프로그램(.crx 파일에서 설치됨)의 경우 이미지는 PNG, JPEG, BMP, ICO 등 Blink 렌더링 엔진이 표시할 수 있는 대부분의 형식일 수 있습니다. SVG는 지원되지 않습니다. 압축을 푼 확장 프로그램은 PNG 이미지를 사용해야 합니다.

도움말 또는 제목은 사용자가 툴바에서 확장 프로그램 아이콘 위로 마우스 포인터를 가져가면 표시됩니다. 또한 버튼에 포커스가 있을 때 스크린 리더에서 읽어 주는 액세스 가능한 텍스트에도 포함됩니다.

기본 도움말은 manifest.json의 "action" 키의 "default_title" 필드를 사용하여 설정됩니다. action.setTitle()를 호출하여 프로그래매틱 방식으로 설정할 수도 있습니다.

배지

원하는 경우 작업에 '배지'(아이콘 위에 레이어된 텍스트)를 표시할 수 있습니다. 이렇게 하면 카운터와 같은 확장 프로그램 상태에 관한 소량의 정보를 표시하도록 작업을 업데이트할 수 있습니다. 배지에는 텍스트 구성요소와 배경 색상이 있습니다. 공간이 제한되어 있으므로 배지 텍스트는 4자(영문 기준) 이하를 사용하는 것이 좋습니다.

배지를 만들려면 action.setBadgeBackgroundColor() 및 action.setBadgeText()를 호출하여 프로그래매틱 방식으로 설정합니다. 매니페스트에 기본 배지 설정이 없습니다. 배지 색상 값은 배지의 RGBA 색상을 구성하는 0~255 사이의 4개 정수 배열이거나 CSS 색상 값이 포함된 문자열일 수 있습니다.

chrome.action.setBadgeBackgroundColor(
  {color: [0, 255, 0, 0]},  // Green
  () => { /* ... */ },
);

chrome.action.setBadgeBackgroundColor(
  {color: '#00FF00'},  // Also green
  () => { /* ... */ },
);

chrome.action.setBadgeBackgroundColor(
  {color: 'green'},  // Also, also green
  () => { /* ... */ },
);

사용자가 툴바에서 확장 프로그램의 작업 버튼을 클릭하면 작업 팝업이 표시됩니다. 팝업에는 원하는 HTML 콘텐츠를 포함할 수 있으며 콘텐츠에 맞게 자동으로 크기가 조절됩니다. 팝업 크기는 25x25~800x600픽셀이어야 합니다.

팝업은 처음에 manifest.json 파일의 "action" 키에 있는 "default_popup" 속성에 의해 설정됩니다. 이 속성이 있는 경우 확장 프로그램 디렉터리 내의 상대 경로를 가리켜야 합니다. action.setPopup() 메서드를 사용하여 다른 상대 경로를 가리키도록 동적으로 업데이트할 수도 있습니다.

참고: 확장 프로그램 작업에서 현재 탭을 클릭할 때 표시할 팝업을 지정한 경우 action.onClicked 이벤트가 전송되지 않습니다.

사용 사례

탭별 상태

확장 프로그램 작업은 탭마다 상태가 다를 수 있습니다. 개별 탭의 값을 설정하려면 action API의 설정 메서드에서 tabId 속성을 사용하세요. 예를 들어 특정 탭의 배지 텍스트를 설정하려면 다음과 같이 합니다.

function getTabId() { /* ... */}
function getTabBadge() { /* ... */}

chrome.action.setBadgeText(
  {
    text: getTabBadge(tabId),
    tabId: getTabId(),
  },
  () => { ... }
);

tabId 속성이 생략되면 설정이 전역 설정으로 간주됩니다. 탭별 설정이 전역 설정보다 우선 적용됩니다.

사용 설정된 상태

기본적으로 툴바 작업은 모든 탭에서 사용 설정되어 클릭할 수 있습니다. 매니페스트의 action 키에 default_state 속성을 설정하여 이 기본값을 변경할 수 있습니다. default_state가 "disabled"로 설정된 경우 작업은 기본적으로 사용 중지되며 클릭 가능하도록 프로그래매틱 방식으로 사용 설정해야 합니다. default_state가 "enabled" (기본값)로 설정된 경우 작업이 기본적으로 사용 설정되고 클릭할 수 있습니다.

action.enable() 및 action.disable() 메서드를 사용하여 프로그래매틱 방식으로 상태를 제어할 수 있습니다. 이는 팝업 (있는 경우) 또는 action.onClicked 이벤트가 확장 프로그램으로 전송되는지 여부에만 영향을 미치며 툴바에 작업이 표시되는지 여부에는 영향을 미치지 않습니다.

예

다음 예는 확장 프로그램에서 작업이 사용되는 몇 가지 일반적인 방법을 보여줍니다. 이 API를 사용해 보려면 chrome-extension-samples 저장소에서 Action API 예시를 설치합니다.

팝업 표시

사용자가 확장 프로그램의 작업을 클릭할 때 확장 프로그램에서 팝업을 표시하는 것이 일반적입니다. 자체 확장 프로그램에서 이를 구현하려면 manifest.json에서 팝업을 선언하고 Chrome에서 팝업에 표시할 콘텐츠를 지정합니다.

// manifest.json
{
  "name": "Action popup demo",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_title": "Click to view a popup",
    "default_popup": "popup.html"
  }
}

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <style>
    html {
      min-height: 5em;
      min-width: 10em;
      background: salmon;
    }
  </style>
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

클릭 시 콘텐츠 스크립트 삽입

확장 프로그램의 일반적인 패턴은 확장 프로그램의 작업을 사용하여 기본 기능을 노출하는 것입니다. 다음 예는 이 패턴을 보여줍니다. 사용자가 작업을 클릭하면 확장 프로그램이 현재 페이지에 콘텐츠 스크립트를 삽입합니다. 그러면 콘텐츠 스크립트가 모든 것이 예상대로 작동하는지 확인하는 알림을 표시합니다.

// manifest.json
{
  "name": "Action script injection demo",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_title": "Click to show an alert"
  },
  "permissions": ["activeTab", "scripting"],
  "background": {
    "service_worker": "background.js"
  }
}

// background.js
chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['content.js']
  });
});

// content.js
alert('Hello, world!');

declarativeContent로 작업 에뮬레이션

이 예에서는 확장 프로그램의 백그라운드 로직이 (a) 기본적으로 작업을 사용 중지하고 (b) declarativeContent를 사용하여 특정 사이트에서 작업을 사용 설정하는 방법을 보여줍니다.

// service-worker.js

// Wrap in an onInstalled callback to avoid unnecessary work
// every time the service worker is run
chrome.runtime.onInstalled.addListener(() => {
  // Page actions are disabled by default and enabled on select tabs
  chrome.action.disable();

  // Clear all rules to ensure only our expected rules are set
  chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
    // Declare a rule to enable the action on example.com pages
    let exampleRule = {
      conditions: [
        new chrome.declarativeContent.PageStateMatcher({
          pageUrl: {hostSuffix: '.example.com'},
        })
      ],
      actions: [new chrome.declarativeContent.ShowAction()],
    };

    // Finally, apply our new array of rules
    let rules = [exampleRule];
    chrome.declarativeContent.onPageChanged.addRules(rules);
  });
});

유형

OpenPopupOptions

Chrome 99 이상

속성

windowId

번호 선택사항

작업 팝업을 열 창의 ID입니다. 지정되지 않은 경우 기본값은 현재 활성 창입니다.

TabDetails

속성

tabId

번호 선택사항

상태를 쿼리할 탭의 ID입니다. 탭을 지정하지 않으면 탭이 아닌 상태가 반환됩니다.

UserSettings

Chrome 91 이상

확장 프로그램의 작업과 관련된 사용자 지정 설정 모음입니다.

속성

isOnToolbar

부울

브라우저 창의 최상위 툴바에 확장 프로그램의 작업 아이콘이 표시되는지 여부 (즉, 사용자가 확장 프로그램을 '고정'했는지 여부)입니다.

UserSettingsChange

Chrome 130 이상

속성

isOnToolbar

불리언 선택사항

브라우저 창의 최상위 툴바에 확장 프로그램의 작업 아이콘이 표시되는지 여부 (즉, 사용자가 확장 프로그램을 '고정'했는지 여부)입니다.

메서드

disable()

Promise

chrome.action.disable(
  tabId?: number,
  callback?: function,
)

탭의 작업을 사용 중지합니다.

매개변수

tabId

번호 선택사항

작업을 수정하려는 탭의 ID입니다.
콜백

함수 선택사항

callback 매개변수는 다음과 같습니다.
```
() => void
```

반환 값

Promise<void>

Promise는 매니페스트 V3 이상에서 지원되지만 이전 버전과의 호환성을 위해 콜백이 제공됩니다. 동일한 함수 호출에서 둘 다 사용할 수는 없습니다. 프로미스는 콜백에 전달된 것과 동일한 유형으로 확인됩니다.

enable()

Promise

chrome.action.enable(
  tabId?: number,
  callback?: function,
)

탭의 작업을 사용 설정합니다. 기본적으로 작업은 사용 설정되어 있습니다.

매개변수

tabId

번호 선택사항

작업을 수정하려는 탭의 ID입니다.
콜백

함수 선택사항

callback 매개변수는 다음과 같습니다.
```
() => void
```

반환 값

Promise<void>

Promise는 매니페스트 V3 이상에서 지원되지만 이전 버전과의 호환성을 위해 콜백이 제공됩니다. 동일한 함수 호출에서 둘 다 사용할 수는 없습니다. 프로미스는 콜백에 전달된 것과 동일한 유형으로 확인됩니다.

getBadgeBackgroundColor()

Promise

chrome.action.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
)

작업의 배경 색상을 가져옵니다.

매개변수

세부정보

TabDetails
콜백

함수 선택사항

callback 매개변수는 다음과 같습니다.
```
(result: ColorArray) => void
```
- 결과
  
  ColorArray

반환 값

Promise<browserAction.ColorArray>

Promise는 매니페스트 V3 이상에서 지원되지만 이전 버전과의 호환성을 위해 콜백이 제공됩니다. 동일한 함수 호출에서 둘 다 사용할 수는 없습니다. 프로미스는 콜백에 전달된 것과 동일한 유형으로 확인됩니다.

getBadgeText()

Promise

chrome.action.getBadgeText(
  details: TabDetails,
  callback?: function,
)

작업의 배지 텍스트를 가져옵니다. 탭을 지정하지 않으면 탭별이 아닌 배지 텍스트가 반환됩니다. displayActionCountAsBadgeText가 사용 설정된 경우 declarativeNetRequestFeedback 권한이 있거나 탭별 배지 텍스트가 제공되지 않는 한 자리표시자 텍스트가 반환됩니다.

매개변수

세부정보

TabDetails
콜백

함수 선택사항

callback 매개변수는 다음과 같습니다.
```
(result: string) => void
```
- 결과
  
  문자열

반환 값

Promise<string>

Promise는 매니페스트 V3 이상에서 지원되지만 이전 버전과의 호환성을 위해 콜백이 제공됩니다. 동일한 함수 호출에서 둘 다 사용할 수는 없습니다. 프로미스는 콜백에 전달된 것과 동일한 유형으로 확인됩니다.

getBadgeTextColor()

Promise Chrome 110 이상

chrome.action.getBadgeTextColor(
  details: TabDetails,
  callback?: function,
)

작업의 텍스트 색상을 가져옵니다.

매개변수

세부정보

TabDetails
콜백

함수 선택사항

callback 매개변수는 다음과 같습니다.
```
(result: ColorArray) => void
```
- 결과
  
  ColorArray

반환 값

Promise<browserAction.ColorArray>

Promise는 매니페스트 V3 이상에서 지원되지만 이전 버전과의 호환성을 위해 콜백이 제공됩니다. 동일한 함수 호출에서 둘 다 사용할 수는 없습니다. 프로미스는 콜백에 전달된 것과 동일한 유형으로 확인됩니다.

getPopup()

Promise

chrome.action.getPopup(
  details: TabDetails,
  callback?: function,
)

이 작업의 팝업으로 설정된 html 문서를 가져옵니다.

매개변수

세부정보

TabDetails
콜백

함수 선택사항

callback 매개변수는 다음과 같습니다.
```
(result: string) => void
```
- 결과
  
  문자열

반환 값

Promise<string>

Promise는 매니페스트 V3 이상에서 지원되지만 이전 버전과의 호환성을 위해 콜백이 제공됩니다. 동일한 함수 호출에서 둘 다 사용할 수는 없습니다. 프로미스는 콜백에 전달된 것과 동일한 유형으로 확인됩니다.

getTitle()

Promise

chrome.action.getTitle(
  details: TabDetails,
  callback?: function,
)

작업의 제목을 가져옵니다.

매개변수

세부정보

TabDetails
콜백

함수 선택사항

callback 매개변수는 다음과 같습니다.
```
(result: string) => void
```
- 결과
  
  문자열

반환 값

Promise<string>

Promise는 매니페스트 V3 이상에서 지원되지만 이전 버전과의 호환성을 위해 콜백이 제공됩니다. 동일한 함수 호출에서 둘 다 사용할 수는 없습니다. 프로미스는 콜백에 전달된 것과 동일한 유형으로 확인됩니다.

getUserSettings()

Promise Chrome 91 이상

chrome.action.getUserSettings(
  callback?: function,
)

확장 프로그램 작업과 관련하여 사용자가 지정한 설정을 반환합니다.

매개변수

콜백

함수 선택사항

callback 매개변수는 다음과 같습니다.
```
(userSettings: UserSettings) => void
```
- userSettings
  
  UserSettings

반환 값

Promise<UserSettings>

Promise는 매니페스트 V3 이상에서 지원되지만 이전 버전과의 호환성을 위해 콜백이 제공됩니다. 동일한 함수 호출에서 둘 다 사용할 수는 없습니다. 프로미스는 콜백에 전달된 것과 동일한 유형으로 확인됩니다.

isEnabled()

Promise Chrome 110 이상

chrome.action.isEnabled(
  tabId?: number,
  callback?: function,
)

탭에 확장 프로그램 작업이 사용 설정되어 있는지 (또는 tabId가 제공되지 않은 경우 전역적으로) 나타냅니다. declarativeContent만 사용하여 사용 설정된 작업은 항상 false를 반환합니다.

매개변수

tabId

번호 선택사항

사용 설정 상태를 확인하려는 탭의 ID입니다.
콜백

함수 선택사항

callback 매개변수는 다음과 같습니다.
```
(isEnabled: boolean) => void
```
- isEnabled
  
  부울
  
  확장 프로그램 작업이 사용 설정되어 있으면 true입니다.

반환 값

Promise<boolean>

Promise는 매니페스트 V3 이상에서 지원되지만 이전 버전과의 호환성을 위해 콜백이 제공됩니다. 동일한 함수 호출에서 둘 다 사용할 수는 없습니다. 프로미스는 콜백에 전달된 것과 동일한 유형으로 확인됩니다.

openPopup()

Promise Chrome 127 이상

chrome.action.openPopup(
  options?: OpenPopupOptions,
  callback?: function,
)

확장 프로그램의 팝업을 엽니다. Chrome 118과 Chrome 126 사이에서는 정책 설치 확장 프로그램에서만 사용할 수 있습니다.

매개변수

옵션

OpenPopupOptions 선택사항

팝업을 여는 옵션을 지정합니다.
콜백

함수 선택사항

callback 매개변수는 다음과 같습니다.
```
() => void
```

반환 값

Promise<void>

Promise는 매니페스트 V3 이상에서 지원되지만 이전 버전과의 호환성을 위해 콜백이 제공됩니다. 동일한 함수 호출에서 둘 다 사용할 수는 없습니다. 프로미스는 콜백에 전달된 것과 동일한 유형으로 확인됩니다.

setBadgeBackgroundColor()

Promise

chrome.action.setBadgeBackgroundColor(
  details: object,
  callback?: function,
)

배지의 배경 색상을 설정합니다.

매개변수

세부정보

객체
- 색상
  
  문자열 | ColorArray
  
  배지는 4개의 정수 배열로, [0, 255] 범위의 정수 배열로 배지의 RGBA 색상을 구성합니다. 예를 들어 불투명한 빨간색은 [255, 0, 0, 255]입니다. CSS 값이 있는 문자열일 수도 있으며 불투명한 빨간색은 #FF0000 또는 #F00입니다.
- tabId
  
  번호 선택사항
  
  특정 탭이 선택된 경우에만 변경사항을 제한합니다. 탭을 닫으면 자동으로 재설정됩니다.
콜백

함수 선택사항

callback 매개변수는 다음과 같습니다.
```
() => void
```

반환 값

Promise<void>

Promise는 매니페스트 V3 이상에서 지원되지만 이전 버전과의 호환성을 위해 콜백이 제공됩니다. 동일한 함수 호출에서 둘 다 사용할 수는 없습니다. 프로미스는 콜백에 전달된 것과 동일한 유형으로 확인됩니다.

setBadgeText()

Promise

chrome.action.setBadgeText(
  details: object,
  callback?: function,
)

작업의 배지 텍스트를 설정합니다. 배지는 아이콘 위에 표시됩니다.

매개변수

세부정보

객체
- tabId
  
  번호 선택사항
  
  특정 탭이 선택된 경우에만 변경사항을 제한합니다. 탭을 닫으면 자동으로 재설정됩니다.
- 텍스트
  
  문자열 선택사항
  
  문자 수는 얼마든지 전달할 수 있지만 공간에 들어갈 수 있는 문자는 약 4개 정도입니다. 빈 문자열 ('')이 전달되면 배지 텍스트가 지워집니다. tabId이 지정되고 text이 null이면 지정된 탭의 텍스트가 지워지고 전역 배지 텍스트로 기본 설정됩니다.
콜백

함수 선택사항

callback 매개변수는 다음과 같습니다.
```
() => void
```

반환 값

Promise<void>

Promise는 매니페스트 V3 이상에서 지원되지만 이전 버전과의 호환성을 위해 콜백이 제공됩니다. 동일한 함수 호출에서 둘 다 사용할 수는 없습니다. 프로미스는 콜백에 전달된 것과 동일한 유형으로 확인됩니다.

setBadgeTextColor()

Promise Chrome 110 이상

chrome.action.setBadgeTextColor(
  details: object,
  callback?: function,
)

배지의 텍스트 색상을 설정합니다.

매개변수

세부정보

객체
- 색상
  
  문자열 | ColorArray
  
  배지는 4개의 정수 배열로, [0, 255] 범위의 정수 배열로 배지의 RGBA 색상을 구성합니다. 예를 들어 불투명한 빨간색은 [255, 0, 0, 255]입니다. CSS 값이 있는 문자열일 수도 있으며 불투명한 빨간색은 #FF0000 또는 #F00입니다. 이 값을 설정하지 않으면 텍스트가 표시되도록 배지의 배경 색상과 대비되는 색상이 자동으로 선택됩니다. 알파 값이 0과 같은 색상은 설정되지 않으며 오류를 반환합니다.
- tabId
  
  번호 선택사항
  
  특정 탭이 선택된 경우에만 변경사항을 제한합니다. 탭을 닫으면 자동으로 재설정됩니다.
콜백

함수 선택사항

callback 매개변수는 다음과 같습니다.
```
() => void
```

반환 값

Promise<void>

Promise는 매니페스트 V3 이상에서 지원되지만 이전 버전과의 호환성을 위해 콜백이 제공됩니다. 동일한 함수 호출에서 둘 다 사용할 수는 없습니다. 프로미스는 콜백에 전달된 것과 동일한 유형으로 확인됩니다.

setIcon()

Promise

chrome.action.setIcon(
  details: object,
  callback?: function,
)

작업의 아이콘을 설정합니다. 아이콘은 이미지 파일의 경로 또는 캔버스 요소의 픽셀 데이터로 지정할 수 있으며, 둘 중 하나의 사전으로 지정할 수도 있습니다. path 또는 imageData 속성을 지정해야 합니다.

매개변수

세부정보

객체
- imageData
  
  ImageData | 객체 선택사항
  
  설정할 아이콘을 나타내는 ImageData 객체 또는 사전 {size -> ImageData}입니다. 아이콘이 사전으로 지정된 경우 사용될 실제 이미지는 화면의 픽셀 밀도에 따라 선택됩니다. 하나의 화면 공간 단위에 맞는 이미지 픽셀 수가 scale이면 크기가 scale * n인 이미지가 선택됩니다. 여기서 n은 UI의 아이콘 크기입니다. 이미지를 하나 이상 지정해야 합니다. 'details.imageData = foo'는 'details.imageData = {'16': foo}'와 같습니다.
- 경로
  
  문자열 | 객체 선택사항
  
  설정할 아이콘을 가리키는 상대 이미지 경로 또는 사전({size -> relative image path})입니다. 아이콘이 사전으로 지정된 경우 사용될 실제 이미지는 화면의 픽셀 밀도에 따라 선택됩니다. 하나의 화면 공간 단위에 맞는 이미지 픽셀 수가 scale이면 크기가 scale * n인 이미지가 선택됩니다. 여기서 n은 UI의 아이콘 크기입니다. 이미지를 하나 이상 지정해야 합니다. 'details.path = foo'는 'details.path = {'16': foo}'와 같습니다.
- tabId
  
  번호 선택사항
  
  특정 탭이 선택된 경우에만 변경사항을 제한합니다. 탭을 닫으면 자동으로 재설정됩니다.
콜백

함수 선택사항

callback 매개변수는 다음과 같습니다.
```
() => void
```

반환 값

Promise<void>

Chrome 96 이상

Promise는 매니페스트 V3 이상에서 지원되지만 이전 버전과의 호환성을 위해 콜백이 제공됩니다. 동일한 함수 호출에서 둘 다 사용할 수는 없습니다. 프로미스는 콜백에 전달된 것과 동일한 유형으로 확인됩니다.

setPopup()

Promise

chrome.action.setPopup(
  details: object,
  callback?: function,
)

사용자가 작업 아이콘을 클릭할 때 팝업으로 열리도록 HTML 문서를 설정합니다.

매개변수

세부정보

객체
- 팝업
  
  문자열
  
  팝업에 표시할 HTML 파일의 상대 경로입니다. 빈 문자열 ('')로 설정하면 팝업이 표시되지 않습니다.
- tabId
  
  번호 선택사항
  
  특정 탭이 선택된 경우에만 변경사항을 제한합니다. 탭을 닫으면 자동으로 재설정됩니다.
콜백

함수 선택사항

callback 매개변수는 다음과 같습니다.
```
() => void
```

반환 값

Promise<void>

Promise는 매니페스트 V3 이상에서 지원되지만 이전 버전과의 호환성을 위해 콜백이 제공됩니다. 동일한 함수 호출에서 둘 다 사용할 수는 없습니다. 프로미스는 콜백에 전달된 것과 동일한 유형으로 확인됩니다.

setTitle()

Promise

chrome.action.setTitle(
  details: object,
  callback?: function,
)

작업의 제목을 설정합니다. 이 값은 도움말에 표시됩니다.

매개변수

세부정보

객체
- tabId
  
  번호 선택사항
  
  특정 탭이 선택된 경우에만 변경사항을 제한합니다. 탭을 닫으면 자동으로 재설정됩니다.
- 제목
  
  문자열
  
  마우스를 가져갈 때 작업이 표시해야 하는 문자열입니다.
콜백

함수 선택사항

callback 매개변수는 다음과 같습니다.
```
() => void
```

반환 값

Promise<void>

Promise는 매니페스트 V3 이상에서 지원되지만 이전 버전과의 호환성을 위해 콜백이 제공됩니다. 동일한 함수 호출에서 둘 다 사용할 수는 없습니다. 프로미스는 콜백에 전달된 것과 동일한 유형으로 확인됩니다.

이벤트

onClicked

chrome.action.onClicked.addListener(
  callback: function,
)

작업 아이콘을 클릭하면 실행됩니다. 작업에 팝업이 있는 경우 이 이벤트는 실행되지 않습니다.

매개변수

콜백

함수

callback 매개변수는 다음과 같습니다.
```
(tab: tabs.Tab) => void
```
- 탭
  
  tabs.Tab

onUserSettingsChanged

Chrome 130 이상

chrome.action.onUserSettingsChanged.addListener(
  callback: function,
)

확장 프로그램의 작업과 관련된 사용자가 지정한 설정이 변경될 때 실행됩니다.

매개변수

콜백

함수

callback 매개변수는 다음과 같습니다.
```
(change: UserSettingsChange) => void
```
- 변경
  
  UserSettingsChange

chrome.action

설명

가용성

매니페스트

개념 및 사용

UI의 일부

아이콘

도움말 (제목)

배지

팝업

사용 사례

탭별 상태

사용 설정된 상태

예

팝업 표시

클릭 시 콘텐츠 스크립트 삽입

declarativeContent로 작업 에뮬레이션

유형

OpenPopupOptions

속성

TabDetails

속성

UserSettings

속성

UserSettingsChange

속성

메서드

disable()

매개변수

반환 값

enable()

매개변수

반환 값

getBadgeBackgroundColor()

매개변수

반환 값

getBadgeText()

매개변수

반환 값

getBadgeTextColor()

매개변수

반환 값

getPopup()

매개변수

반환 값

getTitle()

매개변수

반환 값

getUserSettings()

매개변수

반환 값

isEnabled()

매개변수

반환 값

openPopup()

매개변수

반환 값

setBadgeBackgroundColor()

매개변수

반환 값

setBadgeText()

매개변수

반환 값

setBadgeTextColor()

매개변수

반환 값

setIcon()

매개변수

반환 값

setPopup()

매개변수

반환 값

setTitle()

매개변수

반환 값

이벤트

onClicked

매개변수

onUserSettingsChanged

매개변수