Javascript Chrome扩展-动态右键单击菜单

我正在尝试在右键单击菜单中创建一个基于用户操作的动态选项。如果用户选择一些文本，然后右键单击，选项将显示“显示它”。如果用户右键单击而未选择某些文本，则该选项将显示“先选择某些文本”并变灰。我想知道我如何做到这一点

我目前拥有它，因此只有当用户选择了一些文本时，该选项才会出现。我不确定如何修改它以满足我的第二个要求

chrome.contextMenus.create ({
    title:"Display It!", contexts:["selection"], onclick:function(info,tab) {
        chrome.tabs.sendRequest(
            tab.id,
            {callFunction: "displaySidebar", info: info}, 
            function(response) {console.log(response);}
        );
    }           
});

---

你不能灰色化一个项目…Chrome已经花了一点力气，只使上下文菜单项目出现在相关的时候，这就是为什么我想没有灰色化选项。你的方式与Chrome试图实现的方式背道而驰，我认为你真的应该重新思考你的方式。
也就是说，您可以使用chrome.contextMenus.update更改菜单项。
下面的代码与您的方式一样好（认真地说，重新思考这个想法）

---

我希望完成与原始帖子相同的事情，并且能够通过一些消息传递使其正常工作。不管这是否是一种错误的做法，我使用enabled（true/false）contextMenu属性使上下文菜单选项保持存在，但变灰

我创建了一个上下文菜单。重要的属性是id。其余的大部分是任意的，因为它将被动态更改

在content.js中

//This event listener will determine if the context menu should be updated 
//based on if the right-button was clicked and if there is a selection or not
document.addEventListener("mousedown", function(event){
    if (event.button !== 2) {
        return false;
    }
    var selected = window.getSelection().toString();
        if(event.button == 2 && selected != '') {
                //get selected text and send request to bkgd page to create menu
            chrome.extension.sendMessage({
                   'message': 'updateContextMenu', 
                   'selection': true});
        } else {
        chrome.extension.sendMessage({
                   'message': 'updateContextMenu',
                   'selection': false});
        }
}, true);

在background.js中：

//add a message listener that will modify the context menu however you see fit
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.message == 'updateContextMenu') {
        if (request.selection) {
            chrome.contextMenus.update('contextMenuId',{
                'title': 'New Title', 
                'enabled': true, 
                "contexts": ["all"],
                'onclick': someFunction
            });
        } else {
            chrome.contextMenus.update('contextMenuId',{
                'title': 'Select some text first', 
                'enabled': false, 
                "contexts": ["all"]
            });
        }
    } else {
        sendResponse({});
    }
});

//The original context menu.  The important property is the id.  The rest is mostly 
//arbitrary because it will be changed dynamically by the listener above.
    chrome.contextMenus.create({
        'id': 'contextMenuId', 
        'enabled': false, 
        'title': 'Some Title', 
        "contexts": ["all"]
        });

---

禁用“选择一些文本”选项会令人困惑。为什么不在选择文本时使用“显示”选项呢？这是设计团队做出的决定。我只是团队的业余开发人员：我相信他们的逻辑是让用户知道他们需要选择一些文本才能使用我们的扩展。谢谢你的建议。我会把这个提交给设计团队。@Jon，您可以将默认文本设置为“选择整个页面”，而不是“选择一些文本”。当他点击“选择整个页面”时，你选择了整个页面。

//add a message listener that will modify the context menu however you see fit
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.message == 'updateContextMenu') {
        if (request.selection) {
            chrome.contextMenus.update('contextMenuId',{
                'title': 'New Title', 
                'enabled': true, 
                "contexts": ["all"],
                'onclick': someFunction
            });
        } else {
            chrome.contextMenus.update('contextMenuId',{
                'title': 'Select some text first', 
                'enabled': false, 
                "contexts": ["all"]
            });
        }
    } else {
        sendResponse({});
    }
});

//The original context menu.  The important property is the id.  The rest is mostly 
//arbitrary because it will be changed dynamically by the listener above.
    chrome.contextMenus.create({
        'id': 'contextMenuId', 
        'enabled': false, 
        'title': 'Some Title', 
        "contexts": ["all"]
        });