Come eseguire la transizione a Manifest V3 per le estensioni di Chrome

Anche se non sono un normale programmatore di estensioni di Chrome, ho sicuramente codificato un numero sufficiente di estensioni e ho un portafoglio di sviluppo web sufficientemente ampio per sapere come aggirare l'attività. Tuttavia, proprio di recente, un cliente ha rifiutato una delle mie estensioni poiché ho ricevuto feedback secondo cui la mia estensione era "obsoleta".

Mentre cercavo di capire cosa c'era che non andava, ho spazzato via il mio imbarazzo sotto il tappeto e ho subito iniziato il mio tuffo nel mondo delle estensioni di Chrome. Sfortunatamente, le informazioni su Manifest V3 erano scarse ed è stato difficile per me capire rapidamente in cosa consistesse questa transizione.

Inutile dire che, con un lavoro in sospeso, ho dovuto scrupolosamente orientarmi Documentazione per gli sviluppatori di Chrome di Google e capire le cose da solo. Mentre portavo a termine il lavoro, non volevo che le mie conoscenze e ricerche in questo settore andassero sprecate e ho deciso di condividere ciò a cui avrei voluto avere facile accesso nel mio percorso di apprendimento.

Perché il passaggio a Manifest 3 è importante

Manifest V3 è un'API che Google utilizzerà nel suo browser Chrome. È il successore dell'attuale API, Manifest V2, e regola il modo in cui le estensioni di Chrome interagiscono con il browser. Manifest V3 introduce modifiche significative alle regole per le estensioni, alcune delle quali saranno il nuovo pilastro della V2 a cui eravamo abituati.

Il passaggio a Manifest V3 si può riassumere così:

1. La transizione è in corso dal 2018.
2. Manifest V3 inizierà ufficialmente a essere distribuito a gennaio 2023.
3. Entro giugno 2023, le estensioni che eseguono Manifest V2 non saranno più disponibili sul Chrome Web Store.
4. Le estensioni che non rispettano le nuove regole introdotte in Manifest V3 verranno eventualmente rimosse dal Chrome Web Store.

Uno degli obiettivi principali di Manifest V3 è rendere gli utenti più sicuri e migliorare l'esperienza complessiva del browser. In precedenza, molte estensioni del browser si basavano sul codice nel cloud, il che significa che poteva essere difficile valutare se un'estensione fosse rischiosa. Manifest V3 mira a risolvere questo problema richiedendo alle estensioni di contenere tutto il codice che eseguiranno, consentendo a Google di scansionarle e rilevare potenziali rischi. Costringe inoltre le estensioni a richiedere l'autorizzazione a Google per le modifiche che possono implementare sul browser.

Rimanere aggiornati con la transizione di Google a Manifest V3 è importante perché introduce nuove regole per le estensioni che mirano a migliorare la sicurezza degli utenti e l'esperienza complessiva del browser, e le estensioni che non rispettano queste regole verranno eventualmente rimosse dal Chrome Web Negozio.

In breve, tutto il tuo duro lavoro nella creazione di estensioni che utilizzavano Manifest V2 potrebbe essere inutile se non effettui questa transizione nei prossimi mesi.

Le principali differenze tra Manifest V2 e V3

Ci sono molte differenze tra i due, e anche se ti consiglio vivamente di leggere Guida "Migrazione a Manifest V3" di Chrome, ecco un breve e dolce riassunto dei punti chiave:

1. Lavoratori di servizio sostituire le pagine di sfondo in Manifest V3.
2. La modifica della richiesta di rete viene gestita con il nuovo declarativeNetRequest API nel manifesto V3.
3. In Manifest V3, le estensioni possono eseguire solo JavaScript incluso nel loro pacchetto e non possono utilizzare codice ospitato in remoto.
4. Manifest V3 introduce promise supporto a molti metodi, sebbene i callback siano ancora supportati come alternativa.
5. Le autorizzazioni host in Manifest V3 sono un elemento separato e devono essere specificate nel file "host_permissions" campo.
6. La politica di sicurezza del contenuto in Manifest V3 è un oggetto con membri che rappresentano contesti di politica di sicurezza del contenuto alternativo (CSP), piuttosto che una stringa come era in Manifest V2.

In un semplice manifesto dell'estensione di Chrome che altera lo sfondo di una pagina Web, potrebbe apparire così:

// Manifest V2
{ "manifest_version": 2, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "scripts": ["background.js"], "persistent": true }, "browser_action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "optional_permissions": ["<all_urls>"]
}

// Manifest V3
{ "manifest_version": 3, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "host_permissions": [ "<all_urls>" ]
}

Se trovi che alcuni dei tag sopra ti sembrano estranei, continua a leggere per scoprire esattamente quello che devi sapere.

Come passare agevolmente a Manifest V3

Ho riassunto la transizione a Manifest V3 in quattro aree chiave. Naturalmente, mentre ci sono molti campanelli e fischietti nel nuovo Manifest V3 che devono essere implementati dal vecchio Manifest V2, l'implementazione di modifiche in queste quattro aree porterà la tua estensione Chrome sulla strada giusta per l'eventuale transizione.

Le quattro aree chiave sono:

1. Aggiornamento della struttura di base del tuo manifest.
2. Modifica le autorizzazioni dell'host.
3. Aggiorna la politica di sicurezza dei contenuti.
4. Modifica la gestione delle richieste di rete.

Con queste quattro aree, le basi del tuo Manifest saranno pronte per la transizione a Manifest V3. Esaminiamo ciascuno di questi aspetti chiave in dettaglio e vediamo come possiamo lavorare per rendere la tua estensione di Chrome a prova di futuro da questa transizione.

Aggiornamento della struttura di base del tuo manifest

L'aggiornamento della struttura di base del tuo manifest è il primo passo per passare a Manifest V3. Il cambiamento più importante che dovrai apportare è cambiare il valore di "manifest_version" elemento a 3, che determina che stai utilizzando il set di funzionalità Manifest V3.

Una delle principali differenze tra Manifest V2 e V3 è la sostituzione delle pagine in background con un singolo operatore del servizio di estensione in Manifest V3. Sarà necessario registrare l'addetto all'assistenza sotto il "background" campo, utilizzando il "service_worker" key e specificare un singolo file JavaScript. Anche se Manifest V3 non supporta più script in background, puoi facoltativamente dichiarare il service worker come modulo ES specificando "type": "module", che consente di importare ulteriore codice.

In Manifest V3, il "browser_action" ed "page_action" le proprietà sono unificate in un unico "action" proprietà. Sarà necessario sostituire queste proprietà con "action" nel tuo manifesto. Allo stesso modo, il "chrome.browserAction" ed "chrome.pageAction" Le API sono unificate in un'unica API "Azione" in Manifest V3 e dovrai migrare a questa API.

// Manifest V2 "background": { "scripts": ["background.js"], "persistent": false
}, "browser_action": { "default_popup": "popup.html"
},

// Manifest V3 "background": { "service_worker": "background.js"
}, "action": { "default_popup": "popup.html"
}

Nel complesso, l'aggiornamento della struttura di base del tuo manifest è un passaggio cruciale nel processo di transizione a Manifest V3, poiché ti consente di sfruttare le nuove funzionalità e le modifiche introdotte in questa versione dell'API.

Modifica le autorizzazioni dell'host

Il secondo passaggio nella transizione a Manifest V3 è la modifica delle autorizzazioni dell'host. In Manifest V2, specifichi le autorizzazioni host nel file "permissions" campo nel file manifest. In Manifest V3, le autorizzazioni host sono un elemento separato e dovresti specificarle nel file "host_permissions" campo nel file manifest.

Ecco un esempio di come modificare le autorizzazioni dell'host:

// Manifest V2 "permissions": [ "activeTab", "storage", "http://www.css-tricks.com/", ":///*" ]

// Manifest V3 "permissions": [ "activeTab", "scripting", "storage"
], "host_permissions": [ "http://www.css-tricks.com/" ], "optional_host_permissions": [ ":///*" ]

Aggiorna la politica di sicurezza dei contenuti

Per aggiornare il CSP della tua estensione Manifest V2 in modo che sia conforme a Manifest V3, dovrai apportare alcune modifiche al tuo file manifest. In Manifest V2, il CSP è stato specificato come una stringa nel file "content_security_policy" campo del manifesto.

In Manifest V3, il CSP è ora un oggetto con membri diversi che rappresentano contesti CSP alternativi. Invece di un singolo "content_security_policy" campo, ora dovrai specificare campi separati per "content_security_policy.extension_pages" ed "content_security_policy.sandbox", a seconda del tipo di pagine di estensione che stai utilizzando.

Dovresti anche rimuovere qualsiasi riferimento a domini esterni nel file "script-src", "worker-src", "object-src"e "style-src" direttive se presenti. È importante apportare questi aggiornamenti al CSP per garantire la sicurezza e la stabilità dell'estensione in Manifest V3.

// Manifest V2 "content_security_policy": "script-src 'self' https://css-tricks.com; object-src 'self'"

// Manfiest V3 "content_security_policy.extension_pages": "script-src 'self' https://example.com; object-src 'self'", "content_security_policy.sandbox": "script-src 'self' https://css-tricks.com; object-src 'self'"

Modifica la gestione delle richieste di rete

Il passaggio finale nella transizione a Manifest V3 è la modifica della gestione delle richieste di rete. In Manifest V2, avresti usato l'estensione chrome.webRequest API per modificare le richieste di rete. Tuttavia, questa API è sostituita in Manifest V3 dalla declarativeNetRequest API.

Per utilizzare questa nuova API, dovrai specificare il file declarativeNetRequest autorizzazione nel file manifest e aggiornare il codice per utilizzare la nuova API. Una differenza fondamentale tra le due API è che il file declarativeNetRequest L'API richiede di specificare un elenco di indirizzi predeterminati da bloccare, anziché essere in grado di bloccare intere categorie di richieste HTTP come si potrebbe fare con chrome.webRequest API.

È importante apportare queste modifiche al codice per garantire che l'estensione continui a funzionare correttamente in Manifest V3. Ecco un esempio di come modificheresti il ​​tuo manifest per usare il file declarativeNetRequest API nel manifesto V3:

// Manifest V2 "permissions": [ "webRequest", "webRequestBlocking"
]

// Manifest V3 "permissions": [ "declarativeNetRequest"
]

Sarà inoltre necessario aggiornare il codice dell'estensione per utilizzare il declarativeNetRequest API invece di chrome.webRequest API.

Altri aspetti da verificare

Quello che ho trattato è solo la punta dell'iceberg. Ovviamente, se volessi coprire tutto, potrei rimanere qui per giorni e non avrebbe senso avere le guide per gli sviluppatori di Chrome di Google. Mentre quello che ho trattato ti renderà abbastanza a prova di futuro per armare le tue estensioni di Chrome in questa transizione, ecco alcune altre cose che potresti voler guardare per assicurarti che le tue estensioni funzionino al meglio del loro gioco.

• Migrazione degli script in background nel contesto di esecuzione del service worker: Come accennato in precedenza, Manifest V3 sostituisce le pagine in background con un singolo service worker di estensione, quindi potrebbe essere necessario aggiornare gli script in background per adattarli al contesto di esecuzione del service worker.
• Unificare il **chrome.browserAction** ed **chrome.pageAction** API: Queste due API equivalenti sono unificate in un'unica API in Manifest V3, pertanto potrebbe essere necessario eseguire la migrazione all'API Action.
• Migrazione delle funzioni che prevedono un contesto in background di Manifest V2: L'adozione di service worker in Manifest V3 non è compatibile con metodi come chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs()e chrome.extension.getViews(). Potrebbe essere necessario migrare a una progettazione che trasmette messaggi tra altri contesti e l'addetto ai servizi in background.
• Spostamento delle richieste CORS negli script di contenuto al lavoratore del servizio in background: Potrebbe essere necessario spostare le richieste CORS negli script di contenuto al lavoratore del servizio in background per conformarsi a Manifest V3.
• Migrazione dall'esecuzione di codice esterno o stringhe arbitrarie: Manifest V3 non consente più l'esecuzione di logica esterna utilizzando chrome.scripting.executeScript({code: '...'}), eval()e new Function(). Potrebbe essere necessario spostare tutto il codice esterno (JavaScript, WebAssembly, CSS) nel bundle dell'estensione, aggiornare i riferimenti di script e stile per caricare le risorse dal bundle dell'estensione e utilizzare chrome.runtime.getURL() per creare URL di risorse in fase di esecuzione.
• Aggiornamento di alcuni metodi di scripting e CSS nell'API delle schede: Come accennato in precedenza, diversi metodi passano dall'API Tabs all'API Scripting in Manifest V3. Potrebbe essere necessario aggiornare le chiamate a questi metodi per utilizzare l'API Manifest V3 corretta.

E molti altri!

Sentiti libero di prenderti un po' di tempo per aggiornarti su tutti i cambiamenti. Dopotutto, questo cambiamento è inevitabile e se non vuoi che le tue estensioni Manifest V2 vadano perse per evitare questa transizione, allora dedica un po' di tempo ad armarti delle conoscenze necessarie.

D'altra parte, se sei nuovo nella programmazione delle estensioni di Chrome e stai cercando di iniziare, un ottimo modo per farlo è immergerti nel mondo degli strumenti per sviluppatori Web di Chrome. L'ho fatto attraverso un corso su Apprendimento su Linkedin, che mi ha messo al corrente abbastanza rapidamente. Una volta acquisite le conoscenze di base, torna a questo articolo e traduci ciò che sai in Manifest V3!

Quindi, come utilizzerò le funzionalità del nuovo Manifest V3 in futuro?

Bene, per me, il passaggio a Manifest V3 e la rimozione del file chrome.webRequest L'API sembra spostare le estensioni dai casi d'uso incentrati sui dati (come i blocchi degli annunci) a usi più funzionali e basati sull'applicazione. Ultimamente mi sono tenuto lontano dallo sviluppo di applicazioni perché può diventare abbastanza risorsa intensiva a volte. Tuttavia, questo cambiamento potrebbe essere ciò che mi riporta indietro!

L'ascesa degli strumenti di intelligenza artificiale negli ultimi tempi, molti con API disponibili per l'uso, ha dato vita a tonnellate di nuove e fresche applicazioni SaaS. Personalmente, penso che stia arrivando in un momento perfetto con il passaggio a più estensioni di Chrome basate su applicazioni! Mentre molte delle estensioni più vecchie potrebbero essere spazzate via da questa transizione, molte nuove estensioni costruite attorno a nuove idee SaaS verranno a prendere il loro posto.

Quindi, questo è un aggiornamento entusiasmante su cui saltare e rinnovare vecchie estensioni o crearne di nuove! Personalmente, vedo molte possibilità nell'utilizzo di API che coinvolgono l'intelligenza artificiale utilizzata nelle estensioni per migliorare l'esperienza di navigazione di un utente. Ma questa è davvero solo la punta dell'iceberg. Se stai cercando di approfondire le cose con le tue estensioni professionali o di contattare le aziende per creare/aggiornare estensioni per loro, ti consiglio aggiornare il tuo account Gmail per i vantaggi che offre nella collaborazione, nello sviluppo e nella pubblicazione di estensioni nel Chrome Web Store.

Tuttavia, ricorda che i requisiti di ogni sviluppatore sono diversi, quindi scopri di cosa hai bisogno per mantenere a galla le tue attuali estensioni o quelle nuove!

• Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
• Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. Accedi qui.
• Fonte: https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/