2012-06-25 19 views
5

Introducciónextensión de Chrome incendios detectores de evento múltiple de veces

tengo un problema con mi extensión para Chrome. Se supone que debe mostrar una pequeña ventana emergente de superposición (creada en jQuery) con resultados de búsqueda de Google basados ​​en su selección de texto. Básicamente, debería poder resaltar un texto en cualquier página, hacer clic derecho sobre él (menú contextual), hacer clic en "Buscar la palabra clave seleccionada" y aparecerá una pequeña ventana en la misma pestaña que una superposición con todos los resultados de búsqueda de Google.

El problema

Funciona como se describe, sin embargo, sólo por primera vez. Cuando resaltaré otra palabra clave y la buscaré, la extensión todavía RECUERDA palabras clave anteriores y arroja 2 ventanas al mismo tiempo. Y si buscara otra palabra clave que me diera 3 ventanas con 2 búsquedas previas y una nueva ...

He intentado eliminar el oyente en el script de fondo después de que se haya ejecutado, pero no funcionó. Parece que los antiguos oyentes están allí y responden por una solicitud del script de contenido. ¿Puedo de alguna manera eliminarlos?

He intentado poner:

chrome.extension.onConnect.removeListener(listener); 

al final de la función getClickHandler(), pero no funciona.

También estaba pensando que tal vez esta pieza de código en el script de fondo que está haciendo, pero no está seguro

return function(info, tab) { 

Por favor, ¿Tiene alguna sugerencia?

¡Muchas gracias de antemano!

PS. Esta ventana emergente no se puede cerrar en este momento y estoy al tanto de eso. Pero siempre puedes actualizar la página para obtener una ventana limpia. El problema es que la segunda vez abriré 2 ventanas emergentes al mismo tiempo ... y así sucesivamente, como se describió anteriormente.

archivo de manifiesto: la página

{ 
    "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 
} 

Antecedentes/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" }); 

    }); 
    }; 
}; 

de script contenido (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>"); 
}); 

Respuesta

9

Puertos deben utilizarse para larga vida "conexiones".

chrome.extension.sendRequest (escritura de contenido) y chrome.extension.onRequest (fondo) se deben utilizar en su caso (sendMessage/onMessage instead of *Request in Chrome 20+).

Estos métodos pueden ser utilizados de la siguiente manera:

  • En la extensión de inicialización: enlazar un evento onRequest en el fondo
  • escritura de contenido: Fuego sendRequest(request_obj, response_func)
  • Antecedentes: Recibido el objeto anterior. Haga algo e invoque response_func.

PS. ¿Está realmente incluyendo jQuery, solo para anexar una cadena? En caso afirmativo, le recomiendo que elimine jQuery y use JavaScript vainilla:

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); 
Cuestiones relacionadas