google-chrome-extension
Script di contenuto

Osservazioni

Dichiarare gli script di contenuto nel manifest

Gli script di contenuto possono essere dichiarati in manifest.json per essere sempre iniettati in pagine che corrispondono a un set di pattern URL .

Esempio minimo

"content_scripts" : [
  {
    "js": ["content.js"],
    "css": ["content.css"]
    "matches": ["http://example.com/*"]
  }
]

Questa voce manifest indica a Chrome di inserire uno script di contenuto content.js , insieme al file CSS content.css , dopo qualsiasi navigazione verso una pagina che corrisponde al modello di corrispondenza http://example.com/*

Le chiavi js e css sono opzionali: puoi averne solo una o entrambe, a seconda di cosa ti serve.

content_scripts chiave content_scripts è una matrice e puoi dichiarare diverse definizioni di script del contenuto:

"content_scripts" : [
  {
    "js": ["content.js"],
    "matches": ["http://*.example.com/*"]
  },
  {
    "js": ["something_else.js"],
    "matches": ["http://*.example.org/*"]
  }
]

Nota che sia js che le matches sono matrici, anche se hai solo una voce.

Altre opzioni sono disponibili nella documentazione ufficiale e altri esempi.

Nota importante

Gli script di contenuto dichiarati nel manifest verranno iniettati solo nelle nuove navigazioni dopo il caricamento dell'estensione . Non verranno iniettati nelle schede esistenti. Questo vale anche per le ricariche degli interni durante lo sviluppo e gli aggiornamenti delle estensioni dopo il rilascio.

Se è necessario assicurarsi che le schede attualmente aperte siano coperte, prendere in considerazione anche l'iniezione programmatica all'avvio.

Iniezione di script di contenuto da una pagina di estensione

Se, invece di avere sempre uno script di contenuto immesso in base all'URL, si desidera controllare direttamente quando viene iniettato uno script di contenuto, è possibile utilizzare l' iniezione programmatica .

Esempio minimo

• JavaScript

  chrome.tabs.executeScript({file: "content.js"});
  

• CSS

  chrome.tabs.insertCSS({file: "content.css"});
  

Chiamato da una pagina di estensione (ad esempio sfondo o popup) e assumendo che si abbia il permesso di iniettare, questo eseguirà content.js o inserirà content.css come script di contenuto nel frame superiore della scheda corrente.

Codice inline

È possibile eseguire il codice inline anziché un file come script di contenuto:

var code = "console.log('This code will execute as a content script');";
chrome.tabs.executeScript({code: code});

Scegliere la scheda

È possibile fornire un ID di tabulazione (in genere di altri metodi chrome.tabs o di messaggistica) da eseguire in una scheda diversa da quella attualmente attiva.

chrome.tabs.executeScript({
  tabId: tabId,
  file: "content.js"
});

Altre opzioni sono disponibili nella documentazione chrome.tabs.executeScript() e in altri esempi.

permessi

L'utilizzo di chrome.tabs.executeScript() non richiede l'autorizzazione "tabs" , ma richiede le autorizzazioni dell'host per l'URL della pagina.

Controllo degli errori

Se l'iniezione di script fallisce, è possibile prenderla nel callback opzionale:

chrome.tabs.executeScript({file: "content.js"}, function() {
  if(chrome.runtime.lastError) {
    console.error("Script injection failed: " + chrome.runtime.lastError.message);
  }
});

Più script di contenuto nel manifest

Stesse condizioni, più script

Se è necessario iniettare più file con tutte le altre condizioni uguali, ad esempio per includere una libreria, è possibile elencarli tutti nella matrice "js" :

"content_scripts" : [
  {
    "js": ["library.js", "content.js"],
    "matches": ["http://*.example.com/*"]
  }
]

Questioni di ordine: library.js verrà eseguito prima di content.js .

Stessi script, più siti

Se è necessario iniettare gli stessi file in più siti, è possibile fornire più modelli di corrispondenza:

"matches": ["http://example.com/*", "http://example.org/*"]

Se devi inserire praticamente ogni pagina, puoi utilizzare pattern di corrispondenza generica come "*://*/*" (corrisponde a ogni pagina HTTP (S)) o "<all_urls>" (corrisponde a tutte le pagine supportate ).

Script diversi o siti diversi

"content_scripts" sezione "content_scripts" è anche una matrice, quindi è possibile definire più di un blocco di script di contenuto:

"content_scripts" : [
  {
    "js": ["content.js"],
    "matches": ["http://*.example.com/*"]
  },
  {
    "js": ["something_else.js"],
    "matches": ["http://*.example.org/*"]
  }
]