컨텍스트 메뉴 빌드

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

manifest.json:

  "permissions": [
    "contextMenus"
  ],

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

16x16 아이콘이 있는 컨텍스트 메뉴 항목

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

그림 4: 컨텍스트 메뉴와 중첩된 하위 메뉴

이 샘플에서는 확장 프로그램 서비스 워커에서 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'],
    });
  }
});