web-dev-qa-db-fra.com

Comment utiliser jquery dans google chrome extension page action background.js?

Je développe une "action sur la page" google chrome. Mon manifeste a:

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

Dans mon fichier background.js, j'ai:

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

chrome.pageAction.onClicked.addListener(doSomething);

Cela marche. Maintenant, dans ma fonction doSomething, je veux lire des données sur la page actuelle. Il sera beaucoup plus facile pour moi d'utiliser jquery pour lire les données afin que je puisse facilement cibler les données exactes que je veux. Comment puis-je incorporer jquery (de préférence servi à partir du CDN de google) afin qu'il soit accessible à ma fonction doSomething?

jquerygoogle-chrome-extensioncontent-script
31
User

Le "background" spécification dans manifest.json devrait spécifier jquery.js pour qu'il soit chargé avant background.js:

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

Cela devrait faire l'affaire.
N'oubliez pas que les fichiers js sont chargés dans l'ordre où ils sont spécifiés.

tester si jquery est chargé.

dans background.js

if (jQuery) {  
    // jQuery loaded
} else {
    // jQuery not loaded
}
57
Jaydeep Solanki

Je ne sais pas si c'est le moyen idéal, mais j'ai pu le faire fonctionner en utilisant l'aide de cette question: Google Chrome Extensions: Comment inclure jQuery dans injecté par programme) script de contenu? .

Apparemment, une page javascript "d'arrière-plan" ne peut pas accéder au DOM d'une page Web dans le navigateur, donc le chargement de jquery n'a pas vraiment de sens dans le script d'arrière-plan. Au lieu de cela, j'ai le script d'arrière-plan injecter par programme la bibliothèque jQuery, puis le script de contenu dans la page Web actuelle. Le script de contenu (contrairement au script d'arrière-plan) peut accéder aux informations sur la page 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);
10
User

Ma compréhension est qu'il n'est pas nécessaire d'utiliser background.js. Vous pouvez à la place avoir votre code dans popup.js. Par conséquent, vous n'aurez pas besoin d'inclure quoi que ce soit dans le fichier manifeste.

Je suggère d'inclure le jQuery JS et votre popup.js dans votre popup.html:

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

Ensuite, dans popup.js, vous devriez pouvoir accéder à jQuery, afin que votre gestionnaire d'événements ressemble à ceci:

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

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

Je ne pense pas pourquoi vous voulez CDN pour jQuery, tous les fichiers seront hébergés sur la machine de l'utilisateur.

J'espère que ça aide, Rob

3
robertp

Dans le fichier manifeste, assurez-vous de référencer votre fichier jquery.js local (quel que soit son nom) dans le content_scripts bloquer:

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

Cela garantira qu'il est intégré dans le fichier crx et sera accessible à vos autres scripts.

0
Archer