Sélection de texte et affichage dans le menu contextuel chrome extension

Question

J'ai travaillé sur une petite extension Chrome avec un problème que je ne peux pas me tromper et j'apprécierais que quelqu'un regarde avec une nouvelle perspective.

L'objectif est de créer une extension chrome qui vous permet de sélectionner du texte sur un site Web donné et d'afficher une option permettant d'envoyer la sélection à un autre site Web à l'aide d'un élément de menu contextuel.

Mon manifest.json ressemble à ceci:

{ 
"name": "Context Menu Search", 
"description": "Opens the selected text as keyword in a new window", 
"version": "0.1", 
"permissions": ["contextMenus"], 
"background_page": "background.html" 
} 

Puis background.html:

<script src="rightclick.js"></script> 

Et rightclick.js:

var selection_callbacks = []; 
function getSelection(callback) { 
selection_callbacks.push(callback); 
    chrome.tabs.executeScript(null, { file:"selection.js" }); 
    }; 
    chrome.extension.onRequest.addListener(function (request) { 
    var callback = selection_callbacks.shift(); 
    callback(request); 
    }); 

function sendSearch(selectedText) { 
var serviceCall = 'http://www.google.com/search?q=' + selectedText; 
chrome.tabs.create({url: serviceCall}); 
} 
var tx = getSelection(); 
var title = "Test '" + tx + "' menu item"; 
var id = chrome.contextMenus.create({"title": title, "contexts":[selection], 
            "onclick": sendSearch(tx)}); 
console.log("selection item:" + id); 

plus selection.js:

chrome.extension.sendResponse(window.getSelection().toString()); 

Jusqu'à présent, la création de menu contextuel fonctionne très bien, mais le texte sélectionné n'apparaît pas du tout. Si quelqu'un a des suggestions sur la façon de résoudre ce problème ainsi que de simplifier le script, j'apprécierais votre contribution.

Merci beaucoup.

Answer 1

MISE À JOUR

Je viens de regarder le docs et tout cela peut être fait beaucoup plus simple sans scripts de contenu et callbacks:

chrome.contextMenus.create({ 
    title: "Test %s menu item", 
    contexts:["selection"], 
    onclick: function(info, tab) { 
     sendSearch(info.selectionText); 
    } 
}); 

C'est tout vous avez besoin, parce que vous pouvez utiliser %s dans le titre du menu pour obtenir le texte sélectionné.

(tout ci-dessous n'est plus nécessaire)

---

Votre méthode getSelection() ne retourne pas le texte sélectionné, il injecte juste un script de contenu à une page. Le texte sélectionné est reçu plus tard dans onRequest, puis transmis à une fonction de rappel de votre tableau de rappel en tant que paramètre.

donc cette partie:

var tx = getSelection(); 
var title = "Test '" + tx + "' menu item"; 
var id = chrome.contextMenus.create({"title": title, "contexts":[selection], 
            "onclick": sendSearch(tx)}); 
console.log("selection item:" + id); 

a besoin d'être changé à quelque chose comme ceci:

getSelection(function(tx) { 
    var title = "Test '" + tx + "' menu item"; 
    var id = chrome.contextMenus.create({"title": title, "contexts":["selection"], 
             "onclick": sendSearch(tx)}); 
    console.log("selection item:" + id); 
}) 

Mais je vous débarrasser de ce tableau selection_callbacks tout à fait que je pense que ce n'est pas nécessaire:

chrome.extension.onRequest.addListener(function (request) { 
    var tx = request; 
    var title = "Test '" + tx + "' menu item"; 
    var id = chrome.contextMenus.create({"title": title, "contexts":["selection"], 
             "onclick": sendSearch(tx)}); 
    console.log("selection item:" + id); 
}); 

Notez également que "contexts":[selection] doit être "contexts":["selection"] et "onclick": sendSearch(tx) doit être quelque chose comme ceci:

"onclick": function(info, tab) { 
    sendSearch(info.selectionText); 
}