Hur man övergår till Manifest V3 för Chrome-tillägg

Även om jag inte är en vanlig Chrome-tilläggsprogrammerare, har jag verkligen kodat tillräckligt många tillägg och har en tillräckligt bred webbutvecklingsportfölj för att kunna ta mig runt uppgiften. Men alldeles nyligen fick jag en kund som avvisade en av mina förlängningar eftersom jag fick feedback om att min förlängning var "föråldrad".

När jag letade efter vad som var fel sopade jag min förlägenhet under mattan och började omedelbart min djupdykning tillbaka in i Chrome Extensions-världen. Tyvärr var informationen om Manifest V3 knapphändig och det var svårt för mig att snabbt förstå vad denna övergång gick ut på.

Det behöver inte sägas att med ett väntande jobb var jag tvungen att mödosamt navigera mig runt Googles Chrome Developer Documentation och ta reda på saker själv. Medan jag fick jobbet gjort ville jag inte att min kunskap och forskning inom detta område skulle gå till spillo och bestämde mig för att dela med mig av det jag önskar att jag kunde ha haft enkel tillgång till under min läranderesa.

Varför övergången till Manifest 3 är viktig

Manifest V3 är ett API som Google kommer att använda i sin Chrome-webbläsare. Det är efterföljaren till nuvarande API, Manifest V2, och styr hur Chrome-tillägg interagerar med webbläsaren. Manifest V3 introducerar betydande förändringar av reglerna för tillägg, av vilka några kommer att vara den nya stöttepelaren från V2 vi var vana vid.

Övergången till Manifest V3 kan sammanfattas så här:

1. Övergången har pågått sedan 2018.
2. Manifest V3 kommer officiellt att börja rullas ut i januari 2023.
3. I juni 2023 kommer tillägg som kör Manifest V2 inte längre att vara tillgängliga på Chrome Web Store.
4. Tillägg som inte följer de nya reglerna i Manifest V3 kommer så småningom att tas bort från Chrome Web Store.

Ett av huvudmålen med Manifest V3 är att göra användarna säkrare och förbättra den övergripande webbläsarupplevelsen. Tidigare förlitade sig många webbläsartillägg på kod i molnet, vilket innebär att det kan vara svårt bedöma om en förlängning var riskabel. Manifest V3 syftar till att ta itu med detta genom att kräva att tillägg innehåller all kod de kommer att köra, vilket gör att Google kan skanna dem och upptäcka potentiella risker. Det tvingar också tillägg att begära tillstånd från Google för de ändringar de kan implementera i webbläsaren.

Att hålla sig uppdaterad med Googles övergång till Manifest V3 är viktigt eftersom det introducerar nya regler för tillägg som syftar till att förbättra användarsäkerheten och den övergripande webbläsarupplevelsen, och tillägg som inte följer dessa regler kommer så småningom att tas bort från Chrome Web Lagra.

Kort sagt, allt ditt hårda arbete med att skapa tillägg som använde Manifest V2 kan vara förgäves om du inte gör denna övergång under de kommande månaderna.

De viktigaste skillnaderna mellan Manifest V2 och V3

Det finns många skillnader mellan de två, och även om jag starkt rekommenderar att du läser vidare Chromes guide för "Migrera till Manifest V3"., här är en kort sammanfattning av viktiga punkter:

1. Servicearbetare ersätt bakgrundssidor i Manifest V3.
2. Modifiering av nätverksbegäran hanteras med den nya declarativeNetRequest API i Manifest V3.
3. I Manifest V3 kan tillägg endast köra JavaScript som ingår i deras paket och kan inte använda fjärrvärd kod.
4. Manifest V3 introduceras promise stöd för många metoder, även om återuppringningar fortfarande stöds som ett alternativ.
5. Värdbehörigheter i Manifest V3 är ett separat element och måste anges i "host_permissions" fält.
6. Innehållssäkerhetspolicyn i Manifest V3 är ett objekt med medlemmar som representerar alternativa innehållssäkerhetspolicyer (CSP), snarare än en sträng som det var i Manifest V2.

I ett enkelt Chrome Extension's Manifest som ändrar en webbsidas bakgrund kan det se ut så här:

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

Om du tycker att några av taggarna ovan verkar främmande för dig, fortsätt att läsa för att ta reda på exakt vad du behöver veta.

Hur man smidigt övergår till Manifest V3

Jag har sammanfattat övergången till Manifest V3 i fyra nyckelområden. Naturligtvis, även om det finns många klockor och visselpipor i den nya Manifest V3 som måste implementeras från den gamla Manifest V2, kommer implementering av ändringar i dessa fyra områden att få ditt Chrome-tillägg på rätt spår för den eventuella övergången.

De fyra nyckelområdena är:

1. Uppdatering av ditt manifests grundläggande struktur.
2. Ändra dina värdbehörigheter.
3. Uppdatera innehållssäkerhetspolicyn.
4. Ändra hanteringen av din nätverksbegäran.

Med dessa fyra områden kommer ditt Manifests grunder att vara redo för övergången till Manifest V3. Låt oss titta på var och en av dessa nyckelaspekter i detalj och se hur vi kan arbeta för att framtidssäkra ditt Chrome-tillägg från den här övergången.

Uppdatering av ditt manifests grundläggande struktur

Att uppdatera ditt manifests grundläggande struktur är det första steget i övergången till Manifest V3. Den viktigaste förändringen du behöver göra är att ändra värdet på "manifest_version" element till 3, som avgör att du använder Manifest V3-funktionsuppsättningen.

En av de stora skillnaderna mellan Manifest V2 och V3 är ersättningen av bakgrundssidor med en enda anknytningstjänstearbetare i Manifest V3. Du måste registrera servicearbetaren under "background" fältet med hjälp av "service_worker" nyckel och ange en enda JavaScript-fil. Även om Manifest V3 inte stöder flera bakgrundsskript, kan du valfritt deklarera servicearbetaren som en ES-modul genom att ange "type": "module", som låter dig importera ytterligare kod.

I Manifest V3, den "browser_action" och "page_action" egenskaper förenas till en enda "action" fast egendom. Du måste ersätta dessa egenskaper med "action" i ditt manifest. På liknande sätt "chrome.browserAction" och "chrome.pageAction" API:er är förenade till ett enda "Action" API i Manifest V3, och du måste migrera till detta 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"
}

Sammantaget är uppdatering av ditt manifests grundläggande struktur ett avgörande steg i övergångsprocessen till Manifest V3, eftersom det låter dig dra nytta av de nya funktionerna och ändringarna som introduceras i den här versionen av API:et.

Ändra dina värdbehörigheter

Det andra steget i övergången till Manifest V3 är att ändra dina värdbehörigheter. I Manifest V2 anger du värdbehörigheter i "permissions" fältet i manifestfilen. I Manifest V3 är värdbehörigheter ett separat element, och du bör ange dem i "host_permissions" fältet i manifestfilen.

Här är ett exempel på hur du ändrar dina värdbehörigheter:

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

Uppdatera innehållssäkerhetspolicyn

För att uppdatera CSP för ditt Manifest V2-tillägg för att vara kompatibelt med Manifest V3, måste du göra några ändringar i din manifestfil. I Manifest V2 specificerades CSP som en sträng i "content_security_policy" manifestets fält.

I Manifest V3 är CSP nu ett objekt med olika medlemmar som representerar alternativa CSP-kontexter. Istället för en singel "content_security_policy" fältet måste du nu ange separata fält för "content_security_policy.extension_pages" och "content_security_policy.sandbox", beroende på vilken typ av tilläggssidor du använder.

Du bör också ta bort alla referenser till externa domäner i "script-src", "worker-src", "object-src"och "style-src" direktiv om de finns. Det är viktigt att göra dessa uppdateringar till din CSP för att säkerställa säkerheten och stabiliteten för ditt tillägg i 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'"

Ändra hanteringen av din nätverksbegäran

Det sista steget i övergången till Manifest V3 är att ändra din hantering av nätverksförfrågningar. I Manifest V2 skulle du ha använt chrome.webRequest API för att ändra nätverksbegäranden. Detta API ersätts dock i Manifest V3 av declarativeNetRequest API.

För att använda detta nya API måste du ange declarativeNetRequest behörighet i ditt manifest och uppdatera din kod för att använda det nya API:et. En viktig skillnad mellan de två API:erna är att declarativeNetRequest API kräver att du specificerar en lista med förutbestämda adresser att blockera, istället för att kunna blockera hela kategorier av HTTP-förfrågningar som du kunde med chrome.webRequest API.

Det är viktigt att göra dessa ändringar i din kod för att säkerställa att ditt tillägg fortsätter att fungera korrekt under Manifest V3. Här är ett exempel på hur du skulle ändra ditt manifest för att använda declarativeNetRequest API i Manifest V3:

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

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

Du måste också uppdatera din tilläggskod för att använda declarativeNetRequest API istället för chrome.webRequest API.

Andra aspekter du behöver kontrollera

Det jag har tagit upp är bara toppen av ett isberg. Naturligtvis, om jag ville täcka allt skulle jag kunna vara här i flera dagar och det skulle inte vara någon idé att ha Googles Chrome Developers guider. Även om det jag täckte kommer att göra dig tillräckligt framtidssäkrad för att beväpna dina Chrome-tillägg i den här övergången, här är några andra saker du kanske vill titta på för att säkerställa att dina tillägg fungerar i toppen av deras spel.

• Migrera bakgrundsskript till tjänstearbetarens exekveringskontext: Som nämnts tidigare ersätter Manifest V3 bakgrundssidor med en enskild tilläggstjänstarbetare, så det kan vara nödvändigt att uppdatera bakgrundsskript för att anpassa sig till tjänstearbetarens exekveringskontext.
• Att förena **chrome.browserAction** och **chrome.pageAction** API: Dessa två likvärdiga API:er är förenade till ett enda API i Manifest V3, så det kan bli nödvändigt att migrera till Action API.
• Migrera funktioner som förväntar sig en Manifest V2-bakgrundskontext: Antagandet av servicearbetare i Manifest V3 är inte kompatibelt med metoder som chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs()och chrome.extension.getViews(). Det kan vara nödvändigt att migrera till en design som skickar meddelanden mellan andra sammanhang och bakgrundstjänstarbetaren.
• Flytta CORS-förfrågningar i innehållsskript till bakgrundstjänstarbetaren: Det kan vara nödvändigt att flytta CORS-förfrågningar i innehållsskript till bakgrundstjänstarbetaren för att följa Manifest V3.
• Migrera bort från exekvering av extern kod eller godtyckliga strängar: Manifest V3 tillåter inte längre exekvering av extern logik med hjälp av chrome.scripting.executeScript({code: '...'}), eval()och new Function(). Det kan vara nödvändigt att flytta all extern kod (JavaScript, WebAssembly, CSS) till tilläggspaketet, uppdatera skript- och stilreferenser för att ladda resurser från tilläggspaketet och använda chrome.runtime.getURL() för att bygga resurs-URL:er vid körning.
• Uppdatering av vissa skript- och CSS-metoder i Tabs API: Som nämnts tidigare flyttar flera metoder från Tabs API till Scripting API i Manifest V3. Det kan vara nödvändigt att uppdatera alla anrop till dessa metoder för att använda rätt Manifest V3 API.

Och många fler!

Ta gärna lite tid att få dig uppdaterad om alla förändringar. När allt kommer omkring är denna förändring oundviklig och om du inte vill att dina Manifest V2-tillägg ska gå förlorade på grund av att du undviker denna övergång, ägna lite tid åt att beväpna dig med nödvändig kunskap.

Å andra sidan, om du är ny på att programmera Chrome-tillägg och vill komma igång, är ett bra sätt att gå tillväga att dyka in i världen av Chromes webbutvecklarverktyg. Det gjorde jag genom en kurs på Linkedin Learning, vilket fick mig i farten ganska snabbt. När du har den grundläggande kunskapen, kom tillbaka till den här artikeln och översätt det du vet till Manifest V3!

Så, hur kommer jag att använda funktionerna i nya Manifest V3 framöver?

Tja, för mig, övergången till Manifest V3 och borttagningen av chrome.webRequest API verkar flytta bort tillägg från datacentrerade användningsfall (som annonsblockerare) till mer funktionella och applikationsbaserade användningar. Jag har hållit mig borta från applikationsutveckling på sistone eftersom det kan bli ganska Resursintensiv ibland. Men det här skiftet kan vara det som för mig tillbaka!

Framväxten av AI-verktyg på senare tid, många med tillgängliga API:er, har utlöst massor av nya och fräscha SaaS-applikationer. Personligen tror jag att det kommer vid en perfekt tidpunkt med övergången till mer applikationsbaserade Chrome-tillägg! Även om många av de äldre tilläggen kan utplånas från den här övergången, kommer många nya byggda kring nya SaaS-idéer att ta sin plats.

Därför är detta en spännande uppdatering att hoppa på och förnya gamla tillägg eller bygga nya! Personligen ser jag många möjligheter i att använda API:er som innebär att AI används i tillägg för att förbättra en användares surfupplevelse. Men det är egentligen bara toppen av isberget. Om du är ute efter att verkligen komma in i saker med dina egna professionella tillägg eller nå ut till företag för att bygga/uppdatera tillägg för dem, skulle jag rekommendera uppgradering av ditt Gmail-konto för fördelarna det ger i att samarbeta, utveckla och publicera tillägg till Chrome Web Store.

Kom dock ihåg att alla utvecklares krav är olika, så lär dig vad du behöver för att hålla dina nuvarande tillägg flytande, eller dina nya igång!

• SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
• Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. Tillgång här.
• Källa: https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/