chrome.declarativeContent

Opis

Interfejs API chrome.declarativeContent umożliwia wykonywanie działań w zależności od treści strony bez wymagania uprawnień do jej odczytu.

Uprawnienia

declarativeContent

Pojęcia i wykorzystanie

Interfejs Deklaratywnej treści API umożliwia włączenie działania rozszerzenia w zależności od adresu URL lub jeśli selektor arkusza CSS pasuje do elementu na stronie, bez konieczności dodaj uprawnienia hosta lub wstaw skrypt treści.

Używaj uprawnienia activeTab, aby po kliknięciu przez użytkownika działania rozszerzenia.

Reguły

Reguły składają się z warunków i działań. Jeśli dowolny z warunków jest spełniony, wszystkie działania zostaną . Te działania to setIcon() i showAction().

Znak PageStateMatcher pasuje do stron internetowych tylko wtedy, gdy wszystkie na liście są wymienione kryteria. Może pasować do adresu URL strony, złożonego selektora CSS czy stan strony dodany do zakładek. Poniższa reguła umożliwia włączenie działanie rozszerzenia na stronach Google, gdy jest obecne pole hasła:

let rule1 = {
  conditions: [
    new chrome.declarativeContent.PageStateMatcher({
      pageUrl: { hostSuffix: '.google.com', schemes: ['https'] },
      css: ["input[type='password']"]
    })
  ],
  actions: [ new chrome.declarativeContent.ShowAction() ]
};

Aby umożliwić działanie rozszerzenia także w przypadku witryn Google z filmem, możesz dodać drugi element , bo każdy z nich jest wystarczający do wywołania wszystkich określonych działań:

let rule2 = {
  conditions: [
    new chrome.declarativeContent.PageStateMatcher({
      pageUrl: { hostSuffix: '.google.com', schemes: ['https'] },
      css: ["input[type='password']"]
    }),
    new chrome.declarativeContent.PageStateMatcher({
      css: ["video"]
    })
  ],
  actions: [ new chrome.declarativeContent.ShowAction() ]
};

Zdarzenie onPageChanged sprawdza, czy jakakolwiek reguła ma co najmniej 1 spełniony warunek i wykonuje działania. Reguły utrzymują się przez cały czas trwania sesji przeglądania. dlatego podczas i wydłużenie czasu instalacji. W tym celu użyj najpierw narzędzia removeRules, aby wyczyścić wcześniej zainstalowane reguły, a następnie użyj metody addRules do zarejestrowania nowych.

chrome.runtime.onInstalled.addListener(function(details) {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([rule2]);
  });
});

Z uprawnieniem activeTab rozszerzenie nie wyświetla żadnych uprawnień a gdy użytkownik kliknie działanie rozszerzenia, reklama będzie się wyświetlać tylko na odpowiednich stronach.

Dopasowywanie adresu URL strony

PageStateMatcher.pageurl zostaje dopasowany, gdy spełnione są kryteria adresu URL. najpopularniejsze kryteria to połączenie hosta, ścieżki lub adresu URL, po którym następuje znak „Zawiera”, „Równa się”, „Prefiks” lub Przyrostek. Poniższa tabela zawiera kilka przykładów:

Kryteria Odpowiada
{ hostSuffix: 'google.com' } Wszystkie adresy URL Google
{ pathPrefix: '/docs/extensions' } Adresy URL dokumentów rozszerzeń
{ urlContains: 'developer.chrome.com' } Wszystkie adresy URL dokumentów dla programistów Chrome

Wielkość liter we wszystkich kryteriach ma znaczenie. Pełną listę kryteriów znajdziesz w sekcji UrlFilter.

Dopasowanie CSS

Warunki PageStateMatcher.css muszą być selektorami złożonymi, co oznacza, że nie można używać kombinatorów, takich jak odstępy lub „>”. w selektory. Dzięki temu Chrome może skuteczniej dopasowywać selektory.

Selektory złożone (OK) Złożone selektory (niewłaściwe)
a div p
iframe.special[src^='http'] p>span.highlight
ns|* p + ol
#abcd:checked p::first-line

Warunki CSS pasują tylko do wyświetlanych elementów: jeśli element pasujący do selektora to display:none lub jeden z jego elementów nadrzędnych jest w stanie display:none, nie powoduje, że warunek jest dopasowania. Elementy z atrybutem visibility:hidden, umieszczone poza ekranem lub ukryte przez inne elementy nadal może spełnić warunek.

Dopasowanie stanu do zakładek

Warunek PageStateMatcher.isBookmarked umożliwia dopasowanie parametru stan bieżącego adresu URL w zakładkach w profilu użytkownika Aby użyć tego warunku, „zakładki” musi być zadeklarowana w manifestu rozszerzenia.

Typy

ImageDataType

Więcej informacji znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/API/ImageData.

Typ

ImageData

PageStateMatcher

Dopasowuje stan strony internetowej na podstawie różnych kryteriów.

Właściwości

  • konstruktor

    nieważne

    Funkcja constructor wygląda tak: 

    (arg: PageStateMatcher) => {...}

  • css

    string[] opcjonalnie

    Pasuje, jeśli wszystkie selektory arkusza CSS w tablicy pasują do wyświetlanych elementów w ramce o tym samym pochodzeniu co główna klatka strony. Aby przyspieszyć dopasowywanie, wszystkie selektory w tej tablicy muszą być selektorami złożonymi. Uwaga: podanie setek selektorów arkusza CSS lub wyświetlanie selektorów arkusza CSS, które pasują setki razy na danej stronie, może spowolnić działanie witryny.

  • isBookmarked

    Wartość logiczna opcjonalna

    Chrome w wersji 45 lub nowszej .

    Dopasowuje, jeśli stan strony dodanej do zakładek jest równy określonej wartości. Wymaga uprawnień do tworzenia zakładek.

  • pageUrl

    UrlFilter opcjonalny

    Pasuje, jeśli w przypadku adresu URL najwyższego poziomu strony są spełnione warunki określone w parametrze UrlFilter.

RequestContentScript

Deklaracyjne działanie zdarzenia, które powoduje wstrzyknięcie skryptu treści.

OSTRZEŻENIE: to działanie jest nadal w fazie eksperymentalnej i nie jest obsługiwane w przypadku stabilnych kompilacji Chrome.

Właściwości

  • konstruktor

    nieważne

    Funkcja constructor wygląda tak: 

    (arg: RequestContentScript) => {...}

  • allFrames

    Wartość logiczna opcjonalna

    Określa, czy skrypt treści jest uruchamiany we wszystkich ramkach pasującej strony, czy tylko w górnej ramce. Wartość domyślna to false.

  • css

    string[] opcjonalnie

    Nazwy plików CSS, które mają zostać wstawione w ramach skryptu treści.

  • JS

    string[] opcjonalnie

    Nazwy plików JavaScript, które mają zostać wstawione w ramach skryptu treści.

  • matchAboutBlank

    Wartość logiczna opcjonalna

    Określa, czy skrypt treści ma być wstawiony w elementach about:blank i about:srcdoc. Wartość domyślna to false.

SetIcon

Działanie deklaracyjne, które powoduje ustawienie kwadratowej ikony n-dip dla działania strony lub działania przeglądarki rozszerzenia, gdy odpowiednie warunki są spełnione. Tego działania można użyć bez uprawnień hosta, ale rozszerzenie musi zawierać stronę lub działanie przeglądarki.

Należy podać tylko jedną z tych właściwości: imageData lub path. Oba są słownikami mapującymi liczbę pikseli na reprezentację obrazu. Reprezentacja obrazu w funkcji imageData jest obiektem ImageData. na przykład w elemencie canvas, a reprezentacja obrazu w path to ścieżka do pliku graficznego podana w odniesieniu do pliku manifestu rozszerzenia. Jeśli piksele ekranu o rozmiarze scale pasują do piksela niezależnego od urządzenia, używana jest ikona scale * n. Jeśli brak tej skali, rozmiar innego obrazu zostanie zmniejszony do wymaganego rozmiaru.

Właściwości

  • konstruktor

    nieważne

    Funkcja constructor wygląda tak: 

    (arg: SetIcon) => {...}

  • Dane_obrazów

    ImageData | obiekt opcjonalny

    Obiekt ImageData lub słownik {size -> ImageData} reprezentujące ikonę do ustawienia. Jeśli ikona jest określona jako słownik, użyty obraz jest dobierany w zależności od gęstości pikseli na ekranie. Jeśli liczba pikseli obrazu, które mieszczą się w jednej jednostce miejsca na ekranie, wynosi scale, zostanie wybrany obraz o rozmiarze scale * n, gdzie n to rozmiar ikony w interfejsie. Musisz określić co najmniej jeden obraz. Pamiętaj, że details.imageData = foo jest odpowiednikiem details.imageData = {'16': foo}.

ShowAction

Chrome w wersji 97 lub nowszej .

Deklaratywne działanie zdarzenia, które powoduje, że działanie na pasku narzędzi rozszerzenia jest włączone, gdy są spełnione odpowiednie warunki. Tego działania można użyć bez uprawnień hosta. Jeśli rozszerzenie ma uprawnienie activeTab, kliknięcie działania na stronie zapewnia dostęp do aktywnej karty.

Na stronach, na których te warunki nie zostały spełnione, działanie rozszerzenia na pasku narzędzi będzie wykonywane w skali szarości. Jego kliknięcie powoduje otwarcie menu kontekstowego, a nie wywołanie działania.

Właściwości

ShowPageAction

Wycofane od Chrome 97

Użyj adresu declarativeContent.ShowAction.

Akcja zdarzenia deklaratywnego, która ustawia stan działania strony rozszerzenia na włączone, gdy odpowiednie warunki są spełnione. Tego działania można użyć bez uprawnień hosta, ale rozszerzenie musi zawierać działanie na stronie. Jeśli rozszerzenie ma uprawnienie activeTab, kliknięcie działania na stronie zapewnia dostęp do aktywnej karty.

Na stronach, na których te warunki nie zostały spełnione, działanie rozszerzenia na pasku narzędzi będzie wykonywane w skali szarości. Jego kliknięcie powoduje otwarcie menu kontekstowego, a nie wywołanie działania.

Właściwości

Wydarzenia

onPageChanged

Udostępnia interfejs Deklaratywny interfejs API zdarzeń, który składa się z zasad addRules, removeRules i getRules.

Warunki

PageStateMatcher

Działania

RequestContentScript

SetIcon

ShowPageAction

ShowAction