Come faccio a limitare la visualizzazione dei menu di scelta rapida solo per determinati testi selezionati in un'estensione di Chrome?

Question

Ho creato un semplice chrome extension che consente agli utenti di evidenziare un numero DOI, fare clic con il tasto destro e scegliere "Risolvi DOI" e inviarlo alla pagina Web associata. In questo momento, questo è fatto in background.html con:

chrome.contextMenus.create({ 
"title" : "Resolve DOI", 
"type" : "normal", 
"contexts" : ["selection"], 
"onclick" : getClickHandler() 
}); 

Vorrei restringere l'opzione di menu contestuale per apparire solo se il testo si evidenziano inizia con "10." Qualche suggerimento su come fare questo? Devo aspettare che il modulo Context Menu sia più avanzato?

Answer 1

È necessario controllare la creazione del menu di contenuto da uno script di contenuto. La creazione/eliminazione di menu dinamici dovrebbe essere eseguita abbastanza velocemente e il ritardo sarà impercettibile per un utente.

• Aggiungi listener di eventi mousedown in uno script di contenuto e controlla se la selezione soddisfa il tuo modello.
• In base al fatto che la selezione corrisponda al criterio, inviare una richiesta a una pagina in background che richiede di creare o eliminare il menu.

qualcosa del genere (non testato):

content_script.js:

document.addEventListener("mousedown", function(event){ 
    var selection = window.getSelection().toString(); 
    if(selection.match(/^10\./)) { 
     chrome.extension.sendRequest({cmd: "create_menu"}); 
    } else { 
     chrome.extension.sendRequest({cmd: "delete_menu"}); 
    } 
}, true); 

background.html:

chrome.extension.onRequest.addListener(function(request) { 
    if(request.cmd == "create_menu") { 
     chrome.contextMenus.removeAll(function() { 
      chrome.contextMenus.create({ 
       "title" : "Resolve DOI", 
       "type" : "normal", 
       "contexts" : ["selection"], 
       "onclick" : getClickHandler() 
      }); 
     }); 
    } else if(request.cmd == "delete_menu") { 
     chrome.contextMenus.removeAll(); 
    } 
});