chrome.declarativeContent

Descrizione

Usa l'API chrome.declarativeContent per intraprendere azioni a seconda dei contenuti di una pagina, senza richiedere l'autorizzazione a leggerne i contenuti.

Autorizzazioni

declarativeContent

Concetti e utilizzo

L'API dichiarativa Content ti consente di attivare l'azione dell'estensione in base all'URL di un pagina web o se un selettore CSS corrisponde a un elemento della pagina, senza Aggiungi autorizzazioni host o inserisci uno script dei contenuti.

Utilizzare l'autorizzazione activeTab per interagire con una pagina dopo che l'utente ha fatto clic sulla dell'estensione.

Regole

Le regole sono composte da condizioni e azioni. Se una qualsiasi delle condizioni è soddisfatta, tutte le azioni vengono eseguito. Le azioni sono setIcon() e showAction().

Il simbolo PageStateMatcher corrisponde alle pagine web se e solo se sono tutte elencate vengono soddisfatti i criteri. Può corrispondere all'URL della pagina o a un selettore composto CSS. o lo stato aggiunto ai preferiti di una pagina. La seguente regola abilita L'azione dell'estensione sulle pagine Google quando è presente un campo per la password:

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

Per attivare l'azione dell'estensione anche per i siti Google con un video, puoi aggiungere un secondo poiché ogni condizione è sufficiente per attivare tutte le azioni specificate:

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

L'evento onPageChanged verifica se una qualsiasi regola ne ha almeno una soddisfatta la condizione ed esegue le azioni. Le regole rimangono valide tra una sessione di navigazione e l'altra; pertanto, durante data e ora di installazione dell'estensione da utilizzare prima di removeRules per cancellare già installate, poi usa addRules per registrarne di nuove.

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

Con l'autorizzazione activeTab, l'estensione non mostrerà alcuna autorizzazione e quando l'utente fa clic sull'azione dell'estensione, quest'ultima viene pubblicata solo sulle pagine pertinenti.

Corrispondenza URL pagina

L'elemento PageStateMatcher.pageurl corrisponde quando vengono soddisfatti i criteri dell'URL. La i criteri più comuni sono una concatenazione di host, percorso o URL, seguiti da Contiene, Uguale a, Prefisso o Suffisso. La tabella seguente contiene alcuni esempi:

Criteri Corrisponde a
{ hostSuffix: 'google.com' } Tutti gli URL di Google
{ pathPrefix: '/docs/extensions' } URL dei documenti delle estensioni
{ urlContains: 'developer.chrome.com' } URL della documentazione di tutti gli sviluppatori di Chrome

Tutti i criteri sono sensibili alle maiuscole. Per un elenco completo dei criteri, consulta UrlFilter.

Corrispondenza CSS

Le condizioni PageStateMatcher.css devono essere selettori composti, vale a dire che non puoi includere combinatori come spazi vuoti o ">" nel tuo selettori. Ciò consente a Chrome di abbinare i selettori in modo più efficiente.

Selettori composti (OK) Selettori complessi (non OK)
a div p
iframe.special[src^='http'] p>span.highlight
ns|* p + ol
#abcd:checked p::first-line

Le condizioni CSS corrispondono solo agli elementi visualizzati: se un elemento che corrisponde al tuo selettore è display:none o uno degli elementi principali è display:none, non fa sì che la condizione corrispondono. Elementi con stile visibility:hidden, posizionati fuori dallo schermo o nascosti da altri elementi può comunque far corrispondere la condizione.

Corrispondenza stato aggiunto ai preferiti

La condizione PageStateMatcher.isBookmarked consente la corrispondenza del stato aggiunto ai preferiti dell'URL corrente nel profilo dell'utente. Per utilizzare questa condizione, "preferiti" deve essere dichiarata nel manifest dell'estensione.

Tipi

Tipo

ImageData

PageStateMatcher

Corrisponde allo stato di una pagina web in base a vari criteri.

Proprietà

  • costruttore

    null

    La funzione constructor ha questo aspetto: 

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

  • css

    string[] facoltativo

    Corrisponde se tutti i selettori CSS nell'array corrispondono agli elementi visualizzati in un frame con la stessa origine del frame principale della pagina. Per velocizzare la corrispondenza, tutti i selettori in questo array devono essere selettori composti. Nota: elencare centinaia di selettori CSS o elencare centinaia di selettori CSS per pagina può rallentare i siti web.

  • isBookmarked

    booleano facoltativo

    Chrome 45 e versioni successive .

    Trova la corrispondenza se lo stato della pagina aggiunto ai preferiti è uguale al valore specificato. È necessaria l'autorizzazione per i preferiti.

  • pageUrl

    UrlFilter facoltativo

    Corrisponde se le condizioni dell'elemento UrlFilter sono soddisfatte per l'URL di primo livello della pagina.

RequestContentScript

Azione di evento dichiarativa che inserisce uno script di contenuti.

AVVISO:questa azione è ancora sperimentale e non è supportata su build stabili di Chrome.

Proprietà

  • costruttore

    null

    La funzione constructor ha questo aspetto: 

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

  • allFrames

    booleano facoltativo

    Se lo script dei contenuti viene eseguito in tutti i frame della pagina corrispondente o solo nel frame superiore. Il valore predefinito è false.

  • css

    string[] facoltativo

    Nomi dei file CSS da inserire come parte dello script dei contenuti.

  • js

    string[] facoltativo

    Nomi dei file JavaScript da inserire come parte dello script dei contenuti.

  • matchAboutBlank

    booleano facoltativo

    Indica se inserire lo script dei contenuti su about:blank e about:srcdoc. Il valore predefinito è false.

SetIcon

Azione di evento dichiarativa che imposta l'icona quadrata n-dip per l'azione sulla pagina o l'azione del browser dell'estensione mentre le condizioni corrispondenti sono soddisfatte. Questa azione può essere utilizzata senza le autorizzazioni dell'host, ma l'estensione deve avere un'azione relativa alla pagina o al browser.

È necessario specificare in modo esatto uno tra imageData o path. Entrambi sono dizionari che mappano un certo numero di pixel a una rappresentazione di immagine. La rappresentazione dell'immagine in imageData è un oggetto ImageData. ad esempio, da un elemento canvas, mentre la rappresentazione dell'immagine in path è il percorso di un file immagine relativo al manifest dell'estensione. Se i pixel dello schermo scale rientrano in un pixel indipendente dal dispositivo, viene utilizzata l'icona scale * n. Se questa scala non è presente, viene ridimensionata un'altra immagine alle dimensioni richieste.

Proprietà

  • costruttore

    null

    La funzione constructor ha questo aspetto: 

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

  • imageData

    ImageData | oggetto facoltativo

    Un oggetto ImageData o un dizionario {size -> ImageData} che rappresenta un'icona da impostare. Se l'icona viene specificata come dizionario, l'immagine utilizzata viene scelta in base alla densità dei pixel dello schermo. Se il numero di pixel immagine che rientrano in un'unità di spazio sullo schermo è uguale a scale, viene selezionata un'immagine con dimensioni scale * n, dove n è la dimensione dell'icona nell'interfaccia utente. È necessario specificare almeno un'immagine. Tieni presente che details.imageData = foo equivale a details.imageData = {'16': foo}.

ShowAction

Chrome 97 e versioni successive .

Un'azione di evento dichiarativa che imposta l'azione della barra degli strumenti dell'estensione su uno stato attivato mentre le condizioni corrispondenti sono soddisfatte. Questa azione può essere utilizzata senza le autorizzazioni dell'host. Se l'estensione dispone dell'autorizzazione activeTab, facendo clic sull'azione della pagina viene consentito l'accesso alla scheda attiva.

Nelle pagine in cui le condizioni non sono soddisfatte, l'azione nella barra degli strumenti dell'estensione sarà in scala di grigi e se fai clic su di essa si aprirà il menu contestuale, anziché attivare l'azione.

Proprietà

ShowPageAction

Ritirato da Chrome 97

Utilizza declarativeContent.ShowAction.

Un'azione di evento dichiarativa che imposta l'azione sulla pagina dell'estensione su uno stato attivato mentre le condizioni corrispondenti sono soddisfatte. Questa azione può essere utilizzata senza autorizzazioni host, ma l'estensione deve avere un'azione relativa alla pagina. Se l'estensione dispone dell'autorizzazione activeTab, facendo clic sull'azione della pagina viene consentito l'accesso alla scheda attiva.

Nelle pagine in cui le condizioni non sono soddisfatte, l'azione nella barra degli strumenti dell'estensione sarà in scala di grigi e se fai clic su di essa si aprirà il menu contestuale, anziché attivare l'azione.

Proprietà

Eventi

onPageChanged

Fornisce l'API Declarative Event composta da addRules, removeRules e getRules.

Condizioni

PageStateMatcher

Azioni

RequestContentScript

SetIcon

ShowPageAction

ShowAction