컨텍스트 메뉴 빌드

마우스의 대체 클릭 (흔히 마우스 오른쪽 버튼 클릭이라고 함)에 대한 컨텍스트 메뉴가 표시됩니다. 이 페이지에서는 컨텍스트 메뉴를 구현하는 방법을 설명합니다. 관련 API 구성원의 전체 목록은 browser.contextMenu를 참고하세요.

컨텍스트 메뉴를 빌드하려면 먼저 manifest.json 파일에 "contextMenus" 권한을 추가합니다.

manifest.json:

  "permissions": [
    "contextMenus"
  ],

원하는 경우 "icons" 키를 사용하여 메뉴 항목 옆에 아이콘을 표시할 수 있습니다. 이 예에서 '글로벌 Google 검색' 확장 프로그램의 메뉴 항목은 16x16 아이콘을 사용합니다.

이 예의 나머지 부분은 여러 컨텍스트 메뉴 옵션을 제공하는 전역 Google 검색 컨텍스트 메뉴 샘플에서 가져왔습니다. 확장 프로그램에 컨텍스트 메뉴가 두 개 이상 포함된 경우 Chrome은 다음과 같이 자동으로 단일 상위 메뉴로 축소합니다.

샘플에서는 확장 프로그램 서비스 워커에서 contextMenus.create()를 호출하여 이를 보여줍니다. 하위 메뉴 항목은 locales.js 파일에서 가져옵니다. 그런 다음 runtime.onInstalled가 이를 반복합니다.

service-worker.js:

const tldLocales = {
  'com.au': 'Australia',
  'com.br': 'Brazil',
  ...
}

browser.runtime.onInstalled.addListener(async () => {
  for (let [tld, locale] of Object.entries(tldLocales)) {
    browser.contextMenus.create({
      id: tld,
      title: locale,
      type: 'normal',
      contexts: ['selection'],
    });
  }
});