Cum să treceți la Manifest V3 pentru extensiile Chrome

Deși nu sunt un programator obișnuit de extensii Chrome, cu siguranță am codificat suficiente extensii și am un portofoliu de dezvoltare web suficient de larg pentru a-mi afla cum să rezolv sarcina. Cu toate acestea, recent, un client a respins una dintre extensiile mele, deoarece am primit feedback că extensia mea este „învechită”.

În timp ce mă străduiam să-mi dau seama ce era în neregulă, mi-am curățat jena sub covor și mi-am început imediat să mă scufundăm adânc în lumea Chrome Extensions. Din păcate, informațiile despre Manifest V3 erau puține și mi-a fost greu să înțeleg rapid despre ce a fost această tranziție.

Inutil să spun că, având o slujbă în așteptare, a trebuit să-mi navighez cu minuțiozitate Documentația pentru dezvoltatori Chrome de la Google și să-mi dau seama singur. În timp ce am terminat treaba, nu am vrut ca cunoștințele și cercetările mele în acest domeniu să se piardă și am decis să împărtășesc ceea ce mi-aș fi dorit să fi putut avea acces ușor în călătoria mea de învățare.

De ce este importantă trecerea la Manifest 3

Manifest V3 este un API pe care Google îl va folosi în browserul său Chrome. Este succesorul actualului API, Manifest V2, și guvernează modul în care extensiile Chrome interacționează cu browserul. Manifest V3 introduce modificări semnificative în regulile pentru extensii, dintre care unele vor fi noul suport de la V2 cu care eram obișnuiți.

Tranziția la Manifest V3 poate fi rezumat astfel:

1. Tranziția este în curs din 2018.
2. Manifest V3 va începe oficial lansarea în ianuarie 2023.
3. Până în iunie 2023, extensiile care rulează Manifest V2 nu vor mai fi disponibile în Magazinul web Chrome.
4. Extensiile care nu respectă noile reguli introduse în Manifest V3 vor fi în cele din urmă eliminate din Magazinul web Chrome.

Unul dintre obiectivele principale ale Manifest V3 este de a face utilizatorii mai siguri și de a îmbunătăți experiența generală a browserului. Anterior, multe extensii de browser se bazau pe codul din cloud, ceea ce înseamnă că ar putea fi dificil să evalueze dacă o prelungire a fost riscantă. Manifest V3 își propune să rezolve acest lucru solicitând extensiilor să conțină tot codul pe care îl vor rula, permițând Google să le scaneze și să detecteze potențiale riscuri. De asemenea, obligă extensiile să solicite permisiunea de la Google pentru modificările pe care le pot implementa în browser.

Rămâneți la curent cu tranziția Google la Manifest V3 este important, deoarece introduce noi reguli pentru extensiile care urmăresc să îmbunătățească siguranța utilizatorilor și experiența generală a browserului, iar extensiile care nu respectă aceste reguli vor fi în cele din urmă eliminate de pe Chrome Web. Magazin.

Pe scurt, toată munca ta grea în crearea extensiilor care au folosit Manifest V2 ar putea fi în zadar dacă nu faci această tranziție în lunile următoare.

Diferențele cheie dintre Manifest V2 și V3

Există multe diferențe între cele două și, deși vă recomand cu căldură să citiți mai departe Ghidul Chrome „Migrarea la Manifest V3”., iată un scurt și dulce rezumat al punctelor cheie:

1. Lucrători de servicii înlocuiți paginile de fundal în Manifest V3.
2. Modificarea cererii de rețea este gestionată cu noul declarativeNetRequest API în Manifest V3.
3. În Manifest V3, extensiile pot executa numai JavaScript care este inclus în pachetul lor și nu pot folosi cod găzduit de la distanță.
4. Manifest V3 introduce promise suport pentru multe metode, deși apelurile inverse sunt încă acceptate ca alternativă.
5. Permisiunile gazdă în Manifest V3 sunt un element separat și trebuie specificate în "host_permissions" camp.
6. Politica de securitate a conținutului din Manifest V3 este un obiect cu membri care reprezintă contexte alternative ale politicii de securitate a conținutului (CSP), mai degrabă decât un șir așa cum era în Manifest V2.

Într-un simplu Manifest al extensiei Chrome care modifică fundalul unei pagini web, ar putea arăta astfel:

// 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>" ]
}

Dacă găsiți că unele dintre etichetele de mai sus vi se par străine, continuați să citiți pentru a afla exact ce trebuie să știți.

Cum să tranziți fără probleme la Manifest V3

Am rezumat tranziția la Manifest V3 în patru domenii cheie. Desigur, deși există multe clopote și fluiere în noul Manifest V3 care trebuie implementate din vechiul Manifest V2, implementarea modificărilor în aceste patru zone va duce Extensia Chrome pe drumul cel bun pentru eventuala tranziție.

Cele patru domenii cheie sunt:

1. Actualizarea structurii de bază a manifestului dvs.
2. Modificați permisiunile pentru gazdă.
3. Actualizați politica de securitate a conținutului.
4. Modificați gestionarea solicitărilor de rețea.

Cu aceste patru domenii, elementele fundamentale ale Manifestului dumneavoastră vor fi pregătite pentru tranziția la Manifest V3. Să ne uităm la fiecare dintre aceste aspecte cheie în detaliu și să vedem cum putem lucra pentru a asigura viitorul extensiei tale Chrome din această tranziție.

Actualizarea structurii de bază a manifestului dvs

Actualizarea structurii de bază a manifestului este primul pas în tranziția la Manifest V3. Cea mai importantă schimbare pe care va trebui să o faci este schimbarea valorii "manifest_version" element la 3, care determină că utilizați setul de caracteristici Manifest V3.

Una dintre diferențele majore dintre Manifest V2 și V3 este înlocuirea paginilor de fundal cu un singur lucrător al serviciului de extensie în Manifest V3. Va trebui să înregistrați lucrătorul de serviciu sub "background" câmp, folosind "service_worker" cheie și specificați un singur fișier JavaScript. Chiar dacă Manifest V3 nu acceptă mai multe scripturi de fundal, puteți, opțional, să declarați lucrătorul de service ca modul ES prin specificarea "type": "module", care vă permite să importați coduri suplimentare.

În Manifest V3, "browser_action" și "page_action" proprietățile sunt unificate într-un singur "action" proprietate. Va trebui să înlocuiți aceste proprietăți cu "action" în manifestul tău. În mod similar, cel "chrome.browserAction" și "chrome.pageAction" API-urile sunt unificate într-un singur API „Action” în Manifest V3 și va trebui să migrați la acest 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"
}

În general, actualizarea structurii de bază a manifestului este un pas crucial în procesul de tranziție la Manifest V3, deoarece vă permite să profitați de noile funcții și modificări introduse în această versiune a API-ului.

Modificați permisiunile pentru gazdă

Al doilea pas în tranziția la Manifest V3 este modificarea permisiunilor de gazdă. În Manifest V2, specificați permisiunile de gazdă în fișierul "permissions" câmp din fișierul manifest. În Manifest V3, permisiunile de gazdă sunt un element separat și ar trebui să le specificați în "host_permissions" câmp din fișierul manifest.

Iată un exemplu despre cum să vă modificați permisiunile de gazdă:

// 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": [ ":///*" ]

Actualizați politica de securitate a conținutului

Pentru a actualiza CSP-ul extensiei dvs. Manifest V2 pentru a fi compatibil cu Manifest V3, va trebui să faceți câteva modificări fișierului manifest. În Manifest V2, CSP-ul a fost specificat ca șir în fișierul "content_security_policy" câmpul manifestului.

În Manifest V3, CSP-ul este acum un obiect cu membri diferiți reprezentând contexte CSP alternative. În loc de un singur "content_security_policy" câmp, va trebui acum să specificați câmpuri separate pentru "content_security_policy.extension_pages" și "content_security_policy.sandbox", în funcție de tipul de pagini de extensie pe care îl utilizați.

De asemenea, ar trebui să eliminați orice referință la domenii externe din "script-src", "worker-src", "object-src", și "style-src" directive dacă sunt prezente. Este important să faceți aceste actualizări la CSP-ul dvs. pentru a asigura securitatea și stabilitatea extensiei dvs. în 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ți gestionarea solicitărilor de rețea

Ultimul pas în tranziția la Manifest V3 este modificarea gestionării cererilor de rețea. În Manifest V2, ați fi folosit chrome.webRequest API pentru a modifica solicitările de rețea. Cu toate acestea, acest API este înlocuit în Manifest V3 de declarativeNetRequest API-ul.

Pentru a utiliza acest nou API, va trebui să specificați declarativeNetRequest permisiunea în manifest și actualizați codul pentru a utiliza noul API. O diferență cheie între cele două API-uri este că declarativeNetRequest API vă solicită să specificați o listă de adrese predeterminate de blocat, în loc să puteți bloca categorii întregi de solicitări HTTP așa cum ați putea cu chrome.webRequest API-ul.

Este important să faceți aceste modificări în codul dvs. pentru a vă asigura că extensia dvs. continuă să funcționeze corect sub Manifest V3. Iată un exemplu despre cum ați modifica manifestul pentru a utiliza declarativeNetRequest API în Manifest V3:

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

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

De asemenea, va trebui să actualizați codul extensiei pentru a utiliza declarativeNetRequest API în loc de chrome.webRequest API-ul.

Alte aspecte pe care trebuie să le verificați

Ceea ce am acoperit este doar vârful aisbergului. Desigur, dacă aș fi vrut să acopăr totul, aș putea sta aici zile întregi și nu ar avea rost să am ghidurile Google Chrome Developers. Deși ceea ce am tratat vă va oferi suficient de pregătit pentru viitor pentru a vă arma extensiile Chrome în această tranziție, iată câteva alte lucruri pe care ați dori să le analizați pentru a vă asigura că extensiile funcționează în vârful lor de joc.

• Migrarea scripturilor de fundal în contextul de execuție a lucrătorului de servicii: După cum sa menționat mai devreme, Manifest V3 înlocuiește paginile de fundal cu un singur lucrător al serviciului de extensie, așa că poate fi necesar să se actualizeze scripturile de fundal pentru a se adapta la contextul de execuție al lucrătorului de servicii.
• Unificarea **chrome.browserAction** și **chrome.pageAction** API-uri: Aceste două API-uri echivalente sunt unificate într-un singur API în Manifest V3, așa că poate fi necesară migrarea la API-ul Action.
• Migrarea funcțiilor care se așteaptă la un context de fundal Manifest V2: Adoptarea lucrătorilor de servicii în Manifest V3 nu este compatibilă cu metode precum chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs(), și chrome.extension.getViews(). Poate fi necesară migrarea către un design care transmite mesaje între alte contexte și lucrătorul de serviciu de fundal.
• Mutarea solicitărilor CORS în scripturile de conținut către lucrătorul de serviciu de fundal: Poate fi necesar să mutați solicitările CORS din scripturile de conținut către lucrătorul de serviciu de fundal pentru a se conforma cu Manifest V3.
• Migrarea de la executarea codului extern sau a șirurilor de caractere arbitrare: Manifest V3 nu mai permite executarea utilizării logicii externe chrome.scripting.executeScript({code: '...'}), eval(), și new Function(). Poate fi necesar să mutați tot codul extern (JavaScript, WebAssembly, CSS) în pachetul de extensii, să actualizați scripturile și referințele de stil pentru a încărca resurse din pachetul de extensii și să utilizați chrome.runtime.getURL() pentru a construi adrese URL de resurse în timpul execuției.
• Actualizarea anumitor metode de scripting și CSS în API-ul Tabs: După cum am menționat mai devreme, mai multe metode se mută de la API-ul Tabs la API-ul Scripting în Manifest V3. Poate fi necesar să actualizați orice apeluri la aceste metode pentru a utiliza API-ul Manifest V3 corect.

Si multe altele!

Simțiți-vă liber să vă acordați ceva timp pentru a fi la curent cu toate modificările. La urma urmei, această schimbare este inevitabilă și dacă nu doriți ca extensiile dvs. Manifest V2 să se piardă din cauza evitării acestei tranziții, atunci petreceți ceva timp înarmandu-vă cu cunoștințele necesare.

Pe de altă parte, dacă sunteți nou în programarea extensiilor Chrome și doriți să începeți, o modalitate excelentă de a proceda este să vă scufundați în lumea instrumentelor pentru dezvoltatori web Chrome. Am făcut-o printr-un curs despre Învățarea Linkedin, ceea ce m-a pus la curent destul de repede. Odată ce aveți aceste cunoștințe de bază, reveniți la acest articol și traduceți ceea ce știți în Manifest V3!

Deci, cum voi folosi funcțiile din noul Manifest V3 în viitor?

Ei bine, pentru mine, tranziția la Manifest V3 și eliminarea chrome.webRequest API-ul pare să schimbe extensiile de la cazurile de utilizare centrate pe date (cum ar fi blocarea reclamelor) la utilizări mai funcționale și bazate pe aplicații. Am stat departe de dezvoltarea de aplicații în ultima vreme, deoarece poate deveni destul de mare consumatoare de resurse câteodată. Totuși, această schimbare ar putea fi cea care mă aduce înapoi!

Creșterea instrumentelor AI în ultima vreme, multe cu API-uri disponibile pentru utilizare, a generat tone de aplicații SaaS noi și proaspete. Personal, cred că vine într-un moment perfect odată cu trecerea la extensii Chrome bazate pe mai multe aplicații! În timp ce multe dintre extensiile mai vechi pot fi șterse din această tranziție, o mulțime de extensii noi construite în jurul ideilor noi SaaS vor veni să le ia locul.

Prin urmare, aceasta este o actualizare interesantă la care să urcați și să reînnoiți extensiile vechi sau să construiți altele noi! Personal, văd multe posibilități în utilizarea API-urilor care implică utilizarea AI în extensii pentru a îmbunătăți experiența de navigare a unui utilizator. Dar asta e doar vârful aisbergului. Dacă doriți să intrați cu adevărat în lucruri cu propriile extensii profesionale sau să contactați companii pentru a construi/actualiza extensii pentru ele, v-aș recomanda actualizarea contului dvs. Gmail pentru beneficiile pe care le oferă în colaborarea, dezvoltarea și publicarea extensiilor în Magazinul web Chrome.

Cu toate acestea, amintiți-vă că cerințele fiecărui dezvoltator sunt diferite, așa că aflați de ce aveți nevoie pentru a menține extensiile actuale pe linia de plutire sau pentru a vă menține pe cele noi!

• Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
• Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. Accesați Aici.
• Sursa: https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/