So wechseln Sie zu Manifest V3 für Chrome-Erweiterungen

Obwohl ich kein normaler Programmierer von Chrome-Erweiterungen bin, habe ich sicherlich genug Erweiterungen codiert und verfüge über ein ausreichend breites Webentwicklungsportfolio, um mich mit der Aufgabe vertraut zu machen. Allerdings hatte ich erst kürzlich einen Kunden, der eine meiner Erweiterungen ablehnte, da ich die Rückmeldung erhielt, dass meine Erweiterung „veraltet“ sei.

Als ich mich bemühte, herauszufinden, was falsch war, kehrte ich meine Verlegenheit unter den Teppich und begann sofort, wieder tief in die Welt der Chrome-Erweiterungen einzutauchen. Leider waren die Informationen zu Manifest V3 spärlich und es war schwierig für mich, schnell zu verstehen, worum es bei diesem Übergang ging.

Unnötig zu erwähnen, dass ich mich bei einem anstehenden Job mühsam zurechtfinden musste Googles Chrome-Entwicklerdokumentation und finde die Dinge für mich heraus. Während ich die Arbeit erledigte, wollte ich nicht, dass mein Wissen und meine Forschung in diesem Bereich verschwendet wurden, und beschloss, das zu teilen, wozu ich mir auf meiner Lernreise einen einfachen Zugang gewünscht hätte.

Warum der Übergang zu Manifest 3 wichtig ist

Manifest V3 ist eine API, die Google in seinem Chrome-Browser verwenden wird. Es ist der Nachfolger der aktuellen API, Manifest V2, und regelt, wie Chrome-Erweiterungen mit dem Browser interagieren. Manifest V3 führt signifikante Änderungen an den Regeln für Erweiterungen ein, von denen einige die neue Hauptstütze von V2 sein werden, an die wir gewöhnt waren.

Der Übergang zu Manifest V3 lässt sich so zusammenfassen:

1. Die Umstellung läuft seit 2018.
2. Manifest V3 wird offiziell im Januar 2023 eingeführt.
3. Bis Juni 2023 werden Erweiterungen, die Manifest V2 ausführen, nicht mehr im Chrome Web Store verfügbar sein.
4. Erweiterungen, die nicht den neuen Regeln entsprechen, die in Manifest V3 eingeführt wurden, werden schließlich aus dem Chrome Web Store entfernt.

Eines der Hauptziele von Manifest V3 ist es, die Sicherheit der Benutzer zu erhöhen und das Browsererlebnis insgesamt zu verbessern. Zuvor stützten sich viele Browsererweiterungen auf Code in der Cloud, was bedeutet, dass dies schwierig sein könnte beurteilen, ob eine Verlängerung riskant war. Manifest V3 zielt darauf ab, dies zu beheben, indem Erweiterungen den gesamten Code enthalten müssen, den sie ausführen werden, sodass Google sie scannen und potenzielle Risiken erkennen kann. Es zwingt Erweiterungen auch, die Erlaubnis von Google für die Änderungen anzufordern, die sie im Browser implementieren können.

Es ist wichtig, über den Übergang von Google zu Manifest V3 auf dem Laufenden zu bleiben, da es neue Regeln für Erweiterungen einführt, die darauf abzielen, die Benutzersicherheit und das allgemeine Browsererlebnis zu verbessern, und Erweiterungen, die diesen Regeln nicht entsprechen, werden schließlich aus Chrome Web entfernt Speichern.

Kurz gesagt, all Ihre harte Arbeit beim Erstellen von Erweiterungen, die Manifest V2 verwendet haben, könnte umsonst sein, wenn Sie diesen Übergang in den kommenden Monaten nicht vollziehen.

Die Hauptunterschiede zwischen Manifest V2 und V3

Es gibt viele Unterschiede zwischen den beiden, und ich empfehle Ihnen dringend, sich weiter zu informieren Leitfaden „Migration zu Manifest V3“ von Chrome, hier ist eine kurze und süße Zusammenfassung der wichtigsten Punkte:

1. Servicemitarbeiter Hintergrundseiten in Manifest V3 ersetzen.
2. Die Änderung der Netzwerkanforderung wird mit dem neuen behandelt declarativeNetRequest API in Manifest V3.
3. In Manifest V3 können Erweiterungen nur JavaScript ausführen, das in ihrem Paket enthalten ist, und keinen remote gehosteten Code verwenden.
4. Manifest V3 wird eingeführt promise Unterstützung für viele Methoden, obwohl Callbacks weiterhin als Alternative unterstützt werden.
5. Hostberechtigungen in Manifest V3 sind ein separates Element und müssen in der angegeben werden "host_permissions" Feld.
6. Die Inhaltssicherheitsrichtlinie in Manifest V3 ist ein Objekt mit Mitgliedern, die alternative Inhaltssicherheitsrichtlinien (CSP)-Kontexte darstellen, und nicht wie in Manifest V2 eine Zeichenfolge.

In einem einfachen Manifest einer Chrome-Erweiterung, das den Hintergrund einer Webseite ändert, könnte das so aussehen:

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

Wenn Ihnen einige der oben genannten Tags fremd vorkommen, lesen Sie weiter, um genau zu erfahren, was Sie wissen müssen.

So wechseln Sie reibungslos zu Manifest V3

Ich habe den Übergang zu Manifest V3 in vier Schlüsselbereichen zusammengefasst. Natürlich gibt es im neuen Manifest V3 viele Schnickschnack, die aus dem alten Manifest V2 implementiert werden müssen, aber die Implementierung von Änderungen in diesen vier Bereichen wird Ihre Chrome-Erweiterung für den späteren Übergang gut auf den richtigen Weg bringen.

Die vier Schlüsselbereiche sind:

1. Aktualisieren der Grundstruktur Ihres Manifests.
2. Ändern Sie Ihre Hostberechtigungen.
3. Aktualisieren Sie die Inhaltssicherheitsrichtlinie.
4. Ändern Sie die Behandlung Ihrer Netzwerkanfrage.

Mit diesen vier Bereichen sind die Grundlagen Ihres Manifests bereit für den Übergang zu Manifest V3. Lassen Sie uns jeden dieser Schlüsselaspekte im Detail betrachten und sehen, wie wir Ihre Chrome-Erweiterung nach diesem Übergang zukunftssicher machen können.

Aktualisieren der Grundstruktur Ihres Manifests

Das Aktualisieren der Grundstruktur Ihres Manifests ist der erste Schritt beim Übergang zu Manifest V3. Die wichtigste Änderung, die Sie vornehmen müssen, ist die Änderung des Werts von "manifest_version" Element zu 3, wodurch festgestellt wird, dass Sie den Featuresatz von Manifest V3 verwenden.

Einer der Hauptunterschiede zwischen Manifest V2 und V3 ist das Ersetzen von Hintergrundseiten durch einen einzelnen Extension Service Worker in Manifest V3. Sie müssen den Servicemitarbeiter unter registrieren "background" Feld unter Verwendung der "service_worker" key und geben Sie eine einzelne JavaScript-Datei an. Auch wenn Manifest V3 nicht mehrere Hintergrundskripte unterstützt, können Sie optional den Service Worker als ES-Modul deklarieren, indem Sie angeben "type": "module", mit der Sie weiteren Code importieren können.

In Manifest V3 wird die "browser_action" und "page_action" Eigenschaften werden zu einem einzigen vereinheitlicht "action" Eigentum. Sie müssen diese Eigenschaften durch ersetzen "action" in Ihrem Manifest. Ebenso die "chrome.browserAction" und "chrome.pageAction" APIs werden in Manifest V3 zu einer einzigen „Aktions“-API vereinheitlicht, und Sie müssen zu dieser API migrieren.

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

Insgesamt ist die Aktualisierung der Grundstruktur Ihres Manifests ein entscheidender Schritt beim Übergang zu Manifest V3, da Sie dadurch die Vorteile der neuen Funktionen und Änderungen nutzen können, die in dieser Version der API eingeführt wurden.

Ändern Sie Ihre Hostberechtigungen

Der zweite Schritt beim Übergang zu Manifest V3 ist das Ändern Ihrer Hostberechtigungen. In Manifest V2 geben Sie Hostberechtigungen in der an "permissions" Feld in der Manifestdatei. In Manifest V3 sind Hostberechtigungen ein separates Element, und Sie sollten sie in der angeben "host_permissions" Feld in der Manifestdatei.

Hier ist ein Beispiel, wie Sie Ihre Host-Berechtigungen ändern können:

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

Aktualisieren Sie die Inhaltssicherheitsrichtlinie

Um den CSP Ihrer Manifest V2-Erweiterung so zu aktualisieren, dass er mit Manifest V3 kompatibel ist, müssen Sie einige Änderungen an Ihrer Manifestdatei vornehmen. In Manifest V2 wurde der CSP als Zeichenfolge in der angegeben "content_security_policy" Feld des Manifests.

In Manifest V3 ist der CSP jetzt ein Objekt mit verschiedenen Membern, die alternative CSP-Kontexte darstellen. Statt einer Single "content_security_policy" Feld, müssen Sie nun separate Felder angeben "content_security_policy.extension_pages" und "content_security_policy.sandbox", abhängig von der Art der Erweiterungsseiten, die Sie verwenden.

Sie sollten auch alle Verweise auf externe Domänen in der entfernen "script-src", "worker-src", "object-src" und "style-src" Anweisungen, falls vorhanden. Es ist wichtig, diese Updates an Ihrem CSP vorzunehmen, um die Sicherheit und Stabilität Ihrer Erweiterung in Manifest V3 zu gewährleisten.

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

Ändern Sie die Behandlung Ihrer Netzwerkanfrage

Der letzte Schritt bei der Umstellung auf Manifest V3 besteht darin, die Verarbeitung Ihrer Netzwerkanfragen zu ändern. In Manifest V2 hätten Sie die chrome.webRequest API zum Ändern von Netzwerkanforderungen. Diese API wird jedoch in Manifest V3 durch die ersetzt declarativeNetRequest API.

Um diese neue API zu verwenden, müssen Sie die angeben declarativeNetRequest Berechtigung in Ihrem Manifest und aktualisieren Sie Ihren Code, um die neue API zu verwenden. Ein wesentlicher Unterschied zwischen den beiden APIs besteht darin, dass die declarativeNetRequest API erfordert, dass Sie eine Liste mit vordefinierten Adressen angeben, die blockiert werden sollen, anstatt ganze Kategorien von HTTP-Anforderungen blockieren zu können, wie Sie dies mit der tun könnten chrome.webRequest API.

Es ist wichtig, diese Änderungen in Ihrem Code vorzunehmen, um sicherzustellen, dass Ihre Erweiterung unter Manifest V3 weiterhin ordnungsgemäß funktioniert. Hier ist ein Beispiel dafür, wie Sie Ihr Manifest ändern würden, um die zu verwenden declarativeNetRequest API in Manifest V3:

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

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

Sie müssen auch Ihren Erweiterungscode aktualisieren, um die verwenden zu können declarativeNetRequest API statt der chrome.webRequest API.

Andere Aspekte, die Sie überprüfen müssen

Was ich behandelt habe, ist nur die Spitze des Eisbergs. Wenn ich alles abdecken wollte, könnte ich natürlich tagelang hier sein und es hätte keinen Sinn, Googles Chrome Developers Guides zu haben. Während das, was ich behandelt habe, Sie zukunftssicher genug machen wird, um Ihre Chrome-Erweiterungen für diesen Übergang zu wappnen, sind hier einige andere Dinge, die Sie sich ansehen sollten, um sicherzustellen, dass Ihre Erweiterungen an der Spitze ihres Spiels funktionieren.

• Migrieren von Hintergrundskripten in den Ausführungskontext des Service Workers: Wie bereits erwähnt, ersetzt Manifest V3 Hintergrundseiten durch einen einzelnen Extension Service Worker, sodass es möglicherweise erforderlich ist, Hintergrundskripts zu aktualisieren, um sie an den Ausführungskontext des Service Workers anzupassen.
• Vereinheitlichung der **chrome.browserAction** und **chrome.pageAction** APIs: Diese beiden gleichwertigen APIs sind in Manifest V3 zu einer einzigen API vereinheitlicht, daher kann es erforderlich sein, zur Aktions-API zu migrieren.
• Migrieren von Funktionen, die einen Manifest V2-Hintergrundkontext erwarten: Die Annahme von Service Workern in Manifest V3 ist nicht kompatibel mit Methoden wie chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs() und chrome.extension.getViews(). Es kann erforderlich sein, zu einem Design zu migrieren, das Nachrichten zwischen anderen Kontexten und dem Hintergrunddienstmitarbeiter weiterleitet.
• Verschieben von CORS-Anforderungen in Inhaltsskripts zum Hintergrund-Service-Worker: Es kann erforderlich sein, CORS-Anforderungen in Inhaltsskripts an den Hintergrunddienst-Worker zu verschieben, um Manifest V3 zu entsprechen.
• Migration weg von der Ausführung von externem Code oder beliebigen Strings: Manifest V3 erlaubt nicht mehr die Ausführung externer Logik mit chrome.scripting.executeScript({code: '...'}), eval() und new Function(). Es kann erforderlich sein, den gesamten externen Code (JavaScript, WebAssembly, CSS) in das Erweiterungspaket zu verschieben, Skript- und Stilreferenzen zu aktualisieren, um Ressourcen aus dem Erweiterungspaket zu laden, und zu verwenden chrome.runtime.getURL() um Ressourcen-URLs zur Laufzeit zu erstellen.
• Aktualisieren bestimmter Skript- und CSS-Methoden in der Tabs-API: Wie bereits erwähnt, werden in Manifest V3 mehrere Methoden von der Tabs-API zur Skripting-API verschoben. Es kann erforderlich sein, alle Aufrufe dieser Methoden zu aktualisieren, um die richtige Manifest V3-API zu verwenden.

Und viele mehr!

Nehmen Sie sich ruhig etwas Zeit, um sich über alle Änderungen auf dem Laufenden zu halten. Schließlich ist diese Änderung unvermeidlich, und wenn Sie nicht möchten, dass Ihre Manifest V2-Erweiterungen verloren gehen, weil Sie diesen Übergang vermeiden, dann verbringen Sie einige Zeit damit, sich mit dem erforderlichen Wissen zu wappnen.

Wenn Sie jedoch neu in der Programmierung von Chrome-Erweiterungen sind und anfangen möchten, ist es eine gute Möglichkeit, in die Welt der Webentwickler-Tools von Chrome einzutauchen. Ich tat dies durch einen Kurs auf Linkedin Lernen, was mich ziemlich schnell auf den neuesten Stand gebracht hat. Sobald Sie dieses Grundwissen haben, kehren Sie zu diesem Artikel zurück und übersetzen Sie, was Sie wissen, in Manifest V3!

Wie werde ich also die Funktionen im neuen Manifest V3 in Zukunft nutzen?

Nun, für mich ist der Übergang zu Manifest V3 und das Entfernen der chrome.webRequest API scheint Erweiterungen weg von datenzentrischen Anwendungsfällen (wie Werbeblockern) hin zu funktionaleren und anwendungsbasierten Anwendungen zu verlagern. Ich habe mich in letzter Zeit von der Anwendungsentwicklung ferngehalten, da es ziemlich werden kann ressourcenintensiv manchmal. Diese Verschiebung könnte jedoch das sein, was mich zurückbringt!

Der Aufstieg von KI-Tools in letzter Zeit, viele mit verfügbaren APIs, hat unzählige neue und frische SaaS-Anwendungen ausgelöst. Ich persönlich denke, dass es mit der Umstellung auf mehr anwendungsbasierte Chrome-Erweiterungen zum perfekten Zeitpunkt kommt! Während viele der älteren Erweiterungen durch diesen Übergang möglicherweise ausgelöscht werden, werden viele neue, die auf neuartigen SaaS-Ideen basieren, ihren Platz einnehmen.

Daher ist dies ein aufregendes Update, um alte Erweiterungen zu überarbeiten oder neue zu erstellen! Persönlich sehe ich viele Möglichkeiten bei der Verwendung von APIs, bei denen KI in Erweiterungen verwendet wird, um das Surferlebnis eines Benutzers zu verbessern. Aber das ist wirklich nur die Spitze des Eisbergs. Wenn Sie sich wirklich mit Ihren eigenen professionellen Erweiterungen beschäftigen oder sich an Unternehmen wenden möchten, um Erweiterungen für sie zu erstellen/aktualisieren, würde ich empfehlen Aktualisieren Sie Ihr Gmail-Konto für die Vorteile bei der Zusammenarbeit, Entwicklung und Veröffentlichung von Erweiterungen im Chrome Web Store.

Denken Sie jedoch daran, dass die Anforderungen jedes Entwicklers unterschiedlich sind, also lernen Sie, was Sie brauchen, um Ihre aktuellen Erweiterungen über Wasser zu halten oder Ihre neuen am Laufen zu halten!

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. Hier zugreifen.
• Quelle: https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/