matches - ¿Cómo usar jquery en la página de extensión de google chrome acción background.js?

make chrome extensions

Question

Estoy desarrollando una "acción de página" extensión de Google Chrome. Mi manifiesto tiene:

...
"background": { "scripts": ["background.js"] },
...

En mi archivo background.js tengo:

function doSomething() {
     alert("I was clicked!");
}

chrome.pageAction.onClicked.addListener(doSomething);

Esto funciona. Ahora en mi función doSomething quiero leer algunos datos en la página actual. Será mucho más fácil para mí usar jquery para leer los datos, de modo que pueda identificar fácilmente los datos exactos que deseo. ¿Cómo puedo incorporar jquery (preferiblemente servido desde el CDN de Google) para que sea accesible para mi función doSomething ?

Answer 1

En el archivo de manifiesto, asegúrate de hacer referencia a tu archivo jquery.js local (como se llame) en el bloque content_scripts :

"content_scripts": [{
    "js": ["jquery.js"]
}]

Eso asegurará que esté incrustado en el archivo crx y será accesible a sus otros scripts.

Answer 2

La especificación de "background" en manifest.json debe especificar jquery.js para que se cargue antes de background.js :

...
"background": { "scripts": ["jquery.js","background.js"] },
...

Esto debería hacer el trabajo.
Recuerde que los archivos js se cargan en el orden en que se especifican.

prueba si jquery está cargado.

en background.js

if (jQuery) {  
    // jQuery loaded
} else {
    // jQuery not loaded
}

Answer 3

Mi entendimiento es que no es necesario usar background.js. Puedes tener tu código en popup.js en su lugar. Por lo tanto, tampoco tendrá que incluir nada en el archivo de manifiesto.

Le sugiero que incluya jQuery JS y su popup.js en su popup.html:

<script src="/js/jquery-1.8.1.min.js"></script>
<script src="/js/popup.js"></script>

Luego, en popup.js, deberías poder acceder a jQuery, para que tu eventHandler se vea así:

$(document).ready(function(){
 $(''#anyelement'').on(''click'', doSomething);

 function doSomething(){
   alert (''do something'');
 };
})

No creo que para eso quieras CDN para jQuery, todos los archivos se alojarán en la máquina del usuario.

Espero que te ayude, Rob

Answer 4

No sé si esta es la forma ideal, pero pude hacerlo funcionar con la ayuda de esta pregunta: Extensiones de Google Chrome: ¿Cómo incluir jQuery en el script de contenido inyectado programáticamente? .

Aparentemente, una página javascript de "fondo" no puede acceder al DOM de una página web en el navegador, por lo que cargar jquery realmente no tiene sentido en el script de fondo. En cambio, tengo la secuencia de comandos de fondo que inyecta la biblioteca jQuery y luego la secuencia de comandos de contenido en la página web actual. El script de contenido (a diferencia del script de fondo) puede acceder a la información en la página web.

background.js:

function handleClick(tab) {
    chrome.tabs.executeScript(null, { file: "jquery-1.8.2.min.js" }, function() {
        chrome.tabs.executeScript(null, { file: "content.js" });
    });
}

chrome.pageAction.onClicked.addListener(handleClick);

content.js

var text = jQuery(''h1'').text();
alert(''inside content! '' + text);