Extension Chrome - Menu dynamique clic-droit

Question

J'essaie de créer une option dans le menu contextuel qui est dynamique en fonction de l'action de l'utilisateur. Si l'utilisateur sélectionne du texte, puis clique avec le bouton droit de la souris, l'option "Afficher" s'affiche. Si l'utilisateur clique avec le bouton droit de la souris sans sélectionner de texte, l'option indique "Sélectionner du texte d'abord" et s'affiche en grisé. Je me demande comment puis-je y parvenir?

Je l'ai actuellement pour que l'option n'apparaisse que lorsque l'utilisateur a sélectionné du texte. Je ne sais pas comment le modifier pour répondre à mes deuxièmes exigences.

Answer 1

Vous ne pouvez pas gris un article sur ... Chrome est allé un peu d'effort pour faire uniquement les éléments du menu contextuel apparaissent lorsque son correspondant qui est pourquoi je pense que theres aucune option grisé. Votre chemin va à l'encontre de ce que Chrome a essayé de mettre en œuvre et je pense que vous devriez vraiment repenser la façon dont vous allez à ce sujet. En d'autres termes, vous pouvez utiliser le fichier chrome.contextMenus.update pour modifier un élément de menu.
Le code suivant est à peu près aussi bon que vous allez obtenir votre chemin (sérieusement, repenser cette idée) ....

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

Je cherchais à accomplir la même chose que le message original, et était capable de le faire fonctionner en utilisant un message qui passe. Peu importe si c'est une mauvaise pratique ou non, j'ai utilisé la propriété contextMenu enabled (true/false) pour laisser mon option de menu contextuel présente, mais grisée.

J'ai créé un menu contextuel. La propriété importante est l'identifiant. Le reste est pour la plupart arbitraire car il sera modifié dynamiquement.

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

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