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 service worker dell'estensione. Questa sezione riguarda le modifiche al codice richieste che non sono correlate ad altri problemi. Le due sezioni successive riguardano la sostituzione delle richieste web di blocco 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 alle modifiche effettive al codice.

Per il metodo executeScript(), devi avere:

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

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

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

L'esempio mostra come fare.

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

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

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

browser.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 a modifiche al codice:

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

Le funzioni dell'API scripting sono simili a quelle di tabs. Ci sono alcune differenze.

• Quando chiami questi metodi, passi 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.

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

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

Sostituzione delle azioni del browser e delle azioni della pagina con le azioni

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

Le azioni in Manifest V3 assomigliano molto alle azioni del browser; tuttavia, l'API action non fornisce hide() e show() come faceva pageAction. Se hai ancora bisogno delle azioni 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.

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

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

Sostituisci i callback con le promise

In Manifest V3, molti metodi API delle estensioni restituiscono promise. Una Promise è un proxy o un segnaposto per un valore restituito da un metodo asincrono. Se non hai mai utilizzato le Promise, puoi leggere informazioni su questo argomento su MDN. Questa pagina descrive ciò che devi sapere per utilizzarli in un'estensione di Chrome.

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

Per eseguire la conversione da un callback a una promise, rimuovi il callback e gestisci la promise restituita. L'esempio seguente è tratto dall'esempio di autorizzazioni facoltative, in particolare newtab.js. La versione di callback mostra l'aspetto della chiamata dell'esempio a request() con un callback. Tieni presente che la versione con promise potrebbe essere riscritta con async e await.

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

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

Sostituisci le funzioni che prevedono un contesto in background di Manifest V2

Altri contesti di estensione possono interagire con i service worker delle estensioni solo utilizzando il passaggio di messaggi. Di conseguenza, dovrai sostituire le chiamate che prevedono un contesto in background, in particolare:

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

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

Sostituisci le API non supportate

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