devtools.inspectedWindow.eval()

Helfer

Das Skript erhält Zugriff auf eine Reihe von Objekten, die dem eingesetzten 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 Entwicklertools-Inspektor ausgewählt ist.

inspect()

Gibt ein Objekt, wenn es sich um ein DOM-Element auf der Seite handelt, wird es im Entwicklertools-Inspektor ausgewählt, andernfalls wird eine Objektvorschau in der Konsole erstellt.

Sehen Sie einige Beispiele.

Syntax

let evaluating = browser.devtools.inspectedWindow.eval(
  expression,       // string
  options           // object
)

Parameter

expression

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

options Optional

object. Optionen für die Funktion (Beachtem 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 weggelassen wird, wird der Ausdruck im Haupt-Frame des Fensters ausgewertet.

useContentScriptContext Optional

boolean. Wenn true, wird der Ausdruck im Kontext von Inhalts-Skripten ausgewertet, die diese Erweiterung an die Seite angehängt hat. Wenn Sie diese Option setzen, müssen Sie tatsächlich einige Inhalts-Skripte an die Seite angehängt haben, oder ein Fehler in den Entwicklertools wird ausgelöst.

contextSecurityOrigin Optional

string. Den Ausdruck im Kontext eines Inhalts-Skripts auswerten, das von einer anderen Erweiterung angehängt wurde, deren Herkunft mit dem hier angegebenen Wert übereinstimmt. Dies überschreibt useContentScriptContext.

Rückgabewert

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 wird undefined sein.

Wenn ein Fehler aufgetreten ist, wird Element 0 undefined sein, und Element 1 wird ein Objekt enthalten, das Details zum Fehler gibt. Zwei verschiedene Arten von Fehlern werden 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 mehr Details gibt.

• andere Fehler (zum Beispiel ein Ausdruck, der sich zu einem Objekt auswertet, 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.

Beispiele

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

Helfer-Beispiele

Dies verwendet den $0-Helfer, um die Hintergrundfarbe des Elements zu setzen, das derzeit 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);
});

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

Browser-Kompatibilität