Descrizione
Utilizza l'API chrome.declarativeContent
per eseguire azioni in base ai contenuti di una pagina, senza richiedere l'autorizzazione per leggere i contenuti della pagina.
Autorizzazioni
declarativeContent
Concetti e utilizzo
L'API Declarative Content ti consente di attivare l'azione dell'estensione in base all'URL di una pagina web o se un selettore CSS corrisponde a un elemento della pagina, senza dover aggiungere autorizzazioni host o iniettare uno script di contenuti.
Utilizza l'autorizzazione activeTab per interagire con una pagina dopo che l'utente fa clic sull'azione dell'estensione.
Regole
Le regole sono costituite da condizioni e azioni. Se una delle condizioni è soddisfatta, tutte le azioni vengono eseguite. Le azioni sono setIcon()
e showAction()
.
PageStateMatcher
corrisponde alle pagine web se e solo se sono soddisfatti tutti i criteri elencati. Può corrispondere a un URL pagina, a un selettore composto CSS o allo stato Segnalibro di una pagina. La seguente regola attiva
l'azione dell'estensione sulle pagine di Google quando è presente un campo della 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 una seconda condizione, poiché ciascuna 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 regola ha almeno una condizione soddisfatta ed esegue le azioni. Le regole rimangono invariate nelle sessioni di navigazione. Pertanto, durante l'installazione dell'estensione, devi prima utilizzare removeRules
per cancellare le regole installate in precedenza e poi 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à alcun avviso di autorizzazione e, quando l'utente fa clic sull'azione dell'estensione, questa verrà eseguita solo nelle pagine pertinenti.
Corrispondenza dell'URL pagina
PageStateMatcher.pageurl
corrisponde quando i criteri dell'URL sono soddisfatti. I criteri più comuni sono una concatenazione di host, percorso o URL, seguita da Contiene, È uguale a, Prefisso o Suffisso. La seguente tabella contiene alcuni esempi:
Criteri | Corrisponde a |
---|---|
{ hostSuffix: 'google.com' } |
Tutti gli URL di Google |
{ pathPrefix: '/docs/extensions' } |
URL della documentazione delle estensioni |
{ urlContains: 'developer.chrome.com' } |
Tutti gli URL dei documenti per 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,
il che significa che non puoi includere combinatori come spazi o ">
" nei
selettori. In questo modo, Chrome abbina 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 selettore è display:none
o uno dei suoi elementi principali è display:none
, la condizione non corrisponde. Gli elementi stilizzati con visibility:hidden
, posizionati fuori dallo schermo o nascosti da altri elementi
possono comunque soddisfare la condizione.
Corrispondenza dello stato dei preferiti
La condizione PageStateMatcher.isBookmarked
consente di associare lo stato di salvataggio come preferito dell'URL corrente nel profilo dell'utente. Per utilizzare questa condizione, l'autorizzazione "Preferiti" deve essere dichiarata nel manifest dell'estensione.
Tipi
ImageDataType
Consulta la pagina https://developer.mozilla.org/en-US/docs/Web/API/ImageData.
Tipo
ImageData
PageStateMatcher
Corrisponde allo stato di una pagina web in base a vari criteri.
Proprietà
-
constructor
nullo
La funzione
constructor
ha il seguente aspetto:(arg: PageStateMatcher) => {...}
-
arg
-
returns
-
-
css
stringa[] 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: l'elenco di centinaia di selettori CSS o di selettori CSS che corrispondono centinaia di volte per pagina può rallentare i siti web.
-
isBookmarked
booleano facoltativo
Chrome 45 e versioni successiveTrova la corrispondenza se lo stato della pagina salvata come preferita è uguale al valore specificato. Richiede l'autorizzazione per i preferiti.
-
pageUrl
UrlFilter facoltativo
Corrisponde se le condizioni di
UrlFilter
sono soddisfatte per l'URL di primo livello della pagina.
RequestContentScript
Azione evento dichiarativa che inserisce uno script di contenuti.
ATTENZIONE: questa azione è ancora sperimentale e non è supportata nelle build stabili di Chrome.
Proprietà
-
constructor
nullo
La funzione
constructor
ha il seguente aspetto:(arg: RequestContentScript) => {...}
-
returns
-
-
allFrames
booleano facoltativo
Indica se lo script dei contenuti viene eseguito in tutti i frame della pagina corrispondente o solo nel frame superiore. Il valore predefinito è
false
. -
css
stringa[] facoltativo
Nomi dei file CSS da iniettare all'interno dello script dei contenuti.
-
js
stringa[] facoltativo
Nomi dei file JavaScript da iniettare all'interno dello script dei contenuti.
-
matchAboutBlank
booleano facoltativo
Indica se inserire lo script dei contenuti su
about:blank
eabout:srcdoc
. Il valore predefinito èfalse
.
SetIcon
Azione evento dichiarativa che imposta l'icona quadrata di n punti per l'azione di pagina o l'azione del browser dell'estensione quando vengono soddisfatte le condizioni corrispondenti. Questa azione può essere utilizzata senza le autorizzazioni host, ma l'estensione deve avere un'azione di pagina o del browser.
È necessario specificare esattamente un valore per imageData
o path
. Entrambi sono dizionari che mappano un numero di pixel a una rappresentazione dell'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
si inseriscono in un pixel indipendente dal dispositivo, viene utilizzata l'icona scale * n
. Se questa scala non è presente, un'altra immagine viene ridimensionata alle dimensioni richieste.
Proprietà
-
constructor
nullo
La funzione
constructor
ha il seguente aspetto:(arg: SetIcon) => {...}
-
arg
-
returns
-
-
imageData
ImageData | oggetto facoltativo
Un oggetto
ImageData
o un dizionario {size -> ImageData} che rappresenta un'icona da impostare. Se l'icona è specificata come dizionario, l'immagine utilizzata viene scelta in base alla densità dei pixel dello schermo. Se il numero di pixel dell'immagine che si adattano a un'unità di spazio sullo schermo è pari ascale
, viene selezionata un'immagine con dimensioniscale * n
, dove n è la dimensione dell'icona nell'interfaccia utente. È necessario specificare almeno un'immagine. Tieni presente chedetails.imageData = foo
è equivalente adetails.imageData = {'16': foo}
.
ShowAction
Un'azione evento dichiarativa che imposta l'azione della barra degli strumenti dell'estensione su uno stato attivo quando vengono soddisfatte le condizioni corrispondenti. Questa azione può essere utilizzata senza le autorizzazioni host. Se l'estensione dispone dell'autorizzazione activeTab, il clic sull'azione di pagina concede l'accesso alla scheda attiva.
Nelle pagine in cui le condizioni non sono soddisfatte, l'azione della 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à
-
constructor
nullo
La funzione
constructor
ha il seguente aspetto:(arg: ShowAction) => {...}
-
arg
-
returns
-
ShowPageAction
Utilizza declarativeContent.ShowAction
.
Un'azione evento dichiarativa che imposta l'azione di pagina dell'estensione su uno stato abilitato quando le condizioni corrispondenti sono soddisfatte. Questa azione può essere utilizzata senza le autorizzazioni host, ma l'estensione deve avere un'azione di pagina. Se l'estensione dispone dell'autorizzazione activeTab, il clic sull'azione di pagina concede l'accesso alla scheda attiva.
Nelle pagine in cui le condizioni non sono soddisfatte, l'azione della 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à
-
constructor
nullo
La funzione
constructor
ha il seguente aspetto:(arg: ShowPageAction) => {...}
-
arg
-
returns
-
Eventi
onPageChanged
Fornisce l'API Event Declarative composta da addRules
, removeRules
e getRules
.