컨텍스트 메뉴 빌드

마우스의 대체 클릭 (마우스 오른쪽 클릭이라고도 함)에 대해 컨텍스트 메뉴가 표시됩니다. 컨텍스트 메뉴를 빌드하려면 먼저 manifest.json 파일에 "contextMenus" 권한을 추가합니다.

manifest.json:

  "permissions": [
    "contextMenus"
  ],

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

</ph>

이 예의 나머지 부분은 여러 컨텍스트 메뉴 옵션을 제공하는 전체 Google 검색 컨텍스트 메뉴 샘플에서 발췌한 것입니다. 확장 프로그램에 둘 이상의 컨텍스트 메뉴가 포함된 경우 Chrome은 다음과 같이 자동으로 하나의 상위 메뉴로 축소합니다.

</ph>

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

service-worker.js:

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

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