wake-up-neo.com

tabs.executeScript - Übergeben von Parametern und Verwenden von Bibliotheken?

Ich schreibe eine Chrome-Erweiterung, die Seiten in einer bestimmten Domain gemäß einem bestimmten Parameter ändern muss, für den XSS erforderlich ist, sodass die einfache Verwendung eines Inhaltsskripts unmöglich erscheint. Daher habe ich beschlossen, das Skript mithilfe von tabs.executeScript einzufügen.

Jetzt muss ich zwei Dinge wissen: Erstens, wie kann ich bei der Verwendung von executeScript Parameter an das Skript übergeben? Ich vermute, ich kann Nachrichten verwenden, aber gibt es keine direktere Möglichkeit, den Parameter beim Einfügen des Skripts zu übergeben?

Zweitens verwendet mein Skript jQuery, sodass ich jQuery irgendwie einbinden muss. Es ist albern, aber ich bin mir nicht sicher, wie ich es machen soll. Bisher habe ich jQuery in die HTML-Seite eingebettet, die ich geschrieben habe (zum Beispiel background.html).

26
Gadi A

Wenn Sie kein Messaging verwenden möchten, dann:

chrome.tabs.executeScript(tabId, {file: "jquery.js"}, function(){
    chrome.tabs.executeScript(tabId, {code: "var scriptOptions = {param1:'value1',param2:'value2'};"}, function(){
        chrome.tabs.executeScript(tabId, {file: "script.js"}, function(){
            //all injected
        });
    });
});

(jquery.js sollte im Erweiterungsordner abgelegt werden). Skriptoptionen stehen in der Variable scriptOptions im script.js zur Verfügung.

Mit Messaging ist es genauso einfach:

chrome.tabs.executeScript(tabId, {file: "jquery.js"}, function(){
    chrome.tabs.executeScript(tabId, {file: "script.js"}, function(){
        chrome.tabs.sendMessage(tabId, {scriptOptions: {param1:'value1',param2:'value2'}}, function(){
            //all injected
        });
    });
});

Sie müssen einen Anforderungslistener zu script.js hinzufügen:

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    var scriptOptions = message.scriptOptions;
    console.log('param1', scriptOptions.param1);
    console.log('param2', scriptOptions.param2);
    doSomething(scriptOptions.param1, scriptOptions.param2);
});
48
serg

Aufbauend auf der direkten Methode oben konnte ich Code direkt aus dem Hintergrundskript meiner Chrome-Erweiterung in eine neue Registerkarte einfügen. Beachten Sie jedoch, dass der Codeabschnitt des Befehls executeScript nicht nur Variablen, sondern nur eine Zeichenfolge verwendet. Nach dem Experimentieren habe ich daher festgestellt, dass wir zuvor die Befehlsfolge einrichten und die gewünschten Variablen einfügen müssen. So was:

var sendCode = 'document.getElementsByClassName("form-control n-gram")[0].value = "' + TMObj.brand + '";';

var TMUrl = "http://website.com";
chrome.tabs.create({ url: TMUrl }, function(tab){
            chrome.tabs.executeScript(null, {code: sendCode});
      });
});

Das hat gut funktioniert!

1
UltimatePeter

Bessere Möglichkeit, Abhängigkeiten aufzunehmen

Fügen Sie die abhängigen Bibliotheken (und andere JS-Dateien) den Hintergrundskripten in Ihrem manifest.json hinzu, indem Sie: 

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

Listen Sie die Abhängigkeiten vor dem App-Code auf, damit sie zuvor geladen werden.

Referenz: Hintergrundskripte registrieren

Hinweis: Dies würde ein eifrigeres Laden der Skripte bewirken, anstatt wie bei executeScript faul zu laden.

0
vedant