Wie verwendet man jquery in Google Chrome Erweiterung Seite Aktion background.js?

Entwickle ich ein "page-Aktion" google-chrome-Erweiterung. Meine manifest hat:

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

In meinem background.js Datei habe ich:

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

chrome.pageAction.onClicked.addListener(doSomething);

Dieser funktioniert. Jetzt in meinem doSomething - Funktion, die ich Lesen möchte einige Daten auf der aktuellen Seite. Es wird viel einfacher für mich, um jquery verwenden, um Daten zu Lesen, so kann ich einfach Ziel, die genauen Daten, die ich möchte. Wie kann ich integrieren jquery (bevorzugt serviert von Googles CDN), so dass es zugänglich für meine doSomething Funktion?

InformationsquelleAutor der Frage User | 2012-10-25

  1. 50

    Den "background" Spezifikation in manifest.json sollten angeben jquery.js so, dass es geladen wird, bevor background.js:

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

    Dieser sollte den job tun.

    Denken Sie daran, die js-Dateien werden geladen, in der Reihenfolge, wie Sie angegeben sind.

    testen, ob jquery geladen wird.

    in background.js

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

    InformationsquelleAutor der Antwort Jaydeep

  2. 9

    Ich weiß nicht, ob das der ideale Weg ist, aber ich war in der Lage, um es arbeiten mit Hilfe von dieser Frage: Google Chrome-Erweiterungen: How to jQuery in ein Programm injiziert Inhalt Skript?.

    Anscheinend ein "hintergrund" - javascript-Seite keinen Zugriff auf das DOM einer Webseite in den browser, damit das laden von jquery nicht wirklich Sinn machen, im hintergrund Schrift. Stattdessen habe ich die Hintergrundfarbe Skript programmatisch injizieren die jQuery-Bibliothek und dann das content-Skript in der aktuellen Webseite. Der Inhalt Skript (im Gegensatz zu den hintergrund-Skript) kann access info auf der Webseite.

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

    InformationsquelleAutor der Antwort User

  3. 3

    Mein Verständnis ist, dass es nicht notwendig ist, zu verwenden background.js. Sie können den code in popup.js statt. Daher brauchen Sie sich nicht zu enthalten, was in der manifest-Datei.

    Ich würde vorschlagen, gehören die jQuery-JS und Ihr popup.js in Ihrem popup.html:

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

    Dann in popup.js Sie sollten in der Lage sein zugreifen, jQuery, so dass Ihre eventHandler könnte so Aussehen:

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

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

    Glaube ich nicht, warum Sie wollen, CDN für jQuery, alle Dateien werden gehostet auf der Maschine des Benutzers.

    Ich hoffe es hilft,
    Rob

    InformationsquelleAutor der Antwort robertp

  4. 0

    In der manifest-Datei, stellen Sie sicher, dass Sie auf Ihrem lokalen jquery.js Datei (was auch immer es heißt) in der content_scripts block:

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

    Die sicherstellen, dass es ist eingebettet in die crx-Datei und wird zugänglich sein, um Ihre anderen scripts.

    InformationsquelleAutor der Antwort Archer

Schreibe einen Kommentar