feux d'écouteur d'événement extension Chrome plusieurs fois

Question

Présentation

J'ai un problème avec mon extension pour Chrome. Il est censé afficher une petite fenêtre contextuelle superposée (créée dans jQuery) avec les résultats de recherche de Google en fonction de votre sélection de texte. Fondamentalement, vous devriez pouvoir mettre en évidence un texte sur n'importe quelle page, cliquer dessus avec le bouton droit de la souris (menu contextuel), cliquer sur "Rechercher le mot-clé sélectionné" et une petite fenêtre apparaît dans le même onglet. Google.

Le problème

Il fonctionne comme décrit, mais seulement pour la première fois. Lorsque je mettrai en évidence un autre mot-clé et que je le rechercherai, l'extension REMEMBERSERa les mots-clés précédents et lancera 2 fenêtres en même temps. Et si je cherchais un autre mot-clé qui me donnerait 3 fenêtres avec 2 recherches précédentes et une nouvelle ...

J'ai essayé de supprimer l'écouteur dans le script d'arrière-plan après son exécution, mais n'a pas fonctionné. On dirait que les anciens écouteurs sont là et qu'ils répondent pour une requête du script de contenu. Puis-je les supprimer d'une manière ou d'une autre?

J'ai essayé de mettre:

chrome.extension.onConnect.removeListener(listener); 

à la fin de la fonction getClickHandler() mais ne fonctionne pas.

Je pensais aussi que peut-être ce morceau de code dans le script de fond est en train de faire, mais pas sûr

return function(info, tab) { 

S'il vous plaît, avez-vous des suggestions?

Merci beaucoup d'avance!

PS. Cette fenêtre pop-up ne peut pas être fermée pour le moment et j'en suis conscient. Mais vous pouvez toujours actualiser la page pour obtenir une fenêtre propre. Le problème est que la deuxième fois, je vais avoir 2 fenêtres ouvertes en même temps ... et ainsi de suite comme décrit ci-dessus.

fichier Manifest:

{ 
    "name": "Easy search Accelerator", 
    "version": "1.0", 
    "manifest_version": 2, 
    "description": "Easily search for anything...", 
    "icons": { 
    "16": "icon.png", 
    "48": "icon.png", 
    "128": "icon.png" 
    }, 
    "background": { 
    "scripts": ["sample.js"] 
    }, 
    "permissions": [ 
    "contextMenus", 
    "tabs", 
    "http://*/*", 
    "https://*/*" 
    ], 
    "manifest_version": 2 
} 

la page Contexte/script (sample.js):

chrome.contextMenus.create({ 
    "title": 'Search for "%s"', 
    "contexts":['selection'], 
    "onclick": getClickHandler() 
}); 
function getClickHandler() { 
    return function(info, tab) { 

    var url = "https://www.google.co.uk/search?q=" + info.selectionText; 

    chrome.extension.onConnect.addListener(function listener(port) { 
    console.assert(port.name == "searchQuery"); 
    port.onMessage.addListener(function(msg) { 
     if (msg.keywordRequest == "Yes") 
     port.postMessage({keyword: url}); 
    }); 
}); 

    chrome.tabs.executeScript(null, { file: "jquery-1.7.2.min.js" }, function() { 
    chrome.tabs.executeScript(null, { file: "frame.js" }); 

    }); 
    }; 
}; 

script de contenu (frame.js)

var port = chrome.extension.connect({name: "searchQuery"}); 
port.postMessage({keywordRequest: "Yes"}); 
port.onMessage.addListener(function listen(msg) { 

    var test = msg.keyword; 
    $("body").append("<div style=\"position: fixed;top: 20px;right: 20px;z-index: 9999;\"><iframe style=\"border:1px solid #868686;-webkit-box-shadow: 2px 2px 20px 1px rgba(0, 0, 0, 0.5);\" src=\""+ test +"\" width=328 HEIGHT=240></iframe></div>"); 
}); 

Answer 1

ports doivent être utilisés pour "connexions" de longue durée.

chrome.extension.sendRequest (script de contenu) et chrome.extension.onRequest (arrière-plan) devraient être utilisés dans votre cas (sendMessage/onMessage instead of *Request in Chrome 20+).

Ces méthodes peuvent être utilisées comme suit:

• Lors de l'initialisation d'extension: Liez un événement onRequest en arrière-plan
• script de contenu: Le feu sendRequest(request_obj, response_func)
• Contexte: reçu l'objet précédent. Faites quelque chose et appelez response_func.

---

PS. Incluez-vous vraiment jQuery, juste pour ajouter une chaîne? Si oui, je vous recommande vivement d'abandonner jQuery et d'utiliser vanilla JavaScript:

var div = document.createElement('div'); 
div.style.cssText = "position: fixed;top: 20px;right: 20px;z-index: 9999;"; 
div.innerHTML = "<iframe style=\"border:1px solid #868686;-webkit-box-shadow: 2px 2px 20px 1px rgba(0, 0, 0, 0.5);\" src=\""+ test +"\" width=328 HEIGHT=240></iframe>"; 
document.body.appendChild(div);