Wie verwende ich jquery in der Google Chrome-Erweiterungsseitenaktion background.js?

Ich entwickle eine Google Chrome-Erweiterung “Seitenaktion”. Mein Manifest hat:

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

In meiner background.js-Datei habe ich:

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

chrome.pageAction.onClicked.addListener(doSomething);

Das funktioniert. Jetzt in meiner doSomething Funktion Ich möchte einige Daten auf der aktuellen Seite lesen. Es wird für mich viel einfacher sein, jquery zum Lesen der Daten zu verwenden, sodass ich problemlos genau auf die gewünschten Daten abzielen kann. Wie kann ich jquery (vorzugsweise von Googles CDN bereitgestellt) integrieren, damit es für meine zugänglich ist doSomething Funktion?

Das "background" Spezifikation ein manifest.json angeben soll jquery.js damit es vorher geladen wird background.js:

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

Dies sollte die Arbeit erledigen.
Denken Sie daran, dass die js-Dateien in der angegebenen Reihenfolge geladen werden.

testen, ob jquery geladen ist.

in background.js

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

Ich weiß nicht, ob dies der ideale Weg ist, aber ich konnte es mithilfe dieser Frage zum Laufen bringen: Google Chrome Extensions: How to include jQuery in programatically injection content script?.

Anscheinend kann eine “Hintergrund”-Javascript-Seite nicht auf das DOM einer Webseite im Browser zugreifen, sodass das Laden von jquery im Hintergrundskript nicht wirklich sinnvoll ist. Stattdessen habe ich das Hintergrundskript programmgesteuert injizieren die jQuery-Bibliothek und dann das Inhaltsskript in die aktuelle Webseite. Das Inhaltsskript (im Gegensatz zum Hintergrundskript) kann Zugriff auf Informationen auf der Webseite.

hintergrund.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);

Mein Verständnis ist, dass es nicht notwendig ist, background.js zu verwenden. Sie können Ihren Code stattdessen in popup.js haben. Daher müssen Sie auch nichts in die Manifestdatei aufnehmen.

Ich würde vorschlagen, das jQuery JS und Ihre popup.js in Ihre popup.html aufzunehmen:

<script src="https://stackoverflow.com/js/jquery-1.8.1.min.js"></script>
<script src="/js/popup.js"></script>

Dann sollten Sie in popup.js auf jQuery zugreifen können, sodass Ihr eventHandler so aussehen würde:

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

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

Ich denke nicht, warum Sie CDN für jQuery wollen, alle Dateien werden auf dem Computer des Benutzers gehostet.

Ich hoffe, es hilft, Rob

Stellen Sie in der Manifestdatei sicher, dass Sie auf Ihre lokale jquery.js-Datei (wie auch immer sie heißt) in der content_scripts Block:

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

Dadurch wird sichergestellt, dass es in die crx-Datei eingebettet und für Ihre anderen Skripts zugänglich ist.