Overstappen naar Manifest V3 voor Chrome-extensies

Hoewel ik geen gewone Chrome-extensieprogrammeur ben, heb ik zeker genoeg extensies gecodeerd en heb ik een breed genoeg webontwikkelingsportfolio om mijn weg te vinden in de taak. Onlangs liet ik echter een klant een van mijn extensies afwijzen omdat ik feedback kreeg dat mijn extensie "verouderd" was.

Terwijl ik probeerde uit te zoeken wat er aan de hand was, veegde ik mijn verlegenheid onder het tapijt en begon meteen aan mijn diepe duik terug in de wereld van Chrome-extensies. Helaas was informatie over Manifest V3 schaars en was het voor mij moeilijk om snel te begrijpen waar deze overgang over ging.

Onnodig te zeggen dat ik met een lopende baan nauwgezet mijn weg moest vinden Documentatie voor Chrome-ontwikkelaars van Google en dingen voor mezelf uitzoeken. Terwijl ik de klus klaarde, wilde ik niet dat mijn kennis en onderzoek op dit gebied verloren zou gaan en besloot ik te delen waar ik tijdens mijn leertraject gemakkelijk toegang toe had gehad.

Waarom de overstap naar Manifest 3 belangrijk is

Manifest V3 is een API die Google gaat gebruiken in zijn Chrome-browser. Het is de opvolger van de huidige API, Manifest V2, en bepaalt hoe Chrome-extensies omgaan met de browser. Manifest V3 introduceert belangrijke wijzigingen in de regels voor extensies, waarvan sommige de nieuwe steunpilaar zullen zijn van V2 die we gewend waren.

De overgang naar Manifest V3 kan als volgt worden samengevat:

1. De transitie is al aan de gang sinds 2018.
2. Manifest V3 wordt officieel uitgerold in januari 2023.
3. Vanaf juni 2023 zijn extensies met Manifest V2 niet meer beschikbaar in de Chrome Web Store.
4. Extensies die niet voldoen aan de nieuwe regels die zijn geïntroduceerd in Manifest V3, worden uiteindelijk verwijderd uit de Chrome Web Store.

Een van de belangrijkste doelen van Manifest V3 is om gebruikers veiliger te maken en de algehele browserervaring te verbeteren. Voorheen vertrouwden veel browserextensies op code in de cloud, wat betekent dat het moeilijk kan zijn om dit te doen beoordelen of een verlenging riskant was. Manifest V3 probeert dit aan te pakken door van extensies te eisen dat ze alle code bevatten die ze zullen uitvoeren, zodat Google ze kan scannen en potentiële risico's kan detecteren. Het dwingt extensies ook om toestemming van Google te vragen voor de wijzigingen die ze in de browser kunnen doorvoeren.

Op de hoogte blijven van de overgang van Google naar Manifest V3 is belangrijk omdat het nieuwe regels introduceert voor extensies die gericht zijn op het verbeteren van de gebruikersveiligheid en de algehele browserervaring, en extensies die niet aan deze regels voldoen, zullen uiteindelijk worden verwijderd van Chrome Web Winkel.

Kortom, al je harde werk bij het maken van extensies die Manifest V2 gebruikten, zou voor niets kunnen zijn als je deze overgang de komende maanden niet maakt.

De belangrijkste verschillen tussen Manifest V2 en V3

Er zijn veel verschillen tussen de twee, en hoewel ik je ten zeerste aanraad om verder te lezen Chrome's "Migreren naar Manifest V3" gids, hier is een korte en mooie samenvatting van de belangrijkste punten:

1. Service werknemers vervang achtergrondpagina's in Manifest V3.
2. Wijziging van netwerkverzoeken wordt afgehandeld met het nieuwe declarativeNetRequest API in Manifest V3.
3. In Manifest V3 kunnen extensies alleen JavaScript uitvoeren dat in hun pakket zit en kunnen ze geen extern gehoste code gebruiken.
4. Manifest V3 introduceert promise ondersteuning voor veel methoden, hoewel callbacks nog steeds worden ondersteund als alternatief.
5. Hostmachtigingen in Manifest V3 zijn een afzonderlijk element en moeten worden opgegeven in de "host_permissions" veld.
6. Het inhoudsbeveiligingsbeleid in Manifest V3 is een object met leden die contexten voor alternatief inhoudsbeveiligingsbeleid (CSP) vertegenwoordigen, in plaats van een tekenreeks zoals in Manifest V2.

In een eenvoudig manifest van een Chrome-extensie dat de achtergrond van een webpagina verandert, zou dat er als volgt uit kunnen zien:

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

Als u merkt dat sommige van de bovenstaande tags u vreemd lijken, lees dan verder om erachter te komen wat u precies moet weten.

Een soepele overgang naar Manifest V3

Ik heb de overgang naar Manifest V3 samengevat in vier hoofdgebieden. Natuurlijk, hoewel er veel toeters en bellen zijn in de nieuwe Manifest V3 die moeten worden geïmplementeerd vanuit de oude Manifest V2, zal het doorvoeren van wijzigingen in deze vier gebieden uw Chrome-extensie goed op weg helpen voor de uiteindelijke overgang.

De vier kerngebieden zijn:

1. De basisstructuur van uw Manifest bijwerken.
2. Wijzig uw hostmachtigingen.
3. Werk het inhoudsbeveiligingsbeleid bij.
4. Wijzig de afhandeling van uw netwerkverzoeken.

Met deze vier gebieden zijn de fundamenten van je Manifest klaar voor de overgang naar Manifest V3. Laten we elk van deze belangrijke aspecten in detail bekijken en kijken hoe we kunnen werken aan het toekomstbestendig maken van uw Chrome-extensie na deze overgang.

De basisstructuur van uw manifest bijwerken

Het bijwerken van de basisstructuur van uw manifest is de eerste stap in de overgang naar Manifest V3. De belangrijkste wijziging die u moet aanbrengen, is het wijzigen van de waarde van de "manifest_version" element om 3, waarmee wordt bepaald dat u de functieset van Manifest V3 gebruikt.

Een van de belangrijkste verschillen tussen Manifest V2 en V3 is de vervanging van achtergrondpagina's door een enkele extensieservicemedewerker in Manifest V3. U moet de servicemedewerker registreren onder de "background" veld, met behulp van de "service_worker" sleutel en geef een enkel JavaScript-bestand op. Hoewel Manifest V3 geen ondersteuning biedt voor meerdere achtergrondscripts, kunt u de servicemedewerker optioneel declareren als een ES-module door op te geven "type": "module", waarmee u meer code kunt importeren.

In Manifest V3, de "browser_action" en "page_action" eigenschappen zijn verenigd in een enkele "action" eigenschap. U moet deze eigenschappen vervangen door "action" in je manifest. Evenzo de "chrome.browserAction" en "chrome.pageAction" API's zijn verenigd in een enkele "Actie"-API in Manifest V3 en u moet naar deze API migreren.

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

Over het algemeen is het bijwerken van de basisstructuur van uw manifest een cruciale stap in het overgangsproces naar Manifest V3, omdat u hiermee kunt profiteren van de nieuwe functies en wijzigingen die in deze versie van de API zijn geïntroduceerd.

Wijzig uw hostmachtigingen

De tweede stap bij de overgang naar Manifest V3 is het wijzigen van uw hostmachtigingen. In Manifest V2 geeft u hostmachtigingen op in het "permissions" veld in het manifestbestand. In Manifest V3 zijn hostmachtigingen een afzonderlijk element en moet u deze specificeren in het "host_permissions" veld in het manifestbestand.

Hier is een voorbeeld van hoe u uw hostmachtigingen kunt wijzigen:

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

Werk het inhoudsbeveiligingsbeleid bij

Om de CSP van uw Manifest V2-extensie bij te werken zodat deze compatibel is met Manifest V3, moet u enkele wijzigingen aanbrengen in uw manifestbestand. In Manifest V2 werd de CSP gespecificeerd als een tekenreeks in het "content_security_policy" gebied van het manifest.

In Manifest V3 is de CSP nu een object met verschillende leden die alternatieve CSP-contexten vertegenwoordigen. In plaats van een enkele "content_security_policy" veld, moet u nu aparte velden voor opgeven "content_security_policy.extension_pages" en "content_security_policy.sandbox", afhankelijk van het type extensiepagina's dat u gebruikt.

Verwijder ook alle verwijzingen naar externe domeinen in het "script-src", "worker-src", "object-src" en "style-src" richtlijnen als ze aanwezig zijn. Het is belangrijk om deze updates in uw CSP door te voeren om de veiligheid en stabiliteit van uw extensie in Manifest V3 te waarborgen.

// 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'"

Wijzig de afhandeling van uw netwerkverzoeken

De laatste stap bij de overgang naar Manifest V3 is het aanpassen van de afhandeling van uw netwerkverzoeken. In Manifest V2 zou je de chrome.webRequest API om netwerkverzoeken te wijzigen. Deze API is in Manifest V3 echter vervangen door de declarativeNetRequest API.

Om deze nieuwe API te gebruiken, moet u het declarativeNetRequest toestemming in uw manifest en werk uw code bij om de nieuwe API te gebruiken. Een belangrijk verschil tussen de twee API's is dat de declarativeNetRequest API vereist dat u een lijst met vooraf bepaalde adressen opgeeft om te blokkeren, in plaats van volledige categorieën HTTP-verzoeken te kunnen blokkeren, zoals u zou kunnen met de chrome.webRequest API.

Het is belangrijk om deze wijzigingen in je code aan te brengen om ervoor te zorgen dat je extensie goed blijft functioneren onder Manifest V3. Hier is een voorbeeld van hoe u uw manifest zou aanpassen om de declarativeNetRequest API in Manifest V3:

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

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

U moet ook uw extensiecode bijwerken om de declarativeNetRequest API in plaats van de chrome.webRequest API.

Andere aspecten die u moet controleren

Wat ik heb behandeld, is slechts het topje van de ijsberg. Als ik alles zou willen behandelen, zou ik hier natuurlijk dagen kunnen zijn en zou het geen zin hebben om de Chrome Developers-handleidingen van Google te hebben. Hoewel wat ik behandelde u toekomstbestendig genoeg zal maken om uw Chrome-extensies in deze overgang te bewapenen, zijn hier enkele andere dingen waar u misschien naar wilt kijken om ervoor te zorgen dat uw extensies optimaal functioneren.

• Achtergrondscripts migreren naar de uitvoeringscontext van de servicemedewerker: Zoals eerder vermeld, vervangt Manifest V3 achtergrondpagina's door een enkele extensieservicewerker, dus het kan nodig zijn om achtergrondscripts bij te werken om ze aan te passen aan de uitvoeringscontext van de servicewerker.
• Het verenigen van **chrome.browserAction** en **chrome.pageAction** API's: Deze twee equivalente API's zijn samengevoegd tot één API in Manifest V3, dus het kan nodig zijn om naar de Action API te migreren.
• Functies migreren die een achtergrondcontext van Manifest V2 verwachten: De acceptatie van servicemedewerkers in Manifest V3 is niet compatibel met methoden zoals chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs() en chrome.extension.getViews(). Het kan nodig zijn om te migreren naar een ontwerp dat berichten doorgeeft tussen andere contexten en de servicemedewerker op de achtergrond.
• CORS-verzoeken in inhoudsscripts verplaatsen naar de achtergrondservicemedewerker: Het kan nodig zijn om CORS-verzoeken in inhoudsscripts naar de achtergrondservicemedewerker te verplaatsen om te voldoen aan Manifest V3.
• Migratie weg van het uitvoeren van externe code of willekeurige tekenreeksen: Manifest V3 staat niet langer de uitvoering van externe logica toe met behulp van chrome.scripting.executeScript({code: '...'}), eval() en new Function(). Het kan nodig zijn om alle externe code (JavaScript, WebAssembly, CSS) naar de extensiebundel te verplaatsen, script- en stijlreferenties bij te werken om bronnen uit de extensiebundel te laden en chrome.runtime.getURL() om resource-URL's tijdens runtime te bouwen.
• Updaten van bepaalde script- en CSS-methoden in de Tabs API: Zoals eerder vermeld, gaan verschillende methoden van de Tabs API naar de Scripting API in Manifest V3. Het kan nodig zijn om alle aanroepen naar deze methoden bij te werken om de juiste Manifest V3 API te gebruiken.

En nog veel meer!

Neem gerust even de tijd om op de hoogte te blijven van alle veranderingen. Deze verandering is immers onvermijdelijk en als je niet wilt dat je Manifest V2-extensies verloren gaan door het vermijden van deze overgang, besteed dan wat tijd aan het bewapenen met de nodige kennis.

Aan de andere kant, als je nieuw bent in het programmeren van Chrome-extensies en aan de slag wilt gaan, is een geweldige manier om dit te doen een duik in de wereld van de webontwikkelaarstools van Chrome. Dat heb ik gedaan door middel van een cursus op Linkedin leren, waardoor ik vrij snel op de hoogte was. Zodra je die basiskennis hebt, ga je terug naar dit artikel en vertaal je wat je weet naar Manifest V3!

Dus, hoe ga ik de functies in de nieuwe Manifest V3 in de toekomst gebruiken?

Welnu, voor mij is de overgang naar Manifest V3 en het verwijderen van de chrome.webRequest API lijkt extensies te verschuiven van datacentrische use-cases (zoals adblockers) naar meer functionele en applicatiegebaseerde toepassingen. Ik ben de laatste tijd weggebleven van applicatie-ontwikkeling omdat het nogal druk kan worden arbeidsintensief soms. Deze verschuiving zou echter kunnen zijn wat me terugbrengt!

De opkomst van AI-tools in de afgelopen tijd, waarvan vele met beschikbare API's, heeft geleid tot talloze nieuwe en frisse SaaS-applicaties. Persoonlijk denk ik dat het op een perfect moment komt met de verschuiving naar meer op applicaties gebaseerde Chrome-extensies! Hoewel veel van de oudere extensies mogelijk worden weggevaagd door deze overgang, zullen er veel nieuwe komen die zijn gebouwd rond nieuwe SaaS-ideeën.

Daarom is dit een opwindende update om op te springen en oude extensies te vernieuwen of nieuwe te bouwen! Persoonlijk zie ik veel mogelijkheden in het gebruik van API's waarbij AI wordt gebruikt in extensies om de browse-ervaring van een gebruiker te verbeteren. Maar dat is eigenlijk nog maar het topje van de ijsberg. Als u echt met uw eigen professionele extensies aan de slag wilt of contact wilt opnemen met bedrijven om extensies voor hen te bouwen/bij te werken, zou ik u aanraden uw Gmail-account upgraden voor de voordelen die het biedt bij het samenwerken, ontwikkelen en publiceren van extensies voor de Chrome Web Store.

Onthoud echter dat de eisen van elke ontwikkelaar anders zijn, dus leer wat u nodig heeft om uw huidige extensies draaiende te houden, of uw nieuwe extensies draaiende te houden!

• Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
• Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. Toegang hier.
• Bron: https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/