Расширение Chrome - Динамическое меню с правым кликом

Я пытаюсь создать опцию в меню правой кнопки мыши, которое является динамическим на основе действия пользователя. Если пользователь выбирает какой-либо текст, затем щелкнет правой кнопкой мыши, в опции появится надпись "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);}
        );
    }           
});

Ответ 1

Вы не можете вырезать серый цвет... Chrome приложил немало усилий, чтобы отображать только пункты контекстного меню, когда это актуально, поэтому я думаю, что опция no grey отсутствует. Ваш путь идет вразрез с тем, что 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);

Ответ 2

Я пытался выполнить то же самое, что и исходное сообщение, и смог заставить его работать, используя некоторую передачу сообщений. Независимо от того, была ли это плохой практикой или нет, я использовал свойство 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"]
        });