Javascript 仅当右键单击以“开始”开头的类时才显示关联菜单按钮；“故事”；

只有当用户右键单击以“故事”开头的类时，才可以显示上下文菜单操作

例如：如果用户右键单击“故事…”类页面中的对象，则应显示关联菜单按钮，否则不会发生任何事情

下面是我的代码（尽管它不起作用）：

var divs=document.querySelectorAll（“[class^=story]”）//获取所有以“故事”开头的类
window.oncontextmenu=函数（）{
对于（变量i=0；i

截止日期

“全部”、“页面”、“框架”、“选择”、“链接”、“可编辑”、“图像”、“视频”、“音频”、“启动器”

是仅支持的上下文。不可能对对象的每个类进行自定义

变通 如果您希望显示上下文菜单操作，则仅当用户右键单击页面上的某些div.class时，才使用鼠标悬停在菜单上，如图所示

在中，我解释了不能动态创建上下文菜单项，因为

contextmenu

事件和上下文菜单项的出现之间的时间不足以在两者之间获得调用

另一个答案解释了如何确保上下文菜单项显示所选文本。这是通过收听

selectionchange

事件完成的。出于您的目的，我们希望使用具有所需时间的事件

我将使用

mouseover

和

mouseout

事件。根据鼠标事件，使用键盘时上下文菜单将不起作用，例如，使用JavaScript或Tab键聚焦元素，然后按上下文菜单键。我没有在下面的解决方案中实现它

演示包含三个文件（加上一个HTML页面来测试它）。我把所有文件都放在一个zip文件中，可以在

manifest.json

每个Chrome扩展都需要这个文件才能工作。对于此应用程序，将使用背景页和内容脚本。此外，还需要

上下文菜单

权限

{
    "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"
    ]
}

contentscript.js

此脚本的第一部分创建创建上下文菜单的简单方法。
在最后5行中，上下文菜单项被定义并绑定到与给定选择器匹配的所有当前和未来元素。正如我在上一节中所说，参数类型与相同，只是“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'}
]);

前面的代码假定所有上下文菜单单击都由后台页面处理。如果要处理内容脚本中的逻辑，则需要在内容脚本中绑定消息事件。我在

background.js

示例中展示了一个（注释）的实例，以显示应该在何处触发此事件

---

如果需要确定触发事件的元素，请不要使用我的示例中所示的预定义函数（在字典中），而是使用内联函数或工厂函数。要标识元素，需要将消息与唯一标识符配对。我将把创建此实现的任务留给读者完成（这并不困难）。

您能否进一步详细说明相关工作？正如我所说，我对网络编程还不熟悉：）@r3x:Check for a good start刚刚检查了测试HTML（感谢添加了该btw，使我的工作更轻松），扩展在您的测试页面上运行良好，但在我当前编写扩展的网站上不起作用。向您发送了一封包含所有详细信息的电子邮件。一旦它在该网站上运行，赏金将归你所有。谢谢你advance@r3x在您的电子邮件中，您显示了一个页面，其中加载文档时元素不存在。由于之前版本的代码在执行时将事件绑定到元素，因此后来添加的元素没有获得所需的事件侦听器。我已经更新了答案，改为使用事件委派，这意味着该事件绑定到一个公共父节点，在该节点上接收并过滤大量事件，以便找到正确的事件。很棒的工作：）接受了您的答案，但有一个小错误，当您右键单击不匹配的测试时，上下文菜单仍然显示，右键单击一个匹配项后。一旦修复，一切都会变得完美。向您发送了一封电子邮件，其中包含问题的描述和视频。现在一切正常。等待期结束后（8小时内），奖金归您所有。非常感谢。

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);

// 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'}
]);