Расширение Chrome - динамическое контекстное меню

Question

Я пытаюсь создать опцию в контекстном меню, которая динамически зависит от действий пользователя. Если пользователь выбирает какой-либо текст, а затем щелкает правой кнопкой мыши, опция скажет «Показать его». Если пользователь щелкает правой кнопкой мыши, не выделяя какой-либо текст, опция скажет «Сначала выберите текст» и будет выделена серым цветом. Мне интересно, как мне этого добиться?

В настоящее время он у меня есть, так что опция появится только тогда, когда пользователь выбрал какой-то текст. Я не уверен, как изменить его, чтобы он соответствовал моим вторым требованиям.

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

Answer 1

Вы не можете выделить элемент серым цветом ... 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);

Answer 2

Я хотел выполнить то же самое, что и в оригинальном сообщении, и смог заставить его работать, используя некоторую передачу сообщений.Независимо от того, является ли это плохой практикой или нет, я использовал включенное (true / false) свойство contextMenu, чтобы оставить свой параметр контекстного меню присутствующим, но затемненным.

Я создал контекстное меню.Важным свойством является идентификатор.Остальное в основном произвольное, потому что оно будет изменяться динамически.

В 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"]
        });