chrome.devtools.inspectedWindow

Opis

Użyj interfejsu API chrome.devtools.inspectedWindow, aby wejść w interakcję z sprawdzanym oknem: uzyskaj identyfikator karty dla sprawdzanej strony, oceń kod w kontekście sprawdzanego okna, załaduj ponownie stronę lub pobierz listę zasobów na stronie.

Zapoznaj się z podsumowaniem interfejsów API Narzędzi deweloperskich, aby uzyskać ogólne wprowadzenie do korzystania z interfejsów API narzędzi dla programistów.

Właściwość tabId udostępnia identyfikator karty, którego możesz użyć razem z chrome.tabs.*. Wywołania interfejsu API. Pamiętaj jednak, że interfejs chrome.tabs.* API nie jest dostępny dla narzędzi dla programistów. ze względów bezpieczeństwa – musisz przekazać identyfikator karty w tle. i wywoływać z niej funkcje interfejsu API chrome.tabs.*.

Aby ponownie załadować sprawdzaną stronę, można użyć metody reload. Dodatkowo rozmówca może określić zastąpiono ciąg znaków klienta użytkownika, skrypt, który zostanie wstawiony przed wczytaniem strony; wymuszania ponownego załadowania zasobów pamięci podręcznej.

Użyj wywołania getResources i zdarzenia onResourceContent, aby uzyskać listę zasobów (dokumenty, arkusze stylów, skrypty, obrazy itp.) na sprawdzanej stronie. getContent i Metody setContent klasy Resource wraz ze zdarzeniem onResourceContentCommitted mogą mogą być używane do modyfikowania treści zasobów, na przykład przez edytora zewnętrznego.

Plik manifestu

Aby używać tego interfejsu API, należy zadeklarować te klucze w pliku manifestu.

"devtools_page"

Wykonaj kod w sprawdzanym oknie

Metoda eval umożliwia rozszerzeniom wykonanie kodu JavaScript w kontekście badaną stronę. Ta metoda jest skuteczna, kiedy jest używana we właściwym kontekście, i niebezpieczna, kiedy jest używana niewłaściwie. Używaj metody tabs.executeScript, chyba że potrzebujesz konkretnej funkcji które zapewnia metoda eval.

Oto główne różnice między metodami eval i tabs.executeScript:

  • Metoda eval nie korzysta z osobnego świata dla ocenianego kodu, więc JavaScript stan sprawdzanego okna jest dostępny dla kodu. Użyj tej metody, gdy masz dostęp do Stan JavaScriptu sprawdzanej strony jest wymagany.
  • Kontekst wykonywania ocenianego kodu obejmuje interfejs API konsoli narzędzi dla programistów. Na przykład kod może zawierać elementy inspect i $0.
  • Sprawdzany kod może zwrócić wartość, która jest przekazywana do wywołania zwrotnego rozszerzenia. Zwrócona wartość musi być prawidłowym obiektem JSON (może zawierać tylko proste typy JavaScript i acykliczne odwołania do innych obiektów JSON). Zachowaj szczególną ostrożność podczas przetwarzania otrzymanych danych ze sprawdzanej strony – kontekst wykonania jest zasadniczo kontrolowany przez sprawdzaną stronę; w może mieć wpływ na dane zwracane do rozszerzenia.
.

Pamiętaj, że strona może zawierać wiele różnych kontekstów wykonywania JavaScriptu. Każda ramka ma swoje oraz dodatkowy kontekst dla każdego rozszerzenia, w którym działają skrypty treści. ramki.

Domyślnie metoda eval jest wykonywana w kontekście głównej ramki sprawdzanej strony.

Metoda eval przyjmuje opcjonalny drugi argument, którego można użyć do określenia kontekstu, w którym gdy kod jest sprawdzany. Ten obiekt options może zawierać jeden lub więcej z tych kluczy:

frameURL
Służy do określania ramki innej niż ramka główna sprawdzanej strony.
contextSecurityOrigin
Służą do wybierania kontekstu w określonej ramce na podstawie jej źródła z internetu.
useContentScriptContext
Jeśli wybrano opcję prawda, skrypt należy uruchamiać w tym samym kontekście co skrypty treści rozszerzeń. (Odpowiednik określając własny orgin internetowy rozszerzenia jako źródło zabezpieczeń kontekstu). Pozwala to na: i wymiany danych ze skryptem treści.

Przykłady

Ten kod sprawdza wersję biblioteki jQuery używaną przez sprawdzaną stronę:

chrome.devtools.inspectedWindow.eval(
  "jQuery.fn.jquery",
  function(result, isException) {
    if (isException) {
      console.log("the page is not using jQuery");
    } else {
      console.log("The page is using jQuery v" + result);
    }
  }
);

Aby wypróbować ten interfejs API, zainstaluj przykłady interfejsu API devtools ze strony chrome-extension-samples. z repozytorium.

Typy

Resource

Zasób na sprawdzanej stronie, np. dokument, skrypt lub obraz.

Właściwości

  • URL

    ciąg znaków

    Adres URL zasobu.

  • getContent

    nieważne

    Pobiera zawartość zasobu.

    Funkcja getContent wygląda tak: 

    (callback: function) => {...}
    .

    • wywołanie zwrotne

      funkcja

      Parametr callback wygląda tak: 

      (content: string, encoding: string) => void
      .

      • treść

        ciąg znaków

        Zawartość zasobu (potencjalnie zakodowana).

      • kodowanie

        ciąg znaków

        Pole puste, jeśli treść nie jest zakodowana. W przeciwnym razie nazwa kodowania. Obecnie obsługiwany jest tylko format base64.

  • setContent

    nieważne

    Ustawia zawartość zasobu.

    Funkcja setContent wygląda tak: 

    (content: string, commit: boolean, callback?: function) => {...}
    .

    • treść

      ciąg znaków

      Nowa treść zasobu. Obecnie obsługiwane są tylko zasoby z typem tekstowym.

    • zatwierdź

      wartość logiczna

      Prawda, jeśli użytkownik zakończył edytowanie zasobu i powinna zostać zachowana nowa zawartość zasobu. false, jeśli jest to niewielka zmiana wysyłana w toku przez użytkownika edytującego zasób.

    • wywołanie zwrotne

      funkcja optional

      Parametr callback wygląda tak: 

      (error?: object) => void
      .

      • błąd

        obiekt opcjonalny

        Ustawiono niezdefiniowaną wartość, jeśli treść zasobu została ustawiona. opisuje błąd w inny sposób.

Właściwości

tabId

Identyfikator sprawdzanej karty. Tego identyfikatora można używać z chrome.tabs.* a także przy użyciu Google Cloud CLI lub Compute Engine API.

Typ

liczba

Metody

eval()

chrome.devtools.inspectedWindow.eval(
  expression: string,
  options?: object,
  callback?: function,
)

Analizuje wyrażenie JavaScript w kontekście głównej ramki badanej strony. Wyrażenie musi wskazywać obiekt zgodny z JSON. W przeciwnym razie zostanie zgłoszony wyjątek. Funkcja oceny może zgłosić błąd po stronie Narzędzi deweloperskich lub wyjątek JavaScriptu, który występuje podczas oceny. W obu przypadkach parametr result wywołania zwrotnego to undefined. W przypadku błędu po stronie Narzędzi deweloperskich parametr isException ma wartość inną niż null, a isError ma wartość true (prawda), a code – kod błędu. W przypadku błędu JavaScriptu atrybut isException ma wartość prawda, a value jako ciąg znaków zgłoszonego obiektu.

Parametry

  • wyrażenie

    ciąg znaków

    Wyrażenie do oceny.

  • Opcje

    obiekt opcjonalny

    Parametr options może zawierać jedną lub więcej opcji.

    • frameURL

      ciąg znaków opcjonalny

      Jeśli określisz wyrażenie, jest ono sprawdzane w elemencie iframe, którego adres URL pasuje do podanego adresu. Domyślnie wyrażenie jest sprawdzane w górnej ramce sprawdzanej strony.

    • scriptExecutionContext

      ciąg znaków opcjonalny

      Chrome 107 i nowsze wersje

      Oceń wyrażenie w kontekście skryptu treści rozszerzenia, które pasuje do określonego źródła. Jeśli jest podana, ScriptExecutionContext zastępuje wartość „true” w sekcji useContentScriptContext.

    • useContentScriptContext

      Wartość logiczna opcjonalna

      Oceń wyrażenie w kontekście skryptu treści rozszerzenia wywołującego, o ile skrypt treści jest już wstrzyknięty do sprawdzanej strony. W przeciwnym razie wyrażenie nie jest sprawdzane i wywołanie wywołania zwrotnego z parametrem wyjątku ustawionym dla obiektu, którego pole isError ma wartość true, a pole code ma wartość E_NOTFOUND.

  • wywołanie zwrotne

    funkcja optional

    Parametr callback wygląda tak: 

    (result: object, exceptionInfo: object) => void
    .

    • wynik

      Obiekt

      Wynik oceny.

    • exceptionInfo

      Obiekt

      Obiekt ze szczegółowymi informacjami o tym, czy podczas oceny wyrażenia wystąpił wyjątek.

      • kod

        ciąg znaków

        Ustaw, jeśli błąd wystąpił po stronie Narzędzi deweloperskich przed sprawdzeniem wyrażenia.

      • opis

        ciąg znaków

        Ustaw, jeśli błąd wystąpił po stronie Narzędzi deweloperskich przed sprawdzeniem wyrażenia.

      • szczegóły

        dowolne[]

        Ustaw, jeśli błąd wystąpił po stronie Narzędzi deweloperskich przed sprawdzeniem wyrażenia. Zawiera tablicę wartości, które można wstawić w ciągu opisu, aby dostarczyć więcej informacji o przyczynie błędu.

      • isError

        wartość logiczna

        Ustaw, jeśli błąd wystąpił po stronie Narzędzi deweloperskich przed sprawdzeniem wyrażenia.

      • isException

        wartość logiczna

        Ustaw, jeśli sprawdzany kod generuje nieobsługiwany wyjątek.

      • wartość

        ciąg znaków

        Ustaw, jeśli sprawdzany kod generuje nieobsługiwany wyjątek.

getResources()

chrome.devtools.inspectedWindow.getResources(
  callback: function,
)

Pobiera listę zasobów ze sprawdzanej strony.

Parametry

  • wywołanie zwrotne

    funkcja

    Parametr callback wygląda tak: 

    (resources: Resource[]) => void
    .

    • zasoby

      Zasób[]

      Zasoby na stronie.

reload()

chrome.devtools.inspectedWindow.reload(
  reloadOptions?: object,
)

Wczytuje ponownie sprawdzaną stronę.

Parametry

  • reloadOptions

    obiekt opcjonalny

    • ignoreCache

      Wartość logiczna opcjonalna

      Jeśli zasada ma wartość prawda, program ładujący pomija pamięć podręczną wszystkich sprawdzanych zasobów strony wczytywanych przed wywołaniem zdarzenia load. Efekt jest podobny do skrótu Ctrl + Shift + R w sprawdzanym oknie lub w oknie narzędzi dla programistów.

    • injectedScript

      ciąg znaków opcjonalny

      Jeśli określisz skrypt, zostanie on wstawiony do każdej ramki sprawdzanej strony tuż po wczytaniu, przed jakimkolwiek skryptem ramki. Skrypt nie zostanie wstrzykiwany po kolejnych odświeżeniach, np. jeśli użytkownik naciśnie klawisze Ctrl + R.

    • userAgent

      ciąg znaków opcjonalny

      Jeśli zostanie określony, ciąg znaków zastąpi wartość nagłówka HTTP User-Agent wysłanego podczas wczytywania zasobów sprawdzanej strony. Ciąg znaków zastąpi też wartość właściwości navigator.userAgent, która jest zwracana do wszystkich skryptów działających na sprawdzanej stronie.

Wydarzenia

onResourceAdded

chrome.devtools.inspectedWindow.onResourceAdded.addListener(
  callback: function,
)

Uruchamiane po dodaniu nowego zasobu do sprawdzanej strony.

Parametry

  • wywołanie zwrotne

    funkcja

    Parametr callback wygląda tak: 

    (resource: Resource) => void
    .

onResourceContentCommitted

chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(
  callback: function,
)

Uruchamiane po zatwierdzeniu nowej wersji zasobu (np. użytkownik zapisze zmodyfikowaną wersję zasobu w Narzędziach dla programistów).

Parametry

  • wywołanie zwrotne

    funkcja

    Parametr callback wygląda tak: 

    (resource: Resource, content: string) => void
    .

    • zasób

      Zasób

    • treść

      ciąg znaków