Chrome扩展程序 - 动态右键菜单

Question

我试图创建一个右键菜单选项，它基于用户的操作是动态的。如果用户选择了一些文本，那么右键时选项将显示“Display It”。如果用户在没有选择文本的情况下右键，选项将显示“先选择一些文本”，并且会变灰。我想知道该如何实现这个功能？

目前，当用户选择一些文本时，选项将出现。我不确定如何修改以满足我的第二个要求。

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

- Jon

---

禁用“选择一些文本”的选项会令人困惑。为什么不在选择文本时就有一个“显示”选项呢？ - Bojangles

这是设计团队做出的决定。我只是团队的业余开发者 :P - Jon

我相信他们的逻辑是要让用户知道必须选择一些文本才能使用我们的扩展程序。 - Jon

Answer 1

我希望能像原帖一样实现同样的事情，并且通过一些消息传递使其工作。无论是不是一个不好的做法，我使用了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.runtime.sendMessage({
                   'message': 'updateContextMenu', 
                   'selection': true});
        } else {
        chrome.runtime.sendMessage({
                   'message': 'updateContextMenu',
                   'selection': false});
        }
}, true);

在background.js文件中：

//add a message listener that will modify the context menu however you see fit
chrome.runtime.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"]
        });

- user3345

Answer 2

您不能将一个项目变灰... Chrome花了很多心思，只在相关情况下显示上下文菜单项，这就是我猜想为什么没有灰色选项。 你的方法违反了Chrome试图实现的内容，我认为你应该重新考虑你的方法。
话虽如此，您可以使用chrome.contextMenus.update来更改菜单项。
以下代码是您能够得到的最好效果（真的，请重新考虑这个想法）....

function selectedTrueOnClick(info, tab) {
    chrome.tabs.sendRequest(
    tab.id, {
        callFunction: "displaySidebar",
        info: info
    }, function(response) {
        console.log(response);
    });
}

function selectedFalseOnClick(info, tab) {
    //
}

var contextMenuID = chrome.contextMenus.create({
    title: "Select some text",
    contexts: ["all"],
    onclick: selectedFalseOnClick
});

function contextMenuUpdate(selected) {
    if (selected) chrome.contextMenus.update(contextMenuID, {
        title: 'You selected "%s"',
        contexts: ["all"],
        onclick: selectedTrueOnClick
    });
    else chrome.contextMenus.update(contextMenuID, {
        title: "Select some text",
        contexts: ["all"],
        onclick: selectedTrueOnClick
    });
}

contextMenuUpdate(false);

- PAEz

---

谢谢您的建议。我会向设计团队提出这个问题。 - Jon

@Jon，你可以将默认文本更改为“选择整个页面”，而不是“选择一些文本”。当他点击“选择整个页面”时，你就选择整个页面。 - Pacerier