根据单击哪个元素更改上下文菜单文本 [英] Change context menu text based on which element is clicked

问题描述

我制作了Chrome扩展程序（ https://chrome.google.com /网站商铺/细节/ omnibear / cjieakdeocmiimmphkfhdfbihhncoocn ）。它添加一个项目到上下文菜单，所以用户可以右键单击页面上的一个元素并回复他们博客上的相关入口。

我的问题无论我能否找到条目取决于他们点击的位置，并涉及遍历DOM树。我有代码来强调在 contextmenu 事件被触发时的条目，但是这对于更新上下文菜单中的文本来说太迟了。有没有办法在打开时动态地更新上下文菜单文本？

（例如，如果没有找到条目，我希望它说回复页面 ，或者回复鸣叫，如果发现鸣叫）

解决方案

不，在Chrome扩展/ Firefox WebExtension中，没有办法让JavaScript在上下文菜单打开时对上下文菜单进行动态更改。在上下文菜单打开时动态更改的唯一方法是：如果添加了一个上下文菜单项，该菜单项的选择上下文 ContextType ，那么你可以在 title中指定％s


更改上下文菜单，然后开始打开

鼠标事件

为了达到您的要求，您需要在打开上下文菜单之前对上下文菜单进行更改。这可以通过使用内容脚本来监听 mouseup 事件。您可能必须最终使用 mousedown 事件，或者一个或多个 mouseenter / mouseleave / mouseover / mouseout 事件。如果您确实需要使用 mousedown ，那么一旦该事件触发，您应该开始监听一些 mouseenter / mouseleave / mouseover / mouseout 鼠标结束了更改，或者只是假定用户释放与按下相同元素的按钮。

如果 mouseup / mousedown 事件是针对 button = 2 ，那么你需要给你的背景留言脚本更改上下文菜单，使用 contextMenus.update （） 。这个过程有多个异步部分。这可能会导致各种竞争条件，并且可能需要使用事件，这些事件会比 mouseup （例如 mousedown ， 的mouseenter / 鼠标离开 / 鼠标悬停 / mouseout ）。

您需要注意哪些事件可能取决于操作系统/平台/窗口系统。您需要测试以确定您计划支持的每个环境中所需的内容。

键盘事件

上下文菜单也可以使用几个键盘序列打开。您将需要侦听并执行鼠标事件所需的相同消息。您需要确定这些事件在您支持的所有操作系统/平台/窗口系统中是什么。

Linux

在Linux上，它似乎至少在平台上有所不同。

OSX

在OSX上，似乎键盘快捷键是只有启用时才可用。

Windows

在Windows上，打开上下文菜单的键盘快捷键为：

上下文菜单键

您需要检测以下事件序列：

< pre class =lang-none prettyprint-override> keydown {target：< body> key：ContextMenu，charCode：0，keyCode：93}
keypress {target：< ; body>，键：ContextMenu，charCode：0，keyCode：93}
keyup {target：< body> ;, key：ContextMenu，charCode：0，keyCode：93}


上下文菜单直到大约 keyup 事件火灾。我没有测试，看看 keyup 是否足够早地发生，以便在它打开之前对上下文菜单进行更改。

键盘组合： Shift - F10

您需要检测以下事件序列： / p>

 =   keydown Shift {target：< body> ;, key：Shift，charCode： keyCode：16，shiftKey：true} 
 keydown Shift {target：< body> key：F10，charCode：0，keyCode：121，shiftKey：true} 
 keypress Shift {target：< ; body>，键：F10，charCode：0，keyCode：121，shiftKey：true} 
  

在这种情况下，上下文菜单大约与移动的 F10 keydown / 按键事件触发。没有 keyup 事件触发此键盘序列。

I’ve built a Chrome extension (https://chrome.google.com/webstore/detail/omnibear/cjieakdeocmiimmphkfhdfbihhncoocn). It adds an item to the context menu, so the user can right-click an element on the page and reply to the associated "entry" on their blog.

My problem is, whether or not I can find an "entry" depends on where they click, and involves traversing up the DOM tree. I have the code in place that highlights the entry when the contextmenu event is fired, but this is too late to update the text in the context menu. Is there a way to update the context menu text dynamically as it is opened?

(e.g., I would like it to say "Reply to page" if no entry is found, or "Reply to tweet" if a tweet is found)

解决方案

No, in a Chrome extension/Firefox WebExtension, there is no way to have your JavaScript make dynamic changes to the context menu at the time the context menu opens. The only thing that dynamically changes at the time the context menu opens is: if you have added a context menu item that has the selection context for its ContextType, then you can specify %s in the title, which will be replaced with the current selection.

Change the context menu before it begins to open

Mouse events

To do what you desire, you need to make the changes to the context menu prior to the beginning of the context menu being opened. This can be accomplished by having a content script that listens to the mouseup event. You may have to end up using the mousedown event, or one or more of the mouseenter/mouseleave/mouseover/mouseout events. If you do need to use mousedown, once that event fires you should then start listening to some of the mouseenter/mouseleave/mouseover/mouseout events to tell when the element the mouse is over changes, or just assume the user releases the button on the same element on which they pressed it down.

If the mouseup/mousedown event is for button=2, then you will need to message your background script to change the context menu with contextMenus.update(). There are multiple asynchronous portions of this process. This may make for various race conditions, and may necessitate using events which give you earlier notification than mouseup (e.g. mousedown, mouseenter/mouseleave/mouseover/mouseout).

What events you need to watch for may be operating system/platform/windowing system dependent. You will need to test to determine what is needed in each environment you plan to support.

Keyboard events

The context menu can also be opened using a few keyboard sequences. You will need to listen for and perform the same messaging as is needed for mouse events. You will need to determine what these events are in all operating systems/platforms/windowing systems which you are supporting.

Linux

On Linux it appears to vary at least based on platform.

OSX

On OSX, it appears that a keyboard shortcut is only available if enabled.

Windows

On Windows, the keyboard shortcuts to open the context menu are:

Context Menu key

You will need to detect the following event sequence:

keydown { target: <body>, key: "ContextMenu", charCode: 0, keyCode: 93 }
keypress { target: <body>, key: "ContextMenu", charCode: 0, keyCode: 93 }
keyup { target: <body>, key: "ContextMenu", charCode: 0, keyCode: 93 }

The context menu does not open until around the same time the keyup event fires. I did not test to see if the keyup happens early enough for you to make changes to the context menu prior to it opening.

Keyboard combination: Shift-F10

You will need to detect the following event sequence:

keydown Shift { target: <body>, key: "Shift", charCode: 0, keyCode: 16, shiftKey: true }
keydown Shift { target: <body>, key: "F10", charCode: 0, keyCode: 121, shiftKey: true }
keypress Shift { target: <body>, key: "F10", charCode: 0, keyCode: 121, shiftKey: true }

In this case, the context menu opens at around the same time as the shifted F10 keydown/keypress events fire. No keyup event fires for this keyboard sequence.

这篇关于根据单击哪个元素更改上下文菜单文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！