devtools.inspectedWindow.eval()

Das Skript erhält Zugriff auf eine Reihe von Objekten, die dem eingespritzten Skript helfen, mit den Entwicklertools zu interagieren. Die folgenden Helfer werden derzeit unterstützt:

$0

Enthält eine Referenz auf das Element, das derzeit im DevTools-Inspektor ausgewählt ist.

inspect()

Gibt ein Objekt, falls es sich um ein DOM-Element auf der Seite handelt, wählt es im DevTools-Inspektor aus, andernfalls wird eine Objektvorschau in der Konsole erstellt.

Sehen Sie sich einige Beispiele an.

expression

string. Der JavaScript-Ausdruck, der ausgewertet werden soll. Der String muss sich zu einem Objekt auswerten lassen, das als JSON dargestellt werden kann, andernfalls wird eine Ausnahme ausgelöst. Zum Beispiel darf expression sich nicht zu einer Funktion auswerten.

options Optional

object. Optionen für die Funktion (beachten Sie, dass Firefox diese Optionen noch nicht unterstützt), wie folgt:

frameURL Optional

string. Die URL des Frames, in dem der Ausdruck ausgewertet werden soll. Wenn dies ausgelassen wird, wird der Ausdruck im Hauptframe des Fensters ausgewertet.

useContentScriptContext Optional

boolean. Wenn true, wird der Ausdruck im Kontext der Inhalts-Skripte ausgewertet, die diese Erweiterung der Seite hinzugefügt hat. Wenn Sie diese Option festlegen, müssen tatsächlich einige Inhalts-Skripte der Seite hinzugefügt worden sein, sonst wird eine DevTools-Fehlermeldung ausgelöst.

contextSecurityOrigin Optional

string. Wertet den Ausdruck im Kontext eines Inhalts-Skripts aus, das von einer anderen Erweiterung hinzugefügt wurde, deren Ursprung hier angegebenen Wert entspricht. Dies überschreibt useContentScriptContext.

Ein Promise, das mit einem array erfüllt wird, das zwei Elemente enthält.

Wenn kein Fehler aufgetreten ist, enthält Element 0 das Ergebnis der Auswertung des Ausdrucks und Element 1 ist undefined.

Wenn ein Fehler aufgetreten ist, ist Element 0 undefined, und Element 1 enthält ein Objekt mit Details über den Fehler. Es werden zwei verschiedene Arten von Fehlern unterschieden:

• Fehler bei der Auswertung des JavaScripts (zum Beispiel Syntaxfehler im Ausdruck). In diesem Fall enthält Element 1:

  • eine boolesche Eigenschaft isException, die auf true gesetzt ist
  • eine String-Eigenschaft value, die weitere Details angibt.

• Andere Fehler (zum Beispiel ein Ausdruck, der zu einem Objekt ausgewertet wird, das nicht als JSON dargestellt werden kann). In diesem Fall enthält Element 1:

  • eine boolesche Eigenschaft isError, die auf true gesetzt ist
  • eine String-Eigenschaft code, die einen Fehlercode enthält.

Dies testet, ob jQuery im inspizierten Fenster definiert ist, und protokolliert das Ergebnis. Beachten Sie, dass dies in einem Inhalts-Skript nicht funktionieren würde, da selbst wenn jQuery definiert wäre, das Inhalts-Skript es nicht sehen würde.

function handleError(error) {
  if (error.isError) {
    console.log(`DevTools error: ${error.code}`);
  } else {
    console.log(`JavaScript error: ${error.value}`);
  }
}

function handleResult(result) {
  console.log(result);
  if (result[0] !== undefined) {
    console.log(`jQuery: ${result[0]}`);
  } else if (result[1]) {
    handleError(result[1]);
  }
}

const checkJQuery = "typeof jQuery !== 'undefined'";

evalButton.addEventListener("click", () => {
  browser.devtools.inspectedWindow.eval(checkJQuery).then(handleResult);
});

Dies verwendet den $0-Helfer, um die Hintergrundfarbe des im Inspektor ausgewählten Elements festzulegen:

const evalButton = document.querySelector("#reddinate");
const evalString = "$0.style.backgroundColor = 'red'";

function handleError(error) {
  if (error.isError) {
    console.log(`DevTools error: ${error.code}`);
  } else {
    console.log(`JavaScript error: ${error.value}`);
  }
}

function handleResult(result) {
  if (result[1]) {
    handleError(result[1]);
  }
}

evalButton.addEventListener("click", () => {
  browser.devtools.inspectedWindow.eval(evalString).then(handleResult);
});

Dies verwendet den inspect()-Helfer, um das erste <h1> Element auf der Seite auszuwählen:

const inspectButton = document.querySelector("#inspect");
const inspectString = "inspect(document.querySelector('h1'))";

function handleError(error) {
  if (error.isError) {
    console.log(`DevTools error: ${error.code}`);
  } else {
    console.log(`JavaScript error: ${error.value}`);
  }
}

function handleResult(result) {
  if (result[1]) {
    handleError(result[1]);
  }
}

inspectButton.addEventListener("click", () => {
  browser.devtools.inspectedWindow.eval(inspectString).then(handleResult);
});