Slik går du over til Manifest V3 for Chrome-utvidelser

Selv om jeg ikke er en vanlig Chrome-utvidelsesprogrammerer, har jeg absolutt kodet nok utvidelser og har en bred nok nettutviklingsportefølje til å kjenne meg rundt oppgaven. Men nylig fikk jeg en klient som avviste en av utvidelsene mine da jeg fikk tilbakemelding om at utvidelsen min var "utdatert".

Mens jeg strevde etter å finne ut hva som var galt, feide jeg flauheten min under teppet og begynte umiddelbart mitt dypdykk tilbake i Chrome Extensions-verdenen. Dessverre var det lite informasjon om Manifest V3, og det var vanskelig for meg å forstå raskt hva denne overgangen dreide seg om.

Unødvendig å si, med en ventende jobb, måtte jeg møysommelig navigere meg rundt Googles Chrome-utviklerdokumentasjon og finne ut av ting selv. Mens jeg fikk jobben gjort, ønsket jeg ikke at kunnskapen og forskningen min på dette området skulle gå til spille, og bestemte meg for å dele det jeg skulle ønske jeg kunne hatt lett tilgang til i min læringsreise.

Hvorfor overgangen til Manifest 3 er viktig

Manifest V3 er et API som Google vil bruke i Chrome-nettleseren. Det er etterfølgeren til det nåværende API, Manifest V2, og styrer hvordan Chrome-utvidelser samhandler med nettleseren. Manifest V3 introduserer betydelige endringer i reglene for utvidelser, noen av dem vil være den nye bærebjelken fra V2 vi var vant til.

Overgangen til Manifest V3 kan oppsummeres slik:

1. Overgangen har pågått siden 2018.
2. Manifest V3 vil offisielt begynne å rulle ut i januar 2023.
3. Innen juni 2023 vil utvidelser som kjører Manifest V2 ikke lenger være tilgjengelige på Chrome Nettmarked.
4. Utvidelser som ikke er i samsvar med de nye reglene introdusert i Manifest V3, vil til slutt bli fjernet fra Chrome Nettmarked.

Et av hovedmålene til Manifest V3 er å gjøre brukere tryggere og forbedre den generelle nettleseropplevelsen. Tidligere var mange nettleserutvidelser avhengig av kode i skyen, noe som betyr at det kan være vanskelig å gjøre det vurdere om en forlengelse var risikabel. Manifest V3 tar sikte på å løse dette ved å kreve at utvidelser inneholder all koden de kjører, slik at Google kan skanne dem og oppdage potensielle risikoer. Det tvinger også utvidelser til å be om tillatelse fra Google for endringene de kan implementere i nettleseren.

Å holde seg oppdatert med Googles overgang til Manifest V3 er viktig fordi den introduserer nye regler for utvidelser som tar sikte på å forbedre brukersikkerheten og den generelle nettleseropplevelsen, og utvidelser som ikke overholder disse reglene vil til slutt bli fjernet fra Chrome Web Butikk.

Kort sagt, alt det harde arbeidet ditt med å lage utvidelser som brukte Manifest V2 kan være for intet hvis du ikke gjør denne overgangen i løpet av de kommende månedene.

De viktigste forskjellene mellom Manifest V2 og V3

Det er mange forskjeller mellom de to, og selv om jeg anbefaler at du leser deg videre Chromes veiledning for «Migrering til Manifest V3»., her er et kort og godt sammendrag av hovedpunkter:

1. Servicearbeidere erstatte bakgrunnssider i Manifest V3.
2. Modifisering av nettverksforespørsel håndteres med den nye declarativeNetRequest API i Manifest V3.
3. I Manifest V3 kan utvidelser bare kjøre JavaScript som er inkludert i pakken deres og kan ikke bruke eksternt vertsbasert kode.
4. Manifest V3 introduserer promise støtte til mange metoder, selv om tilbakeringing fortsatt støttes som et alternativ.
5. Vertstillatelser i Manifest V3 er et eget element og må spesifiseres i "host_permissions" feltet.
6. Innholdssikkerhetspolicyen i Manifest V3 er et objekt med medlemmer som representerer alternative innholdssikkerhetspolicy (CSP)-kontekster, i stedet for en streng slik den var i Manifest V2.

I et enkelt Chrome-utvidelsesmanifest som endrer en nettsides bakgrunn, kan det se slik ut:

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

Hvis du synes at noen av taggene ovenfor virker fremmede for deg, fortsett å lese for å finne ut nøyaktig hva du trenger å vite.

Slik går du smidig over til Manifest V3

Jeg har oppsummert overgangen til Manifest V3 i fire nøkkelområder. Selv om det er mange klokker og plystre i den nye Manifest V3 som må implementeres fra den gamle Manifest V2, vil implementering av endringer i disse fire områdene få Chrome-utvidelsen din godt på rett spor for den eventuelle overgangen.

De fire hovedområdene er:

1. Oppdatering av manifestets grunnleggende struktur.
2. Endre vertstillatelsene dine.
3. Oppdater innholdssikkerhetspolicyen.
4. Endre håndteringen av nettverksforespørselen din.

Med disse fire områdene vil det grunnleggende om Manifestet ditt være klart for overgangen til Manifest V3. La oss se på hver av disse nøkkelaspektene i detalj og se hvordan vi kan arbeide for å fremtidssikre Chrome-utvidelsen din fra denne overgangen.

Oppdatering av manifestets grunnleggende struktur

Å oppdatere manifestets grunnleggende struktur er det første trinnet i overgangen til Manifest V3. Den viktigste endringen du må gjøre er å endre verdien av "manifest_version" element til 3, som avgjør at du bruker Manifest V3-funksjonssettet.

En av de største forskjellene mellom Manifest V2 og V3 er erstatningen av bakgrunnssider med en enkelt utvidelsestjenestearbeider i Manifest V3. Du må registrere servicearbeideren under "background" feltet ved å bruke "service_worker" nøkkel og spesifiser en enkelt JavaScript-fil. Selv om Manifest V3 ikke støtter flere bakgrunnsskript, kan du valgfritt erklære tjenestearbeideren som en ES-modul ved å spesifisere "type": "module", som lar deg importere ytterligere kode.

I Manifest V3 er det "browser_action" og "page_action" eiendommer er samlet til en enkelt "action" eiendom. Du må erstatte disse egenskapene med "action" i manifestet ditt. På samme måte "chrome.browserAction" og "chrome.pageAction" API-er er samlet til en enkelt "Action" API i Manifest V3, og du må migrere til denne 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"
}

Totalt sett er oppdatering av manifestets grunnleggende struktur et avgjørende trinn i overgangsprosessen til Manifest V3, siden det lar deg dra nytte av de nye funksjonene og endringene som er introdusert i denne versjonen av API.

Endre vertstillatelsene dine

Det andre trinnet i overgangen til Manifest V3 er å endre vertstillatelsene dine. I Manifest V2 angir du vertstillatelser i "permissions" feltet i manifestfilen. I Manifest V3 er vertstillatelser et eget element, og du bør spesifisere dem i "host_permissions" feltet i manifestfilen.

Her er et eksempel på hvordan du endrer vertstillatelsene dine:

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

Oppdater innholdssikkerhetspolicyen

For å oppdatere CSP-en til Manifest V2-utvidelsen til å være kompatibel med Manifest V3, må du gjøre noen endringer i manifestfilen. I Manifest V2 ble CSP angitt som en streng i "content_security_policy" felt av manifestet.

I Manifest V3 er CSP nå et objekt med forskjellige medlemmer som representerer alternative CSP-kontekster. I stedet for en singel "content_security_policy" felt, må du nå angi separate felt for "content_security_policy.extension_pages" og "content_security_policy.sandbox", avhengig av typen utvidelsessider du bruker.

Du bør også fjerne eventuelle referanser til eksterne domener i "script-src", "worker-src", "object-src"og "style-src" direktiver hvis de er tilstede. Det er viktig å gjøre disse oppdateringene til CSP-en din for å sikre sikkerheten og stabiliteten til utvidelsen din 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'"

Endre håndteringen av nettverksforespørselen din

Det siste trinnet i overgangen til Manifest V3 er å endre håndteringen av nettverksforespørselen din. I Manifest V2 ville du ha brukt chrome.webRequest API for å endre nettverksforespørsler. Imidlertid er denne API-en erstattet i Manifest V3 av declarativeNetRequest API.

For å bruke denne nye API-en, må du spesifisere declarativeNetRequest tillatelse i manifestet og oppdater koden for å bruke den nye APIen. En viktig forskjell mellom de to API-ene er at declarativeNetRequest API krever at du spesifiserer en liste over forhåndsbestemte adresser som skal blokkeres, i stedet for å kunne blokkere hele kategorier av HTTP-forespørsler slik du kunne med chrome.webRequest API.

Det er viktig å gjøre disse endringene i koden din for å sikre at utvidelsen fortsetter å fungere ordentlig under Manifest V3. Her er et eksempel på hvordan du vil endre manifestet ditt for å bruke declarativeNetRequest API i Manifest V3:

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

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

Du må også oppdatere utvidelseskoden for å bruke declarativeNetRequest API i stedet for chrome.webRequest API.

Andre aspekter du må sjekke

Det jeg har dekket er bare toppen av isfjellet. Selvfølgelig, hvis jeg ønsket å dekke alt, kunne jeg vært her i flere dager, og det ville ikke være noen vits i å ha Googles Chrome-utviklerveiledninger. Selv om det jeg dekket vil ha deg fremtidssikret nok til å aktivere Chrome-utvidelsene dine i denne overgangen, er her noen andre ting du kanskje vil se på for å sikre at utvidelsene dine fungerer på toppen av spillet.

• Migrering av bakgrunnsskript til tjenestearbeiderutførelseskonteksten: Som nevnt tidligere, erstatter Manifest V3 bakgrunnssider med en enkelt utvidelsestjenestearbeider, så det kan være nødvendig å oppdatere bakgrunnsskript for å tilpasse seg tjenestearbeiderens utførelseskontekst.
• Å forene **chrome.browserAction** og **chrome.pageAction** APIer: Disse to likeverdige API-ene er forent til én enkelt API i Manifest V3, så det kan være nødvendig å migrere til Action API.
• Migrering av funksjoner som forventer en Manifest V2-bakgrunnskontekst: Adopsjonen av servicearbeidere i Manifest V3 er ikke kompatibel med metoder som chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs()og chrome.extension.getViews(). Det kan være nødvendig å migrere til et design som sender meldinger mellom andre kontekster og bakgrunnstjenestearbeideren.
• Flytting av CORS-forespørsler i innholdsskript til bakgrunnstjenestearbeideren: Det kan være nødvendig å flytte CORS-forespørsler i innholdsskript til bakgrunnstjenestearbeideren for å overholde Manifest V3.
• Migrerer bort fra å kjøre ekstern kode eller vilkårlige strenger: Manifest V3 tillater ikke lenger utførelse av ekstern logikk ved hjelp av chrome.scripting.executeScript({code: '...'}), eval()og new Function(). Det kan være nødvendig å flytte all ekstern kode (JavaScript, WebAssembly, CSS) inn i utvidelsespakken, oppdatere skript- og stilreferanser for å laste ressurser fra utvidelsespakken og bruke chrome.runtime.getURL() å bygge ressurs-URL-er under kjøring.
• Oppdatering av visse skript- og CSS-metoder i Tabs API: Som nevnt tidligere, flytter flere metoder fra Tabs API til Scripting API i Manifest V3. Det kan være nødvendig å oppdatere eventuelle kall til disse metodene for å bruke riktig Manifest V3 API.

Og mange flere!

Ta gjerne litt tid til å få deg oppdatert på alle endringene. Tross alt er denne endringen uunngåelig, og hvis du ikke vil at Manifest V2-utvidelsene dine skal gå tapt på grunn av å unngå denne overgangen, så bruk litt tid på å ruste deg med den nødvendige kunnskapen.

På den annen side, hvis du er ny til å programmere Chrome-utvidelser og ønsker å komme i gang, er en fin måte å gå frem på å dykke inn i Chromes nettutviklerverktøy. Det gjorde jeg gjennom et kurs på Linkedin Learning, som fikk meg opp i fart ganske raskt. Når du har den grunnleggende kunnskapen, kom tilbake til denne artikkelen og oversett det du vet til Manifest V3!

Så hvordan vil jeg bruke funksjonene i den nye Manifest V3 fremover?

Vel, for meg, overgangen til Manifest V3 og fjerningen av chrome.webRequest API ser ut til å flytte utvidelser bort fra datasentriske brukstilfeller (som annonseblokkere) til mer funksjonell og applikasjonsbasert bruk. Jeg har holdt meg unna applikasjonsutvikling i det siste som det kan bli ganske ressurskrevende til tider. Imidlertid kan dette skiftet være det som bringer meg tilbake!

Fremveksten av AI-verktøy i nyere tid, mange med tilgjengelige API-er, har utløst tonnevis av nye og ferske SaaS-applikasjoner. Personlig tror jeg at det kommer på et perfekt tidspunkt med overgangen til mer applikasjonsbaserte Chrome-utvidelser! Mens mange av de eldre utvidelsene kan bli utslettet fra denne overgangen, vil mange nye bygget rundt nye SaaS-ideer komme til å ta deres plass.

Derfor er dette en spennende oppdatering å hoppe på og fornye gamle utvidelser eller bygge nye! Personlig ser jeg mange muligheter i å bruke APIer som innebærer at AI brukes i utvidelser for å forbedre en brukers nettleseropplevelse. Men det er egentlig bare toppen av isfjellet. Hvis du virkelig ønsker å sette deg inn i ting med dine egne profesjonelle utvidelser eller kontakte selskaper for å bygge/oppdatere utvidelser for dem, vil jeg anbefale oppgradering av Gmail-kontoen din for fordelene det gir ved å samarbeide, utvikle og publisere utvidelser til Chrome Nettmarked.

Husk imidlertid at alle utvikleres krav er forskjellige, så finn ut hva du trenger for å holde de nåværende utvidelsene flytende, eller de nye i gang!

• SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
• Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. Tilgang her.
• kilde: https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/