devtools.inspectedWindow.eval()

Helfer

Das Skript hat Zugriff auf eine Reihe von Objekten, die dem eingeschleusten 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()

Wenn ein Objekt übergeben wird und es sich um ein DOM-Element auf der Seite handelt, wird es im Devtools-Inspektor ausgewählt, andernfalls wird eine Vorschau des Objekts 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. Beispielsweise darf expression nicht zu einer Funktion ausgewertet werden.

options Optional

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

frameURL Optional

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

useContentScriptContext Optional

boolean. Wenn true, führen Sie den Ausdruck im Kontext von etwaigen Inhaltsskripten aus, 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 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 über den Fehler gibt. Es werden zwei verschiedene Arten von Fehlern unterschieden:

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

  • eine boolesche Eigenschaft isException, auf true gesetzt
  • 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 wird Element 1 enthalten:

  • eine boolesche Eigenschaft isError, auf true gesetzt
  • 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 jQuery selbst bei dessen Definition 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 festzulegen, 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