devtools.inspectedWindow.eval()

Helfer

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

$0

Beinhaltet eine Referenz zu dem Element, das aktuell im Devtools Inspector ausgewählt ist.

inspect()

Wenn ein Objekt übergeben wird und es sich um ein DOM-Element auf der Seite handelt, wird es im Devtools Inspector 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 (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 Haupt-Frame des Fensters ausgewertet.

useContentScriptContext Optional

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

contextSecurityOrigin Optional

string. Wertet den Ausdruck im Kontext eines Inhaltsskripts aus, das von einer anderen Erweiterung angehängt wurde, deren Ursprung mit dem hier gegebenen Wert übereinstimmt. Dies überschreibt useContentScriptContext.

Rückgabewert

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

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, das Details über den Fehler gibt. Zwei verschiedene Arten von Fehlern werden unterschieden:

• Fehler, die beim Auswerten des JavaScripts aufgetreten sind (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 gibt.

• 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.

Beispiele

Dies 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 es selbst dann nicht sehen würde, wenn jQuery 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);
});

Helfer-Beispiele

Dies nutzt den $0 Helfer, um die Hintergrundfarbe des Elements festzulegen, das aktuell 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 nutzt 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