Jak przejść na Manifest V3 dla rozszerzeń Chrome

Chociaż nie jestem zwykłym programistą rozszerzeń Chrome, z pewnością zakodowałem wystarczająco dużo rozszerzeń i mam wystarczająco szerokie portfolio programistów internetowych, aby znać się na tym zadaniu. Jednak niedawno klient odrzucił jedno z moich rozszerzeń, ponieważ otrzymałem informację, że moje rozszerzenie jest „nieaktualne”.

Gdy próbowałem dowiedzieć się, co jest nie tak, zamiatałem swoje zawstydzenie pod dywan i natychmiast zacząłem zagłębiać się z powrotem w świat rozszerzeń Chrome. Niestety informacji na temat Manifest V3 było niewiele i trudno było mi szybko zrozumieć, o co chodzi w tym przejściu.

Nie trzeba dodawać, że z oczekującą pracą musiałem skrupulatnie poruszać się po okolicy Dokumentacja Google dla programistów Chrome i wymyślić coś dla siebie. Wykonując swoją pracę, nie chciałem, aby moja wiedza i badania w tej dziedzinie poszły na marne i postanowiłem podzielić się tym, do czego chciałbym mieć łatwy dostęp w mojej podróży edukacyjnej.

Dlaczego przejście na Manifest 3 jest ważne

Manifest V3 to interfejs API, którego Google będzie używać w swojej przeglądarce Chrome. Jest następcą obecnego interfejsu API, Manifest V2, i reguluje sposób interakcji rozszerzeń Chrome z przeglądarką. Manifest V3 wprowadza znaczące zmiany w zasadach dotyczących rozszerzeń, z których część będzie nową podstawą wersji V2, do której byliśmy przyzwyczajeni.

Przejście na Manifest V3 można podsumować tak:

1. Transformacja trwa od 2018 roku.
2. Wdrażanie Manifest V3 oficjalnie rozpocznie się w styczniu 2023 r.
3. Do czerwca 2023 r. rozszerzenia obsługujące Manifest V2 nie będą już dostępne w Chrome Web Store.
4. Rozszerzenia niezgodne z nowymi zasadami wprowadzonymi w Manifest V3 zostaną ostatecznie usunięte z Chrome Web Store.

Jednym z głównych celów Manifest V3 jest zwiększenie bezpieczeństwa użytkowników i poprawa ogólnego doświadczenia przeglądarki. Wcześniej wiele rozszerzeń przeglądarki opierało się na kodzie w chmurze, co oznaczało, że może to być trudne ocenić, czy przedłużenie było ryzykowne. Manifest V3 ma na celu rozwiązanie tego problemu, wymagając, aby rozszerzenia zawierały cały kod, który będą uruchamiać, umożliwiając Google ich skanowanie i wykrywanie potencjalnych zagrożeń. Zmusza to również rozszerzenia do żądania zgody od Google na zmiany, które mogą zaimplementować w przeglądarce.

Bycie na bieżąco z przejściem Google na Manifest V3 jest ważne, ponieważ wprowadza nowe zasady dotyczące rozszerzeń, które mają na celu poprawę bezpieczeństwa użytkowników i ogólnej wygody przeglądarki, a rozszerzenia, które nie są zgodne z tymi zasadami, zostaną ostatecznie usunięte z Chrome Web Sklep.

Krótko mówiąc, cała Twoja ciężka praca nad tworzeniem rozszerzeń wykorzystujących Manifest V2 może pójść na marne, jeśli nie dokonasz tego przejścia w nadchodzących miesiącach.

Kluczowe różnice między Manifest V2 i V3

Istnieje wiele różnic między nimi i chociaż gorąco polecam przeczytanie Przewodnik Chrome „Migracja do Manifest V3”., oto krótkie i słodkie podsumowanie kluczowych punktów:

1. Pracownicy usług zastąpić strony w tle w Manifeście V3.
2. Modyfikacja żądania sieciowego jest obsługiwana przez new declarativeNetRequest API w Manifeście V3.
3. W Manifest V3 rozszerzenia mogą wykonywać tylko JavaScript, który jest zawarty w ich pakiecie i nie mogą używać kodu hostowanego zdalnie.
4. Manifest V3 wprowadza promise obsługuje wiele metod, chociaż wywołania zwrotne są nadal obsługiwane jako alternatywa.
5. Uprawnienia hosta w Manifest V3 są osobnym elementem i muszą być określone w pliku "host_permissions" pole.
6. Polityka bezpieczeństwa treści w Manifeście V3 jest obiektem, którego członkowie reprezentują alternatywne konteksty zasad bezpieczeństwa treści (CSP), a nie ciąg znaków, jak to miało miejsce w Manifeście V2.

W prostym Manifeście rozszerzenia Chrome, który zmienia tło strony internetowej, może to wyglądać tak:

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

Jeśli niektóre z powyższych tagów wydają Ci się obce, czytaj dalej, aby dowiedzieć się dokładnie, co musisz wiedzieć.

Jak płynnie przejść na Manifest V3

Podsumowałem przejście na Manifest V3 w czterech kluczowych obszarach. Oczywiście, chociaż w nowym Manifeście V3 jest wiele dzwonków i gwizdków, które należy zaimplementować ze starego Manifestu V2, wprowadzenie zmian w tych czterech obszarach sprawi, że Twoje rozszerzenie Chrome znajdzie się na właściwej drodze do ostatecznego przejścia.

Cztery kluczowe obszary to:

1. Aktualizowanie podstawowej struktury manifestu.
2. Zmodyfikuj uprawnienia hosta.
3. Zaktualizuj politykę bezpieczeństwa zawartości.
4. Zmodyfikuj obsługę żądań sieciowych.

Dzięki tym czterem obszarom podstawy Twojego Manifestu będą gotowe do przejścia na Manifest V3. Przyjrzyjmy się szczegółowo każdemu z tych kluczowych aspektów i zobaczmy, jak możemy pracować nad zabezpieczeniem rozszerzenia Chrome na przyszłość po tej zmianie.

Aktualizowanie podstawowej struktury manifestu

Aktualizacja podstawowej struktury manifestu to pierwszy krok do przejścia na manifest w wersji 3. Najważniejszą zmianą, którą musisz wprowadzić, jest zmiana wartości "manifest_version" element do 3, co określa, że ​​używasz zestawu funkcji Manifest V3.

Jedną z głównych różnic między Manifest V2 i V3 jest zastąpienie stron w tle pojedynczym rozszerzeniem Service Worker w Manifest V3. Będziesz musiał zarejestrować pracownika serwisu pod "background" polu, korzystając z "service_worker" key i określ pojedynczy plik JavaScript. Mimo że Manifest V3 nie obsługuje wielu skryptów działających w tle, możesz opcjonalnie zadeklarować pracownika usługi jako moduł ES, określając "type": "module", co pozwala zaimportować dalszy kod.

W Manifeście V3 plik "browser_action" i "page_action" właściwości są ujednolicone w jednym "action" własność. Będziesz musiał zastąpić te właściwości "action" w swoim manifeście. Podobnie, "chrome.browserAction" i "chrome.pageAction" Interfejsy API są ujednolicone w jednym interfejsie API „Akcja” w Manifest V3 i konieczna będzie migracja do tego interfejsu 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"
}

Ogólnie rzecz biorąc, aktualizacja podstawowej struktury manifestu jest kluczowym krokiem w procesie przechodzenia na Manifest V3, ponieważ umożliwia korzystanie z nowych funkcji i zmian wprowadzonych w tej wersji interfejsu API.

Zmodyfikuj uprawnienia hosta

Drugim krokiem w przejściu na Manifest V3 jest modyfikacja uprawnień hosta. W Manifest V2 określasz uprawnienia hosta w pliku "permissions" pole w pliku manifestu. W Manifest V3 uprawnienia hosta są osobnym elementem i należy je określić w pliku "host_permissions" pole w pliku manifestu.

Oto przykład, jak zmodyfikować uprawnienia hosta:

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

Zaktualizuj politykę bezpieczeństwa treści

Aby zaktualizować CSP rozszerzenia Manifest V2, aby był zgodny z Manifestem V3, musisz wprowadzić pewne zmiany w pliku manifestu. W Manifest V2 CSP został określony jako ciąg w pliku "content_security_policy" pole manifestu.

W Manifest V3 CSP jest teraz obiektem z różnymi członkami reprezentującymi alternatywne konteksty CSP. Zamiast jedynki "content_security_policy" pole, będziesz teraz musiał określić osobne pola dla "content_security_policy.extension_pages" i "content_security_policy.sandbox", w zależności od rodzaju używanych stron rozszerzeń.

Należy również usunąć wszelkie odniesienia do domen zewnętrznych w pliku "script-src", "worker-src", "object-src", "style-src" dyrektywy, jeśli są obecne. Dokonanie tych aktualizacji w CSP jest ważne, aby zapewnić bezpieczeństwo i stabilność rozszerzenia w 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'"

Zmodyfikuj obsługę żądań sieciowych

Ostatnim krokiem w przejściu na Manifest V3 jest modyfikacja obsługi żądań sieciowych. W Manifest V2 użyłbyś metody chrome.webRequest API do modyfikowania żądań sieciowych. Jednak ten interfejs API został zastąpiony w Manifest V3 przez declarativeNetRequest API.

Aby użyć tego nowego interfejsu API, musisz określić declarativeNetRequest uprawnienie w swoim manifeście i zaktualizuj swój kod, aby korzystał z nowego interfejsu API. Jedną z kluczowych różnic między tymi dwoma interfejsami API jest to, że declarativeNetRequest API wymaga określenia listy z góry określonych adresów do zablokowania, zamiast możliwości blokowania całych kategorii żądań HTTP, jak to możliwe w przypadku chrome.webRequest API.

Ważne jest, aby wprowadzić te zmiany w kodzie, aby mieć pewność, że rozszerzenie będzie nadal działać poprawnie w Manifest V3. Oto przykład, w jaki sposób zmodyfikowałbyś swój manifest, aby użyć formatu declarativeNetRequest API w Manifeście V3:

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

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

Będziesz także musiał zaktualizować kod rozszerzenia, aby móc korzystać z rozszerzenia declarativeNetRequest API zamiast chrome.webRequest API.

Inne aspekty, które musisz sprawdzić

To, co opisałem, to tylko wierzchołek góry lodowej. Oczywiście, gdybym chciał omówić wszystko, mógłbym tu siedzieć całymi dniami i nie byłoby sensu mieć przewodników Google dla programistów Chrome. Podczas gdy to, co omówiłem, zapewni ci wystarczającą ochronę na przyszłość, aby uzbroić swoje rozszerzenia Chrome w tym przejściu, oto kilka innych rzeczy, na które możesz chcieć spojrzeć, aby upewnić się, że twoje rozszerzenia działają na szczycie swojej gry.

• Migracja skryptów działających w tle do kontekstu wykonywania Service Worker: Jak wspomniano wcześniej, Manifest V3 zastępuje strony w tle pojedynczym rozszerzeniem service worker, więc może być konieczne zaktualizowanie skryptów w tle w celu dostosowania do kontekstu wykonania service worker.
• Ujednolicenie **chrome.browserAction** i **chrome.pageAction** Pszczoła: Te dwa równoważne interfejsy API są ujednolicone w jednym interfejsie API w Manifest V3, więc może być konieczna migracja do Action API.
• Migrowanie funkcji, które oczekują kontekstu tła Manifest V2: Adopcja pracowników serwisowych w Manifest V3 nie jest zgodna z metodami takimi jak chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs(), chrome.extension.getViews(). Może być konieczna migracja do projektu, który przekazuje komunikaty między innymi kontekstami i procesem roboczym usług w tle.
• Przenoszenie żądań CORS w skryptach zawartości do procesu roboczego usługi w tle: Może być konieczne przeniesienie żądań CORS w skryptach zawartości do procesu roboczego usługi w tle w celu zachowania zgodności z Manifest V3.
• Migracja z wykonywania zewnętrznego kodu lub dowolnych ciągów znaków: Manifest V3 nie pozwala już na wykonywanie zewnętrznej logiki przy użyciu chrome.scripting.executeScript({code: '...'}), eval(), new Function(). Może być konieczne przeniesienie całego kodu zewnętrznego (JavaScript, WebAssembly, CSS) do pakietu rozszerzeń, aktualizacja skryptów i odniesień do stylów w celu załadowania zasobów z pakietu rozszerzeń oraz użycie chrome.runtime.getURL() do tworzenia adresów URL zasobów w czasie wykonywania.
• Aktualizowanie niektórych metod skryptowych i CSS w interfejsie Tabs API: Jak wspomniano wcześniej, kilka metod zostało przeniesionych z API Tabs do API Scripting w Manifest V3. Może być konieczne zaktualizowanie wszelkich wywołań tych metod w celu użycia poprawnego interfejsu API programu Manifest V3.

I wiele więcej!

Poświęć trochę czasu, aby być na bieżąco ze wszystkimi zmianami. W końcu ta zmiana jest nieunikniona i jeśli nie chcesz, aby Twoje rozszerzenia Manifest V2 zostały utracone z powodu uniknięcia tego przejścia, poświęć trochę czasu na uzbrojenie się w niezbędną wiedzę.

Z drugiej strony, jeśli dopiero zaczynasz programować rozszerzenia Chrome i chcesz zacząć, świetnym sposobem na to jest zanurzenie się w świecie narzędzi Web Developer Chrome. Zrobiłem to poprzez kurs pt Uczenie się na LinkedIn, co dość szybko mnie przyspieszyło. Gdy już zdobędziesz tę podstawową wiedzę, wróć do tego artykułu i przetłumacz to, co wiesz, na Manifest V3!

Jak więc będę korzystać z funkcji nowego Manifest V3 w przyszłości?

Cóż, dla mnie przejście na Manifest V3 i usunięcie pliku chrome.webRequest Wydaje się, że interfejs API przenosi rozszerzenia z przypadków użycia skoncentrowanych na danych (takich jak blokowanie reklam) na bardziej funkcjonalne i oparte na aplikacjach. Ostatnio trzymam się z dala od tworzenia aplikacji, ponieważ może być dość zasobochłonne czasami. Jednak ta zmiana może być tym, co sprowadza mnie z powrotem!

Rozwój narzędzi sztucznej inteligencji w ostatnim czasie, z których wiele ma dostępne interfejsy API, zapoczątkował mnóstwo nowych i świeżych aplikacji SaaS. Osobiście uważam, że nadchodzi w idealnym momencie wraz z przejściem na rozszerzenia Chrome oparte na aplikacjach! Podczas gdy wiele starszych rozszerzeń może zostać usuniętych z tego przejścia, na ich miejsce pojawi się wiele nowych, opartych na nowatorskich pomysłach SaaS.

Dlatego jest to ekscytująca aktualizacja, która pozwala wskoczyć i przerobić stare rozszerzenia lub zbudować nowe! Osobiście widzę wiele możliwości w korzystaniu z interfejsów API, które obejmują wykorzystanie sztucznej inteligencji w rozszerzeniach w celu zwiększenia komfortu przeglądania przez użytkownika. Ale to naprawdę tylko wierzchołek góry lodowej. Polecam uaktualnienie konta Gmail za korzyści płynące ze współpracy, tworzenia i publikowania rozszerzeń w Chrome Web Store.

Pamiętaj jednak, że wymagania każdego programisty są inne, więc dowiedz się, czego potrzebujesz, aby Twoje obecne rozszerzenia działały lub działały nowe!

• Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
• Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. Dostęp tutaj.
• Źródło: https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/