Átállás a Manifest V3-ra a Chrome-bővítményekhez

Bár nem vagyok rendszeres Chrome-bővítmények programozója, minden bizonnyal elég bővítményt kódoltam, és elég széles webfejlesztési portfólióval rendelkezem ahhoz, hogy eligazodjak a feladatban. Nemrég azonban egy ügyfelem elutasította az egyik bővítményemet, mivel olyan visszajelzést kaptam, hogy a bővítményem „elavult”.

Miközben azon kapkodtam, hogy kiderítsem, mi a baj, zavaromat a szőnyeg alá söpörtem, és azonnal megkezdtem a mélyrepülést a Chrome Extensions világába. Sajnos a Manifest V3-ról kevés információ állt rendelkezésre, és nehezen tudtam gyorsan megérteni, miről is szól ez az átállás.

Mondanom sem kell, hogy egy függőben lévő munkám miatt gondosan kellett eligazodnom A Google Chrome fejlesztői dokumentációja és kitalálom magam. Amíg elvégeztem a munkát, nem akartam, hogy az e területen szerzett tudásom és kutatásaim veszendőbe menjenek, és úgy döntöttem, hogy megosztom azt, amit bárcsak könnyen elérhettem volna tanulási utam során.

Miért fontos a Manifest 3-ra való átállás?

A Manifest V3 egy API, amelyet a Google a Chrome böngészőjében fog használni. Ez a jelenlegi API, a Manifest V2 utódja, és szabályozza, hogy a Chrome-bővítmények hogyan működnek együtt a böngészővel. A Manifest V3 jelentős változásokat vezet be a kiterjesztések szabályaiban, amelyek egy része a V2 új alappillére lesz, amit megszokhattunk.

Átállás a Manifest V3-ra így foglalható össze:

1. Az átállás 2018 óta tart.
2. A Manifest V3 hivatalosan 2023 januárjában indul.
3. 2023 júniusától a Manifest V2-t futtató bővítmények már nem lesznek elérhetők a Chrome Internetes áruházban.
4. Azokat a bővítményeket, amelyek nem felelnek meg a Manifest V3-ban bevezetett új szabályoknak, végül eltávolítjuk a Chrome Internetes áruházból.

A Manifest V3 egyik fő célja a felhasználók biztonságának növelése és az általános böngészési élmény javítása. Korábban sok böngészőbővítmény a felhőben lévő kódra támaszkodott, ami azt jelenti, hogy nehéz lehetett értékelje, hogy a meghosszabbítás kockázatos volt-e. A Manifest V3 célja ennek megoldása azáltal, hogy megköveteli a bővítményektől, hogy tartalmazzák az általuk futtatott összes kódot, lehetővé téve a Google számára, hogy átvizsgálja őket, és észlelje a lehetséges kockázatokat. Arra is kényszeríti a bővítményeket, hogy engedélyt kérjenek a Google-tól a böngészőben végrehajtható változtatásokhoz.

Fontos, hogy naprakész maradjon a Google Manifest V3-ra való átállásával kapcsolatban, mert új szabályokat vezet be a bővítményekre vonatkozóan, amelyek célja a felhasználói biztonság és a böngésző általános élményének javítása, és a szabályoknak nem megfelelő bővítményeket végül eltávolítjuk a Chrome Webről. Bolt.

Röviden, a Manifest V2-t használó bővítmények létrehozásában végzett kemény munkája hiábavaló lehet, ha nem hajtja végre az átállást a következő hónapokban.

A legfontosabb különbségek a Manifest V2 és a V3 között

Sok különbség van a kettő között, és bár nagyon ajánlom, hogy olvassa el A Chrome „Migrating to Manifest V3” útmutatója, íme a legfontosabb pontok rövid és édes összefoglalása:

1. Szolgáltató dolgozók cserélje ki a háttéroldalakat a Manifest V3-ban.
2. A hálózati kérés módosítását az új declarativeNetRequest API a Manifest V3-ban.
3. A Manifest V3-ban a bővítmények csak a csomagjukban lévő JavaScriptet tudják végrehajtani, és nem használhatnak távolról tárolt kódot.
4. A Manifest V3 bemutatja promise számos módszer támogatása, bár a visszahívások továbbra is támogatottak alternatívaként.
5. A Manifest V3 gazdagépengedélyei külön elemet képeznek, és meg kell adni őket a "host_permissions" mező.
6. A Manifest V3 tartalombiztonsági házirendje egy olyan objektum, amelynek tagjai alternatív tartalombiztonsági házirend (CSP) kontextust képviselnek, nem pedig egy karakterlánc, mint a Manifest V2-ben.

Egy egyszerű Chrome-bővítmény jegyzékében, amely megváltoztatja a weboldal hátterét, ez így nézhet ki:

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

Ha úgy találja, hogy a fenti címkék közül néhány idegen az Ön számára, olvassa tovább, hogy megtudja, pontosan mit kell tudnia.

Hogyan lehet zökkenőmentesen áttérni a Manifest V3-ra

A Manifest V3-ra való átállást négy kulcsfontosságú területen foglaltam össze. Természetesen, bár az új Manifest V3-ban sok csengő és síp található, amelyeket a régi Manifest V2-ből kell implementálni, a változtatások végrehajtása ezen a négy területen a Chrome-bővítmény jó úton halad az esetleges átálláshoz.

A négy kulcsterület a következő:

1. A Manifest alapvető szerkezetének frissítése.
2. Módosítsa a gazdagép engedélyeit.
3. Frissítse a tartalombiztonsági szabályzatot.
4. Módosítsa a hálózati kérések kezelését.

Ezzel a négy területtel a Manifest alapjai készen állnak a Manifest V3-ra való átállásra. Nézzük meg ezeket a kulcsfontosságú szempontokat részletesen, és nézzük meg, hogyan dolgozhatunk a Chrome-bővítmény jövőbiztosabbá tételén ebből az átállásból.

A Manifest alapvető szerkezetének frissítése

A Manifest V3-ra való átállás első lépése a jegyzék alapvető szerkezetének frissítése. A legfontosabb változtatás, amelyet végre kell hajtania, az a "manifest_version" elem a 3, amely meghatározza, hogy a Manifest V3 szolgáltatáskészletet használja.

Az egyik fő különbség a Manifest V2 és a V3 között az, hogy a Manifest V3-ban a háttéroldalakat egyetlen bővítmény-szolgáltatási dolgozóval helyettesítik. A szervizmunkást regisztrálnia kell a "background" mező segítségével a "service_worker" kulcsot, és adjon meg egyetlen JavaScript-fájlt. Annak ellenére, hogy a Manifest V3 nem támogat több háttérszkriptet, opcionálisan deklarálhatja a szervizmunkát ES-modulként, ha megadja "type": "module", amely lehetővé teszi további kód importálását.

A Manifest V3-ban a "browser_action" és a "page_action" tulajdonságok egységesek "action" ingatlan. Ezeket a tulajdonságokat a következőre kell cserélnie "action" a manifesztében. Hasonlóképpen a "chrome.browserAction" és a "chrome.pageAction" Az API-k egyetlen „Action” API-ba vannak egyesítve a Manifest V3-ban, és át kell térnie erre az API-ra.

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

Összességében a jegyzék alapstruktúrájának frissítése döntő lépés a Manifest V3-ra való átállás folyamatában, mivel lehetővé teszi az API jelen verziójában bevezetett új funkciók és változtatások előnyeinek kihasználását.

Módosítsa a gazdagép engedélyeit

A Manifest V3-ra való átállás második lépése a gazdagép-engedélyek módosítása. A Manifest V2-ben megadhatja a gazdagép-engedélyeket a "permissions" mezőt a jegyzékfájlban. A Manifest V3-ban a gazdagép-engedélyek külön elemet képeznek, és ezeket a következőkben kell megadni "host_permissions" mezőt a jegyzékfájlban.

Íme egy példa a gazdagép engedélyeinek módosítására:

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

Frissítse a tartalombiztonsági szabályzatot

Annak érdekében, hogy a Manifest V2 kiterjesztés CSP-jét frissítse, hogy kompatibilis legyen a Manifest V3-mal, néhány változtatást kell végrehajtania a jegyzékfájlban. A Manifest V2-ben a CSP karakterláncként volt megadva a "content_security_policy" a manifeszt mezője.

A Manifest V3-ban a CSP mostantól egy objektum, amelynek különböző tagjai alternatív CSP-környezeteket képviselnek. Egyetlen helyett "content_security_policy" mezőben, most külön mezőket kell megadnia "content_security_policy.extension_pages" és a "content_security_policy.sandbox", attól függően, hogy milyen típusú bővítményoldalakat használ.

Ezenkívül távolítsa el a külső tartományokra való hivatkozásokat a "script-src", "worker-src", "object-src"és "style-src" utasításokat, ha jelen vannak. Fontos, hogy ezeket a frissítéseket elvégezze a CSP-ben, hogy biztosítsa a Manifest V3-ban lévő bővítmény biztonságát és stabilitását.

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

Módosítsa a hálózati kérések kezelését

A Manifest V3-ra való átállás utolsó lépése a hálózati kérések kezelésének módosítása. A Manifest V2-ben használta volna a chrome.webRequest API a hálózati kérések módosításához. Ezt az API-t azonban a Manifest V3-ban a declarativeNetRequest API.

Az új API használatához meg kell adnia a declarativeNetRequest engedélyt a jegyzékben, és frissítse a kódot az új API használatához. Az egyik legfontosabb különbség a két API között az, hogy a declarativeNetRequest Az API-hoz meg kell adnia a blokkolandó, előre meghatározott címek listáját, ahelyett, hogy a HTTP-kérések teljes kategóriáit blokkolná, ahogyan azt a chrome.webRequest API.

Fontos, hogy végrehajtsa ezeket a módosításokat a kódban, hogy a bővítmény továbbra is megfelelően működjön a Manifest V3 alatt. Íme egy példa arra, hogyan módosíthatja a jegyzéket a declarativeNetRequest API a Manifest V3-ban:

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

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

A használatához frissítenie kell a bővítmény kódját is declarativeNetRequest API helyett a chrome.webRequest API.

Egyéb szempontok, amelyeket ellenőrizni kell

Amit leírtam, az csak a jéghegy csúcsa. Természetesen, ha mindent le akarok fedni, napokig itt lehetnék, és nem lenne értelme a Google Chrome Developers útmutatóinak. Noha az általam leírtak eléggé jövőbiztosak lesznek ahhoz, hogy élesítsék Chrome-bővítményeit ebben az átállásban, íme néhány egyéb dolog, amelyet érdemes megnéznie annak biztosítására, hogy a bővítmények a játék csúcsán működjenek.

• A háttérszkriptek áttelepítése a Service Worker végrehajtási környezetébe: Amint azt korábban említettük, a Manifest V3 lecseréli a háttéroldalakat egyetlen kiterjesztésű szolgáltatásdolgozóval, ezért előfordulhat, hogy frissíteni kell a háttérszkripteket, hogy alkalmazkodjanak a szervizmunkás végrehajtási környezetéhez.
• Egységesítő a **chrome.browserAction** és a **chrome.pageAction** API-k: Ez a két egyenértékű API egyetlen API-ba van egyesítve a Manifest V3-ban, ezért előfordulhat, hogy át kell térni az Action API-ra.
• A Manifest V2 háttérkontextusra váró függvények áttelepítése: A Manifest V3-ban a szervizmunkások alkalmazása nem kompatibilis az olyan módszerekkel, mint pl chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs()és chrome.extension.getViews(). Előfordulhat, hogy át kell térni egy olyan kialakításra, amely átadja az üzeneteket más környezetek és a háttérszolgáltatás dolgozója között.
• A tartalomszkriptekben lévő CORS-kérelmek áthelyezése a háttérszolgáltatás dolgozójába: Előfordulhat, hogy a tartalomszkriptekben lévő CORS-kérelmeket át kell helyezni a háttérszolgáltatás dolgozójába, hogy megfeleljenek a Manifest V3-nak.
• A külső kód vagy tetszőleges karakterláncok végrehajtásától való átállás: A Manifest V3 már nem teszi lehetővé külső logika végrehajtását chrome.scripting.executeScript({code: '...'}), eval()és new Function(). Előfordulhat, hogy az összes külső kódot (JavaScript, WebAssembly, CSS) át kell helyezni a bővítménycsomagba, frissíteni kell a szkript- és stílushivatkozásokat az erőforrások betöltéséhez a bővítménycsomagból, és chrome.runtime.getURL() erőforrás URL-ek létrehozásához futás közben.
• Bizonyos parancsfájlok és CSS-módszerek frissítése a Tabs API-ban: Amint azt korábban említettük, a Manifest V3-ban számos módszer vált át a Tabs API-ról a Scripting API-ra. A megfelelő Manifest V3 API használatához szükség lehet ezen metódusok hívásainak frissítésére.

És még sok más!

Szánjon rá egy kis időt, hogy naprakész legyen az összes változásról. Végtére is, ez a változás elkerülhetetlen, és ha nem szeretné, hogy a Manifest V2 bővítményei elveszjenek az átmenet elkerülése miatt, akkor szánjon egy kis időt a szükséges ismeretek megszerzésére.

Másrészt, ha még nem ismeri a Chrome-bővítmények programozását, és el szeretné kezdeni a kezdést, nagyszerű módja annak, hogy belemerüljön a Chrome webfejlesztői eszközeinek világába. Ezt egy tanfolyamon keresztül tettem Linkedin tanulás, ami elég gyorsan felpörgett. Ha rendelkezik ezzel az alapismerettel, térjen vissza ehhez a cikkhez, és fordítsa le tudását a Manifest V3-ra!

Szóval, hogyan fogom használni a továbbiakban az új Manifest V3 szolgáltatásait?

Nos, számomra a Manifest V3-ra való átállás és a chrome.webRequest Úgy tűnik, hogy az API a bővítményeket az adatközpontú felhasználási esetekről (például a hirdetésblokkolókról) a funkcionálisabb és alkalmazásalapú felhasználások felé tolja el. Az utóbbi időben távol tartottam magam az alkalmazásfejlesztéstől, mivel ez eléggé válhat erőforrás-igényes időnként. Azonban ez a váltás lehet az, ami visszahoz!

Az AI-eszközök közelmúltbeli térnyerése, amelyek közül sok már használható API-kkal is rendelkezik, rengeteg új és friss SaaS-alkalmazást indított el. Személy szerint úgy gondolom, hogy tökéletes időben érkezik az alkalmazásalapú Chrome-bővítményekre való átállás! Noha a régebbi bővítmények közül sok kitörölhető ebből az átállásból, rengeteg új, az új SaaS-ötletek köré épülő új kerül majd a helyükre.

Ezért ez egy izgalmas frissítés a régi bővítmények feljavításához vagy újak építéséhez! Személy szerint sok lehetőséget látok az API-k használatában, amelyek magukban foglalják az AI-t a bővítményekben, hogy javítsák a felhasználók böngészési élményét. De ez valójában csak a jéghegy csúcsa. Ha saját professzionális bővítményeivel szeretne igazán belemenni a dolgokba, vagy cégekkel szeretne bővítményeket készíteni/frissíteni, azt javaslom. a Gmail-fiók frissítése a Chrome Internetes áruház bővítményeinek együttműködésében, fejlesztésében és közzétételében nyújtott előnyökért.

Ne feledje azonban, hogy minden fejlesztő követelményei eltérőek, ezért ismerje meg, mire van szüksége a jelenlegi vagy az új bővítmények életben tartásához!

• SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. Hozzáférés itt.
• Forrás: https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/