Javascript：将项目添加到上下文菜单

Question

当单击特定的 HTML 元素时，我希望在上下文菜单中显示一个自定义元素，单击该元素会调用 Javascript 函数。

// The element to whose context menu the item should be added.

const element = document.getElementById('example');

// The menu item that should be added.

const menuItem = document.getElementById('menuItem');

element.addEventListener('contextmenu', e => {

   //e.menuItems.add(menuItem); // How to get it into the menu?

});

#example{border:thin solid;padding:1em;}

<p id="example">

I want to add an item to the context menu

hat opens on this paragraph.

</p>

<!--

   the element below is supposed to show

   in the context menu instead of inline.

-->

<span

   onclick="javascript:alert('the menu item has been clicked')"

   id="menuItem">

   Click me!

</span>

Answer 1

您无法添加到“真实”菜单，但您可以伪造它并且无需禁用常规菜单。监听上下文菜单事件，在合理的位置显示一个按钮，只要上下文菜单被触发，它就会出现。我把它放在左边，但你可以尝试一下。然后，您只需在单击或模糊时将其隐藏即可。// The element to whose context menu the item should be added.const element = document.getElementById('example');// The menu item that should be added.const menuItem = document.getElementById('menuItem');// ...so listen for the contextmenu event on this elementelement.addEventListener('contextmenu', e => {&nbsp; &nbsp; //e.menuItems.add(menuItem); // How to get it into the menu?&nbsp; &nbsp; menuItem.style.left = (e.clientX - menuItem.getBoundingClientRect().width) + "px";&nbsp; &nbsp; menuItem.style.top = (e.clientY - menuItem.getBoundingClientRect().height) + "px";&nbsp; &nbsp; menuItem.style.visibility = 'visible';&nbsp; &nbsp; menuItem.focus();});// ...do this when you click the button:menuItem.addEventListener('mousedown', e => {&nbsp; &nbsp; menuItem.style.visibility = 'hidden'&nbsp; &nbsp; menuItem.blur();&nbsp; &nbsp; alert('the menu item has been clicked');});// ...hide the button onblurmenuItem.addEventListener('blur', e => {menuItem.style.visibility = 'hidden';});&nbsp; &nbsp;&nbsp;#example{border:thin solid;padding:1em;}#menuItem{visibility:hidden;position:absolute;width:80px;height:35px;outline: none;box-shadow: none;}<p id="example">I want to add an item to the context menuthat opens on this paragraph.</p><!--&nbsp; &nbsp;the element below is supposed to show&nbsp; &nbsp;in the context menu instead of inline.--><button&nbsp;&nbsp; &nbsp;id="menuItem">&nbsp; &nbsp;Click me!</button>

Answer 2

如果不使用WebExtension就无法修改浏览器上下文菜单，最好的解决方案是使用e.preventDefault()它停止浏览器上下文菜单显示，然后添加您自己的上下文菜单（例如弹出窗口）。

Answer 3

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items"permissions": ["contextMenus"]browser.contextMenus.create(&nbsp; {&nbsp; &nbsp; id: "log-selection",&nbsp; &nbsp; title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),&nbsp; &nbsp; contexts: ["selection"],&nbsp; },&nbsp; onCreated);browser.contextMenus.onClicked.addListener((info, tab) => {&nbsp; switch (info.menuItemId) {&nbsp; &nbsp; case "log-selection":&nbsp; &nbsp; &nbsp; console.log(info.selectionText);&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; // …&nbsp; }});