컨텍스트 메뉴 빌드

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

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',
  ...
}

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