Aggiorna il codice

Aggiornamenti non correlati ad altri problemi

Questa è la prima di tre sezioni che descrivono le modifiche necessarie per il codice che non fa parte del servizio worker dell'estensione. Questa sezione riguarda le modifiche al codice richieste non correlate ad altri problemi. Le due sezioni successive illustrano la sostituzione del blocco delle richieste web e il miglioramento della sicurezza.

Sostituisci tabs.executeScript() con scripting.executeScript()

In Manifest V3, executeScript() passa dall'API tabs all'API scripting. Ciò richiede modifiche alle autorizzazioni nel file manifest, oltre a modifiche effettive al codice.

Per il metodo executeScript(), devi disporre di:

• L'autorizzazione "scripting".
• Le autorizzazioni host o l'autorizzazione "activeTab".

Il metodo scripting.executeScript() è simile a quello utilizzato con tabs.executeScript(). Esistono alcune differenze.

• Mentre il vecchio metodo poteva accettare un solo file, il nuovo metodo può accettare un array di file.
• Inoltre, devi passare un oggetto ScriptInjection anziché InjectDetails. Esistono molte differenze tra i due. Ad esempio, tabId ora viene passato come membro di ScriptInjection.target anziché come argomento del metodo.

L'esempio mostra come eseguire questa operazione.

async function getCurrentTab() {/* ... */}
let tab = await getCurrentTab();

chrome.tabs.executeScript(
  tab.id,
  {
    file: 'content-script.js'
  }
);

async function getCurrentTab()
let tab = await getCurrentTab();

chrome.scripting.executeScript({
  target: {tabId: tab.id},
  files: ['content-script.js']
});

Sostituisci tabs.insertCSS() e tabs.removeCSS() con scripting.insertCSS() e scripting.removeCSS()

In Manifest V3, insertCSS() e removeCSS() passano dall'API tabs all'API scripting. Ciò richiede modifiche alle autorizzazioni nel file manifest, oltre alle modifiche al codice:

• L'autorizzazione "scripting".
• Autorizzazioni host o autorizzazione "activeTab".

Le funzioni nell'API scripting sono simili a quelle su tabs. Esistono alcune differenze.

• Quando chiami questi metodi, devi passare un oggetto CSSInjection anziché InjectDetails.
• tabId viene ora passato come membro di CSSInjection.target anziché come argomento del metodo.

L'esempio mostra come eseguire questa operazione per insertCSS(). La procedura per removeCSS() è la stessa.

chrome.tabs.insertCSS(tabId, injectDetails, () => {
  // callback code
});

const insertPromise = await chrome.scripting.insertCSS({
  files: ["style.css"],
  target: { tabId: tab.id }
});
// Remaining code. 

Sostituire Azioni del browser e Azioni della pagina con Azioni

Le azioni del browser e le azioni della pagina erano concetti distinti nella versione 2 di Manifest. Sebbene abbiano iniziato con ruoli distinti, le differenze tra loro sono diminuite nel tempo. In Manifest V3, questi concetti sono raggruppati nell'API Action. Ciò richiede modifiche al codice manifest.json e dell'estensione diverse da quelle che avresti inserito nello script di background di Manifest V2.

Le azioni in Manifest V3 sono molto simili a quelle del browser; tuttavia, l'API action non fornisce hide() e show() come ha fatto pageAction. Se hai ancora bisogno di azioni nella pagina, puoi emularle utilizzando contenuti dichiarativi o chiamare enable() o disable() con un ID scheda.

Sostituisci "browser_action" e "page_action" con "action"

In manifest.json, sostituisci i campi "browser_action" e "page_action" con il campo "action". Consulta il riferimento per informazioni sul campo "action".

{
  ...
  "page_action": { ... },
  "browser_action": {
    "default_popup": "popup.html"
   }
  ...
}

{
  ...
  "action": {
    "default_popup": "popup.html"
  }

  ...
}

Sostituisci le API browserAction e pageAction con l'API Action

Se il tuo manifest V2 utilizzava le API browserAction e pageAction, ora devi utilizzare l'API action.

chrome.browserAction.onClicked.addListener(tab => { ... });
chrome.pageAction.onClicked.addListener(tab => { ... });

chrome.action.onClicked.addListener(tab => { ... });

Sostituisci i callback con le promesse

In Manifest V3, molti metodi dell'API di estensione restituiscono promesse. Una promessa è un proxy o un segnaposto per un valore restituito da un metodo asincrono. Se non hai mai utilizzato le promesse, puoi leggere informazioni in merito su MDN. In questa pagina viene descritto ciò che devi sapere per utilizzarle in un'estensione di Chrome.

Per garantire la compatibilità con le versioni precedenti, molti metodi continuano a supportare i callback dopo l'aggiunta del supporto della promessa. Tieni presente che non puoi utilizzarli entrambi nella stessa chiamata di funzione. Se passi un callback, la funzione non restituirà una promessa e se vuoi che una promessa venga restituita, non passare un callback. Alcune funzionalità dell'API, come i listener di eventi, continueranno a richiedere callback. Per verificare se un metodo supporta le promesse, cerca l'etichetta "Promessa" nel relativo riferimento all'API.

Per convertire un callback in una promessa, rimuovi il callback e gestisci la promessa restituita. L'esempio riportato di seguito è tratto dall'esempio di autorizzazioni facoltative, nello specifico newtab.js. La versione del callback mostra come sarebbe la chiamata dell'esempio a request() con un callback. Tieni presente che la versione della promessa potrebbe essere riscritta con async e await.

chrome.permissions.request(newPerms, (granted) => {
  if (granted) {
    console.log('granted');
  } else {
    console.log('not granted');
  }
});

const newPerms = { permissions: ['topSites'] };
chrome.permissions.request(newPerms)
.then((granted) => {
  if (granted) {
    console.log('granted');
  } else {
    console.log('not granted');
  }
});

Sostituisci le funzioni che prevedono un contesto in background Manifest V2

Altri contesti di estensioni possono interagire con i service worker di estensioni solo tramite la trasmissione dei messaggi. Di conseguenza, dovrai sostituire le chiamate che prevedono un contesto in background, in particolare:

• chrome.runtime.getBackgroundPage()
• chrome.extension.getBackgroundPage()
• chrome.extension.getExtensionTabs()

Gli script delle estensioni devono utilizzare la trasmissione di messaggi per comunicare tra un service worker e altre parti dell'estensione. Al momento è possibile farlo utilizzando sendMessage() e implementando chrome.runtime.onMessage nel service worker delle estensioni. A lungo termine, dovresti pianificare la sostituzione di queste chiamate con postMessage() e con il gestore di eventi dei messaggi di un service worker.

Sostituisci le API non supportate

I metodi e le proprietà elencati di seguito devono essere modificati in Manifest V3.