Comment utiliser jquery dans Google chrome extension page Action background.js?

je développe une extension google chrome. Mon manifeste a: 

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

dans mon arrière-plan.fichier js que j'ai: 

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

chrome.pageAction.onClicked.addListener(doSomething);

ça marche. Maintenant dans ma fonction doSomething je veux lire quelques données sur la page courante. Il sera beaucoup plus facile pour moi d'utiliser jquery pour lire les données afin que je puisse cibler facilement les données que je veux. Comment puis-je incorporer jquery (préférablement servi à partir du CDN de google) de sorte qu'il est accessible à ma fonction doSomething ?

27
demandé sur hippietrail 2012-10-25 12:52:38

4 réponses

la spécification "background" dans manifest.json devrait préciser jquery.js de sorte qu'elle soit chargée avant background.js : 

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

ça devrait faire l'affaire.

Rappelez-vous que les fichiers js sont chargés dans l'ordre spécifié.

essai si jquery est chargé.

en arrière-plan.js 

if (jQuery) {  
    // jQuery loaded
} else {
    // jQuery not loaded
}
51
répondu Jaydeep 2016-04-15 17:53:16

Je ne sais pas si c'est la façon idéale, mais j'ai été en mesure de le faire fonctionner à l'aide de l'aide de cette question: Extensions Google Chrome: Comment inclure jQuery dans script de contenu injecté de façon programmatique? .

apparemment une page javascript "background" ne peut pas accéder au DOM d'une page Web dans le navigateur de sorte que le chargement de jquery n'a pas vraiment de sens dans le script background. Au lieu de cela, j'ai le script d'arrière-plan programmatically inject la bibliothèque jQuery et ensuite le script de contenu dans la page Web actuelle. Le script de contenu (contrairement au script d'arrière-plan) can accéder à l'information sur la page web.

"1519130920 d'arrière-plan".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);

du contenu.js 

var text = jQuery('h1').text();
alert('inside content! ' + text);
9
répondu User 2017-05-23 12:09:26

Ma compréhension est qu'il n'est pas nécessaire pour utiliser le fond.js. Vous pouvez avoir votre code dans popup.js à la place. Par conséquent, vous n'aurez pas besoin de tout inclure dans le fichier manifeste.

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

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

puis popup.js vous devriez être en mesure d'accéder à jQuery, de sorte que votre eventHandler ressemblerait à 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 aidera, Rob

3
répondu robertp 2012-10-25 09:03:46

dans le fichier manifeste, assurez-vous de faire référence à votre jquery local.fichier js (quel que soit son nom) dans le bloc content_scripts : 

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

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

0
répondu Archer 2012-10-25 09:18:33