chrome.pageAction

설명

chrome.pageAction API를 사용하여 주소 표시줄 오른쪽에 있는 기본 Chrome 툴바에 아이콘을 추가합니다. 페이지 작업은 현재 페이지에서 수행할 수 있지만 모든 페이지에 적용되는 것은 아닌 작업을 나타냅니다. 비활성 상태에서 페이지 작업이 회색으로 표시됩니다.

가용성

<ph type="x-smartling-placeholder"></ph> &amp;leq; MV2

예를 들면 다음과 같습니다.

  • 이 페이지의 RSS 피드 구독
  • 이 페이지의 사진으로 슬라이드쇼 만들기

다음 스크린샷의 RSS 아이콘은 RSS를 구독할 수 있는 페이지 작업을 나타냅니다. 피드할 수 있습니다.

숨겨진 페이지 작업은 회색으로 표시됩니다. 예를 들어 아래의 RSS 피드는 현재 페이지의 피드를 구독합니다.

사용자가 항상 브라우저와 상호작용할 수 있도록 브라우저 작업을 대신 사용해 보세요. 확장자가 포함됩니다.

매니페스트

다음과 같이 확장 프로그램 매니페스트에 페이지 작업을 등록합니다.

{
  "name": "My extension",
  ...
  "page_action": {
    "default_icon": {                    // optional
      "16": "images/icon16.png",           // optional
      "24": "images/icon24.png",           // optional
      "32": "images/icon32.png"            // optional
    },
    "default_title": "Google Mail",      // optional; shown in tooltip
    "default_popup": "popup.html"        // optional
  },
  ...
}

1.5x 또는 1.2x와 같이 덜 일반적인 배율을 사용하는 기기가 점점 더 보편화되고 있으므로 아이콘에 여러 크기를 제공하는 것이 좋습니다. Chrome이 가장 가까운 값을 선택하고 확장합니다. 16 딥 공간을 채울 수 있습니다. 이렇게 하면 아이콘 표시 크기가 변경되어도 다른 아이콘을 제공하기 위해 더 많은 작업을 해야 합니다. 그러나 크기 차이가 너무 크면 이 배율로 인해 아이콘이 디테일을 잃거나 흐릿하게 보일 수 있습니다.

기본 아이콘을 등록하는 이전 구문이 계속 지원됩니다.

{
  "name": "My extension",
  ...
  "page_action": {
    ...
    "default_icon": "images/icon32.png"  // optional
    // equivalent to "default_icon": { "32": "images/icon32.png" }
  },
  ...
}

UI 요소

브라우저 작업과 마찬가지로 페이지 작업에는 아이콘, 도움말, 팝업이 포함될 수 있습니다. 배지를 가질 수 없으며, 있습니다. 또한 페이지 작업이 비활성화될 수도 있습니다. 아이콘, 이미지, 오디오, 동영상 등의 도움말 및 팝업을 브라우저 작업 UI에 제공합니다.

pageAction.show pageAction.hide 메서드를 사용합니다. 기본적으로 페이지 작업은 회색으로 표시됩니다. 아이콘을 표시할 탭을 지정합니다. 아이콘은 탭 다른 URL을 표시하기 시작하는 경우 (예: 사용자가 링크를 클릭)

팁

최상의 시각적 효과를 위해 다음 가이드라인을 따르세요.

  • 페이지 작업은 일부 페이지에만 적합한 기능에 사용하세요.
  • 대부분의 페이지에 적합한 기능에 페이지 작업을 사용하지 마세요. 브라우저 작업 사용 하세요.
  • 아이콘에 계속해서 애니메이션을 적용하지 마세요. 짜증 나.

유형

ImageDataType

이미지의 픽셀 데이터입니다. ImageData 객체여야 합니다 (예: canvas 요소의).

유형

ImageData

TabDetails

Chrome 88 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.

속성

  • tabId

    숫자 선택사항

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

메서드

getPopup()

<ph type="x-smartling-placeholder"></ph> 프로미스 를 통해 개인정보처리방침을 정의할 수 있습니다.
chrome.pageAction.getPopup(
  details: TabDetails,
  callback?: function,
)

이 페이지 작업에 대한 팝업으로 설정된 HTML 문서를 가져옵니다.

매개변수

  • 세부정보

    TabDetails

  • 콜백

    함수 선택사항

    callback 매개변수는 다음과 같습니다. 

    (result: string) => void

    • 결과

      문자열

반환 값

  • 프로미스<string>

    Chrome 101 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.

    프로미스는 Manifest V3 이상에서만 지원되며 다른 플랫폼에서는 콜백을 사용해야 합니다.

getTitle()

<ph type="x-smartling-placeholder"></ph> 프로미스 를 통해 개인정보처리방침을 정의할 수 있습니다.
chrome.pageAction.getTitle(
  details: TabDetails,
  callback?: function,
)

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

매개변수

  • 세부정보

    TabDetails

  • 콜백

    함수 선택사항

    callback 매개변수는 다음과 같습니다. 

    (result: string) => void

    • 결과

      문자열

반환 값

  • 프로미스<string>

    Chrome 101 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.

    프로미스는 Manifest V3 이상에서만 지원되며 다른 플랫폼에서는 콜백을 사용해야 합니다.

hide()

<ph type="x-smartling-placeholder"></ph> 프로미스 를 통해 개인정보처리방침을 정의할 수 있습니다.
chrome.pageAction.hide(
  tabId: number,
  callback?: function,
)

페이지 작업을 숨깁니다. 숨겨진 페이지 작업은 Chrome 툴바에 계속 표시되기는 하지만 회색으로 표시됩니다.

매개변수

  • tabId

    숫자

    페이지 작업을 수정하려는 탭의 ID입니다.

  • 콜백

    함수 선택사항

    Chrome 67 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.

    callback 매개변수는 다음과 같습니다. 

    () => void

반환 값

  • 프로미스<void>

    Chrome 101 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.

    프로미스는 Manifest V3 이상에서만 지원되며 다른 플랫폼에서는 콜백을 사용해야 합니다.

setIcon()

<ph type="x-smartling-placeholder"></ph> 프로미스 를 통해 개인정보처리방침을 정의할 수 있습니다.
chrome.pageAction.setIcon(
  details: object,
  callback?: function,
)

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

매개변수

  • 세부정보

    객체

    • iconIndex

      숫자 선택사항

      지원 중단되었습니다. 이 인수는 무시됩니다.

    • imageData

      ImageData | 객체(선택사항)

      ImageData 객체 또는 사전 {size -> ImageData}는 설정할 아이콘을 나타냅니다. 아이콘이 사전으로 지정된 경우 사용할 실제 이미지는 화면의 픽셀 밀도에 따라 선택됩니다. 한 화면 공간 단위에 맞는 이미지 픽셀 수가 scale와 같으면 크기가 scale * n인 이미지가 선택됩니다. 여기서 n은 UI의 아이콘 크기입니다. 이미지를 하나 이상 지정해야 합니다. 'details.imageData = foo'는 'details.imageData = {'16': foo}'와 동일합니다.

    • 경로

      string | 객체(선택사항)

      상대 이미지 경로 또는 사전 {size -> 상대 이미지 경로}이(가) 설정할 아이콘을 가리킵니다. 아이콘이 사전으로 지정된 경우 사용할 실제 이미지는 화면의 픽셀 밀도에 따라 선택됩니다. 한 화면 공간 단위에 맞는 이미지 픽셀 수가 scale와 같으면 크기가 scale * n인 이미지가 선택됩니다. 여기서 n은 UI의 아이콘 크기입니다. 이미지를 하나 이상 지정해야 합니다. 'details.path = foo' 'details.path = {'16': foo}'와 동일합니다.

    • tabId

      숫자

      페이지 작업을 수정하려는 탭의 ID입니다.

  • 콜백

    함수 선택사항

    callback 매개변수는 다음과 같습니다. 

    () => void

반환 값

  • 프로미스<void>

    Chrome 101 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.

    프로미스는 Manifest V3 이상에서만 지원되며 다른 플랫폼에서는 콜백을 사용해야 합니다.

setPopup()

<ph type="x-smartling-placeholder"></ph> 프로미스 를 통해 개인정보처리방침을 정의할 수 있습니다.
chrome.pageAction.setPopup(
  details: object,
  callback?: function,
)

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

매개변수

  • 세부정보

    객체

    • 팝업

      문자열

      팝업에 표시할 HTML 파일의 상대 경로입니다. 빈 문자열 ('')로 설정하면 팝업이 표시되지 않습니다.

    • tabId

      숫자

      페이지 작업을 수정하려는 탭의 ID입니다.

  • 콜백

    함수 선택사항

    Chrome 67 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.

    callback 매개변수는 다음과 같습니다. 

    () => void

반환 값

  • 프로미스<void>

    Chrome 101 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.

    프로미스는 Manifest V3 이상에서만 지원되며 다른 플랫폼에서는 콜백을 사용해야 합니다.

setTitle()

<ph type="x-smartling-placeholder"></ph> 프로미스 를 통해 개인정보처리방침을 정의할 수 있습니다.
chrome.pageAction.setTitle(
  details: object,
  callback?: function,
)

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

매개변수

  • 세부정보

    객체

    • tabId

      숫자

      페이지 작업을 수정하려는 탭의 ID입니다.

    • 제목

      문자열

      도움말 문자열입니다.

  • 콜백

    함수 선택사항

    Chrome 67 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.

    callback 매개변수는 다음과 같습니다. 

    () => void

반환 값

  • 프로미스<void>

    Chrome 101 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.

    프로미스는 Manifest V3 이상에서만 지원되며 다른 플랫폼에서는 콜백을 사용해야 합니다.

show()

<ph type="x-smartling-placeholder"></ph> 프로미스 를 통해 개인정보처리방침을 정의할 수 있습니다.
chrome.pageAction.show(
  tabId: number,
  callback?: function,
)

페이지 작업을 표시합니다. 탭을 선택할 때마다 페이지 작업이 표시됩니다.

매개변수

  • tabId

    숫자

    페이지 작업을 수정하려는 탭의 ID입니다.

  • 콜백

    함수 선택사항

    Chrome 67 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.

    callback 매개변수는 다음과 같습니다. 

    () => void

반환 값

  • 프로미스<void>

    Chrome 101 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.

    프로미스는 Manifest V3 이상에서만 지원되며 다른 플랫폼에서는 콜백을 사용해야 합니다.

이벤트

onClicked

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

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

매개변수

  • 콜백

    함수

    callback 매개변수는 다음과 같습니다. 

    (tab: tabs.Tab) => void