이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

브라우저의 메뉴 시스템에 항목을 추가한다.

이 API는 크롬의 "contextMenus" API를 모델로 했다. 크롬 확장앱이 브라우저의 콘텍스트 메뉴에 항목을 추가하는 API인데, 파이어폭스의 browser.menus API는 여기에 몇 가지 특징을 더했다.

파이어폭스 55 이전에 이 API의 원래 이름은 contextMenus였고, 지금도 이 이름은 별명으로 유지되므로 다른 브라우저에서도 동작하는 코드를 작성한다면 contextMenus를 사용할 수 있다.

이 API를 사용하려면 'menus권한이 필요하다. menus 대신에 contextMenus를 사용해도 된다. contextMenus를 사용했으면 API도 browser.contextMenus를 써야 한다.

콘텐트 스크립트에서는 menus.getTargetElement()만 사용할 수 있다.

메뉴 항목 만들기

메뉴 항목을 만들려면 contextMenus.create() 메소드를 호출한다. 인수로 항목의 ID, 종류, 어떤 콘텍스트일 때 표시되는지 등이 포함된 객체를 전달한다.

항목의 클릭을 처리하려면 contextMenus.onClicked 이벤트에 리스너를 추가한다. 리스너는 상세한 이벤트 정보를 담고 있는contextMenus.OnClickData 객체를 받는다.

콘텍스트 메뉴는 네 종류다. create()에 주어지는 type 속성으로 지정한다:

  • "normal": 그냥 라벨만 표시된다.
  • "checkbox": 라벨 옆에 추가로 체크표시가 있어 두가지 상태를 표현하는 메뉴 항목이다. 클릭할 때마다 라벨표시가 토글된다. 리스너는 두가지 속성을 추가로 받게 된다: "checked"는 현재 체크 상태를 가리키고, "wasChecked"는 클릭 이벤트 전의 체크 상태를 가리킨다.
  • "radio": 여러 선택지 중의 하나라는 것을 표현하는 메뉴 항목이다. 라벨 옆에 체크표시가 있고, "checked"와 "wasChecked" 속성이 있다는 것은 checkbox와 같다. 다른 점은 radio 항목을 하나 이상 만들어 그룹이 되면, 오직 클릭하는 하나만 선택이 된다는 것이다.
  • "separator": 항목을 그룹짓는 구분선이다.

메뉴 항목을 하나 이상 만들면 그 항목들은 서버메뉴로 표시되고, 상위메뉴의 라벨은 확장의 이름이 된다. 예를 들어, "Menu demo"라는 확장이 있고, 그것이 두 개의 콘텍스트 메뉴 항목을 추가했다면:

아이콘

"icons" manifest 키로 확장이 아이콘을 가졌으면,  콘텍스트 메뉴 항목은 라벨 옆에 아이콘을 함께 표시한다. 보통의 경우 16x16 픽셀이 표시되고, 고해상도이면 32x32 픽셀의 아이콘이 표시된다.

서버메뉴에 대해서만 menus.create()icons 옵션을 전달해서 아이콘을 지정할 수 있다.

예제

아래 콘텍스트 메뉴에는 4개 항목이 있다: 보통 항목 하나, 위-아래가 구분선인 두 개의 라디오 항목, 그리고 체크박스 항목 하나다. 라디오 항목에는 따로 아이콘이 지정되었다.

이 서버메뉴는 아래 코드로 만들 수 있다:

browser.menus.create({
  id: "remove-me",
  title: browser.i18n.getMessage("menuItemRemoveMe"),
  contexts: ["all"]
}, onCreated);

browser.menus.create({
  id: "separator-1",
  type: "separator",
  contexts: ["all"]
}, onCreated);

browser.menus.create({
  id: "greenify",
  type: "radio",
  title: browser.i18n.getMessage("menuItemGreenify"),
  contexts: ["all"],
  checked: true,
  icons: {
    "16": "icons/paint-green-16.png",
    "32": "icons/paint-green-32.png"
  }
}, onCreated);

browser.menus.create({
  id: "bluify",
  type: "radio",
  title: browser.i18n.getMessage("menuItemBluify"),
  contexts: ["all"],
  checked: false,
  icons: {
    "16": "icons/paint-blue-16.png",
    "32": "icons/paint-blue-32.png"
  }
}, onCreated);

browser.menus.create({
  id: "separator-2",
  type: "separator",
  contexts: ["all"]
}, onCreated);

var checkedState = true;

browser.menus.create({
  id: "check-uncheck",
  type: "checkbox",
  title: browser.i18n.getMessage("menuItemUncheckMe"),
  contexts: ["all"],
  checked: checkedState
}, onCreated);

타입

contextMenus.ContextType
메뉴가 표시되게 하는 여러 콘텍스트. 가능한 값은: "all", "audio", "browser_action", "editable", "frame", "image", "link", "page", "page_action", "password", "selection", "tab", "video".
contextMenus.ItemType
메뉴 항목의 종류: "normal", "checkbox", "radio", "separator".
contextMenus.OnClickData
메뉴 항목이 클릭됐을 때 보내지는 정보.

속성

contextMenus.ACTION_MENU_TOP_LEVEL_LIMIT
최상위에 추가할 수 있는 ContextType이 "browser_action"이나 "page_action"인 메뉴 항목의 최대 수량.

함수

contextMenus.create()
새 콘텍스트 메뉴 항목을 만든다.
contextMenus.update()
전에 만든 콘텍스트 메뉴 항목을 갱신한다.
contextMenus.remove()
콘텍스트 메뉴 항목을 지운다.
contextMenus.removeAll()
확자앱에 추가된 모든 콘텍스트 메뉴 항목을 지운다.

이벤트

contextMenus.onClicked
콘텍스트 메뉴 항목이 클릭하면 발생한다.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxOperaFirefox for Android
ACTION_MENU_TOP_LEVEL_LIMITChrome Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ACTION_MENU_TOP_LEVEL_LIMIT
Edge Full support 14
Alternate Name
Full support 14
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ACTION_MENU_TOP_LEVEL_LIMIT
Firefox Full support 55
Full support 55
Full support 48
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ACTION_MENU_TOP_LEVEL_LIMIT
Opera Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ACTION_MENU_TOP_LEVEL_LIMIT
Firefox Android No support No
ContextTypeChrome Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ContextType
Edge Full support 14
Alternate Name
Full support 14
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ContextType
Firefox Full support 55
Notes
Full support 55
Notes
Notes 'The 'editable' context does not include password fields. Use the 'password' context for this.
Full support 48
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ContextType
Opera Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ContextType
Firefox Android No support No
ItemTypeChrome Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ItemType
Edge Full support 14
Alternate Name
Full support 14
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ItemType
Firefox Full support 55
Full support 55
Full support 48
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ItemType
Opera Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ItemType
Firefox Android No support No
OnClickDataChrome Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.OnClickData
Edge Full support 14
Alternate Name
Full support 14
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.OnClickData
Firefox Full support 55
Full support 55
Full support 48
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.OnClickData
Opera Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.OnClickData
Firefox Android No support No
createChrome Full support Yes
Notes Alternate Name
Full support Yes
Notes Alternate Name
Notes Items that don't specify 'contexts' do not inherit contexts from their parents.
Alternate Name Uses the non-standard name: contextMenus.create
Edge Full support 14
Notes Alternate Name
Full support 14
Notes Alternate Name
Notes Items that don't specify 'contexts' do not inherit contexts from their parents.
Alternate Name Uses the non-standard name: contextMenus.create
Firefox Full support 55
Full support 55
Full support 48
Notes Alternate Name
Notes Before version 53, items that don't specify 'contexts' do not inherit contexts from their parents.
Alternate Name Uses the non-standard name: contextMenus.create
Opera Full support Yes
Notes Alternate Name
Full support Yes
Notes Alternate Name
Notes Items that don't specify 'contexts' do not inherit contexts from their parents.
Alternate Name Uses the non-standard name: contextMenus.create
Firefox Android No support No
getTargetElementChrome No support NoEdge No support NoFirefox Full support 63Opera No support NoFirefox Android No support No
onClickedChrome Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.onClicked
Edge Full support 14
Alternate Name
Full support 14
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.onClicked
Firefox Full support 55
Full support 55
Full support 48
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.onClicked
Opera Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.onClicked
Firefox Android No support No
onHiddenChrome No support NoEdge No support NoFirefox Full support 60
Full support 60
Full support 60
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.onHidden
Opera No support NoFirefox Android No support No
onShownChrome No support NoEdge No support NoFirefox Full support 60
Full support 60
Full support 60
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.onShown
Opera No support NoFirefox Android No support No
refreshChrome No support NoEdge No support NoFirefox Full support 60
Full support 60
Full support 60
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.refresh
Opera No support NoFirefox Android No support No
removeChrome Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.remove
Edge Full support 14
Alternate Name
Full support 14
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.remove
Firefox Full support 55
Full support 55
Full support 48
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.remove
Opera Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.remove
Firefox Android No support No
removeAllChrome Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.removeAll
Edge Full support 14
Alternate Name
Full support 14
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.removeAll
Firefox Full support 55
Full support 55
Full support 48
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.removeAll
Opera Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.removeAll
Firefox Android No support No
updateChrome Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.update
Edge Full support 14
Alternate Name
Full support 14
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.update
Firefox Full support 55
Full support 55
Full support 48
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.update
Opera Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.update
Firefox Android No support No

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

Example extensions

Acknowledgements

This API is based on Chromium's chrome.contextMenus API. This documentation is derived from context_menus.json in the Chromium code.

문서 태그 및 공헌자

이 페이지의 공헌자: mdnwebdocs-bot, grizlupo, wbamberg, hoony
최종 변경자: mdnwebdocs-bot,