devtools.inspectedWindow.eval()

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

$0

Enthält eine Referenz auf das momentan im DevTools-Inspektor ausgewählte Element.

inspect()

Gibt bei einem Objekt, wenn es sich um ein DOM-Element auf der Seite handelt, dieses im DevTools-Inspektor an, andernfalls wird eine Objektvorschau in der Konsole erstellt.

Siehe einige Beispiele.

expression

String. Der JavaScript-Ausdruck, der ausgewertet werden soll. Die Zeichenkette muss sich zu einem Objekt auswerten, das als JSON dargestellt werden kann, sonst wird eine Ausnahme ausgelöst. Beispielsweise darf sich expression 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 dieses weggelassen wird, wird der Ausdruck im Hauptframe des Fensters ausgewertet.

useContentScriptContext Optional

Boolean. Wenn true, wird der Ausdruck im Kontext von Inhaltsskripten ausgewertet, die diese Erweiterung an die Seite angehängt hat. Wenn Sie diese Option setzen, müssen tatsächlich einige Inhaltsskripte an die Seite angehängt worden sein, sonst wird ein DevTools-Fehler ausgelöst.

contextSecurityOrigin Optional

String. Der Ausdruck wird im Kontext eines Inhaltsskripts ausgewertet, das von einer anderen Erweiterung angehängt wurde und dessen Ursprung mit dem hier angegebenen Wert übereinstimmt. Dies überschreibt useContentScriptContext.

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

Wenn kein Fehler aufgetreten ist, wird Element 0 das Ergebnis der Auswertung des Ausdrucks enthalten und Element 1 wird undefined sein.

Wenn ein Fehler aufgetreten ist, wird Element 0 undefined sein, und Element 1 wird ein Objekt enthalten, das Details über den Fehler gibt. Zwei verschiedene Fehlerarten werden unterschieden:

• Fehler, die bei der Auswertung des JavaScripts aufgetreten sind (z.B. Syntaxfehler im Ausdruck). In diesem Fall wird Element 1 folgendes enthalten:

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

• andere Fehler (z.B. ein Ausdruck, der zu einem Objekt ausgewertet wird, das nicht als JSON dargestellt werden kann). In diesem Fall wird Element 1 folgendes enthalten:

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

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

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

Dieses Beispiel verwendet den $0-Helfer, um die Hintergrundfarbe des Elements festzulegen, das momentan im Inspektor ausgewählt ist:

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

Dieses Beispiel 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);
});