devtools.inspectedWindow.eval()

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

$0

Enthält eine Referenz zu dem Element, das aktuell im DevTools-Inspector ausgewählt ist.

inspect()

Wenn ein Objekt ein DOM-Element auf der Seite ist, wird es im DevTools-Inspector ausgewählt, 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 zu einem Objekt evaluieren, das als JSON dargestellt werden kann, andernfalls wird eine Ausnahme ausgelöst. Zum Beispiel darf expression nicht zu einer Funktion evaluieren.

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. Falls true, wird der Ausdruck im Kontext von Inhaltskripten ausgewertet, die diese Erweiterung an die Seite angehängt hat. Wenn Sie diese Option setzen, müssen Sie tatsächlich einige Inhaltskripte an die Seite angehängt haben, oder ein DevTools-Fehler wird ausgelöst.

contextSecurityOrigin Optional

string. Bewertet den Ausdruck im Kontext eines Inhaltskripts, das von einer anderen Erweiterung angehängt wurde, deren 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, 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. Zwei verschiedene Arten von Fehlern werden unterschieden:

• Fehler beim Auswerten des JavaScript (zum Beispiel Syntaxfehler im Ausdruck). In diesem Fall enthält Element 1:

  • eine boolesche Eigenschaft isException, gesetzt auf true
  • eine Zeichenketteigenschaft value, die weitere Details gibt.

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

  • eine boolesche Eigenschaft isError, gesetzt auf true
  • eine Zeichenketteigenschaft 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 Inhaltskript nicht funktionieren würde, da selbst wenn jQuery definiert wäre, das Inhaltskript 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 Elements festzulegen, das derzeit im Inspector 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);
});

Dies verwendet den inspect()-Helfer, um das erste <h1>-Element in 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);
});