browser.scripting

Descrizione

Utilizza l'API chrome.scripting per eseguire script in contesti diversi.

Autorizzazioni

scripting

Disponibilità

Chrome 88+ MV3+

Manifest

Per utilizzare l'API browser.scripting, dichiara l'autorizzazione "scripting" nel manifest, oltre alle autorizzazioni host per le pagine in cui inserire gli script. Utilizza il tasto "host_permissions" o l'autorizzazione "activeTab", che concede autorizzazioni host temporanee. Il seguente esempio utilizza l'autorizzazione activeTab.

{
  "name": "Scripting Extension",
  "manifest_version": 3,
  "permissions": ["scripting", "activeTab"],
  ...
}

Concetti e utilizzo

Puoi utilizzare l'API browser.scripting per inserire JavaScript e CSS nei siti web. È simile a quello che puoi fare con gli script dei contenuti. Tuttavia, utilizzando lo spazio dei nomi browser.scripting, le estensioni possono prendere decisioni in fase di runtime.

Target di iniezione

Puoi utilizzare il parametro target per specificare un target in cui inserire JavaScript o CSS.

L'unico campo obbligatorio è tabId. Per impostazione predefinita, un'iniezione viene eseguita nel frame principale della scheda specificata.

function getTabId() { ... }

browser.scripting
    .executeScript({
      target : {tabId : getTabId()},
      files : [ "script.js" ],
    })
    .then(() => console.log("script injected"));

Per eseguire l'annuncio in tutti i frame della scheda specificata, puoi impostare il valore booleano allFrames su true.

function getTabId() { ... }

browser.scripting
    .executeScript({
      target : {tabId : getTabId(), allFrames : true},
      files : [ "script.js" ],
    })
    .then(() => console.log("script injected in all frames"));

Puoi anche inserire codice in frame specifici di una scheda specificando gli ID dei singoli frame. Per saperne di più sugli ID frame, consulta l'API browser.webNavigation.

function getTabId() { ... }

browser.scripting
    .executeScript({
      target : {tabId : getTabId(), frameIds : [ frameId1, frameId2 ]},
      files : [ "script.js" ],
    })
    .then(() => console.log("script injected on target frames"));

Codice inserito

Le estensioni possono specificare il codice da inserire tramite un file esterno o una variabile di runtime.

File

I file vengono specificati come stringhe che sono percorsi relativi alla directory root dell'estensione. Il seguente codice inserirà il file script.js nel frame principale della scheda.

function getTabId() { ... }

browser.scripting
    .executeScript({
      target : {tabId : getTabId()},
      files : [ "script.js" ],
    })
    .then(() => console.log("injected script file"));

Funzioni di runtime

Quando inserisci JavaScript con scripting.executeScript(), puoi specificare una funzione da eseguire anziché un file. Questa funzione deve essere una variabile disponibile per il contesto dell'estensione corrente.

function getTabId() { ... }
function getTitle() { return document.title; }

browser.scripting
    .executeScript({
      target : {tabId : getTabId()},
      func : getTitle,
    })
    .then(() => console.log("injected a function"));

function getTabId() { ... }
function getUserColor() { ... }

function changeBackgroundColor() {
  document.body.style.backgroundColor = getUserColor();
}

browser.scripting
    .executeScript({
      target : {tabId : getTabId()},
      func : changeBackgroundColor,
    })
    .then(() => console.log("injected a function"));

Puoi aggirare questo problema utilizzando la proprietà args:

function getTabId() { ... }
function getUserColor() { ... }
function changeBackgroundColor(backgroundColor) {
  document.body.style.backgroundColor = backgroundColor;
}

browser.scripting
    .executeScript({
      target : {tabId : getTabId()},
      func : changeBackgroundColor,
      args : [ getUserColor() ],
    })
    .then(() =>