在这个相关的答案中,我解释说不能即时创建上下文菜单项,因为contextmenu
事件和上下文菜单项出现之间的时间不足以chrome.contextMenus.create
在两者之间进行调用。
另一个答案解释了如何确保上下文菜单条目显示选定的文本。这是通过监听selectionchange
事件来完成的。出于您的目的,我们希望使用具有所需时间的事件。
我将使用mouseover
andmouseout
事件。根据鼠标事件,当您使用键盘时,上下文菜单将不起作用,例如,使用 JavaScript 或 Tab 键聚焦元素,然后按下上下文菜单键。我没有在下面的解决方案中实现它。
该演示包含三个文件(加上一个 HTML 页面来测试它)。我将所有文件放在一个 zip 文件中,可在https://robwu.nl/contextmenu-dom.zip获得。
manifest.json
每个 Chrome 扩展程序都需要这个文件才能工作。对于此应用程序,使用了背景页面和内容脚本。此外,contextMenus
还需要许可。
{
"name": "Contextmenu based on activated element",
"description": "Demo for https://stackoverflow.com/q/14829677",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"content_scripts": [{
"run_at": "document_idle",
"js": ["contentscript.js"],
"matches": ["<all_urls>"]
}],
"permissions": [
"contextMenus"
]
}
background.js
背景页面将代表内容脚本创建上下文菜单。这是通过将事件侦听器绑定到 来实现的chrome.runtime.onConnect
,它提供了一个简单的界面来替换上下文菜单条目。
chrome.contextMenus.create
每当通过此端口(来自内容脚本)接收到消息时调用。所有属性,除了onclick
是 JSON 可序列化的,所以只有“onclick”处理程序需要特殊处理。我使用字符串来识别字典 ( var clickHandlers
) 中的预定义函数。
var lastTabId;
// Remove context menus for a given tab, if needed
function removeContextMenus(tabId) {
if (lastTabId === tabId) chrome.contextMenus.removeAll();
}
// chrome.contextMenus onclick handlers:
var clickHandlers = {
'example': function(info, tab) {
// This event handler receives two arguments, as defined at
// https://developer.chrome.com/extensions/contextMenus#property-onClicked-callback
// Example: Notify the tab's content script of something
// chrome.tabs.sendMessage(tab.id, ...some JSON-serializable data... );
// Example: Remove contextmenus for context
removeContextMenus(tab.id);
}
};
chrome.runtime.onConnect.addListener(function(port) {
if (!port.sender.tab || port.name != 'contextMenus') {
// Unexpected / unknown port, do not interfere with it
return;
}
var tabId = port.sender.tab.id;
port.onDisconnect.addListener(function() {
removeContextMenus(tabId);
});
// Whenever a message is posted, expect that it's identical to type
// createProperties of chrome.contextMenus.create, except for onclick.
// "onclick" should be a string which maps to a predefined function
port.onMessage.addListener(function(newEntries) {
chrome.contextMenus.removeAll(function() {
for (var i=0; i<newEntries.length; i++) {
var createProperties = newEntries[i];
createProperties.onclick = clickHandlers[createProperties.onclick];
chrome.contextMenus.create(createProperties);
}
});
});
});
// When a tab is removed, check if it added any context menu entries. If so, remove it
chrome.tabs.onRemoved.addListener(removeContextMenus);
contentscript.js
该脚本的第一部分创建了用于创建上下文菜单的简单方法。
在最后 5 行中,上下文菜单条目被定义并绑定到与给定选择器匹配的所有当前和未来元素。就像我在上一节中所说的那样,参数类型与“onclick”的createProperties
参数相同,chrome.contextMenus.create
除了“onclick”,它是一个映射到后台页面中的函数的字符串。
// Port management
var _port;
var getPort = function() {
if (_port) return _port;
_port = chrome.runtime.connect({name: 'contextMenus'});
_port.onDisconnect.addListener(function() {
_port = null;
});
return _port;
}
// listOfCreateProperties is an array of createProperties, which is defined at
// https://developer.chrome.com/extensions/contextMenus#method-create
// with a single exception: "onclick" is a string which corresponds to a function
// at the background page. (Functions are not JSON-serializable, hence this approach)
function addContextMenuTo(selector, listOfCreateProperties) {
// Selector used to match an element. Match if an element, or its child is hovered
selector = selector + ', ' + selector + ' *';
var matches;
['matches', 'webkitMatchesSelector', 'webkitMatches', 'matchesSelector'].some(function(m) {
if (m in document.documentElement) {
matches = m;
return true;
}
});
// Bind a single mouseover+mouseout event to catch hovers over all current and future elements.
var isHovering = false;
document.addEventListener('mouseover', function(event) {
if (event.target && event.target[matches](selector)) {
getPort().postMessage(listOfCreateProperties);
isHovering = true;
} else if(isHovering) {
getPort().postMessage([]);
isHovering = false;
}
});
document.addEventListener('mouseout', function(event) {
if (isHovering && (!event.target || !event.target[matches](selector))) {
getPort().postMessage([]);
isHovering = false;
}
});
}
// Example: Bind the context menus to the elements which contain a class attribute starts with "story"
addContextMenuTo('[class^=story]', [
{"id": "butto1", "title": "1", "contexts":["all"], "onclick": 'example'},
{"id": "button2", "title": "2", "contexts":["all"], "onclick": 'example'},
{"id": "button3", "title": "3", "contexts":["all"], "onclick": 'example'}
]);
前面的代码假定所有上下文菜单点击都由后台页面处理。如果要改为在内容脚本中处理逻辑,则需要在内容脚本中绑定消息事件。我在示例中显示了一个(注释的)实例,chrome.tabs.sendMessage
以background.js
显示应该在哪里触发此事件。
如果您需要识别触发事件的元素,请不要使用我的示例中所示的预定义函数(在字典中),而是使用内联函数或工厂函数。要识别元素,消息需要与唯一标识符配对。我将把创建这个实现的任务留给读者(这并不难)。