Wie man für Chrome-Erweiterungen auf Manifest V3 umstellt

Obwohl ich kein regelmäßiger Programmierer von Chrome-Erweiterungen bin, habe ich sicherlich genügend Erweiterungen programmiert und ein breites Portfolio an Webentwicklung, um mich in dieser Aufgabe zurechtzufinden. Kürzlich lehnte ein Kunde jedoch eine meiner Erweiterungen ab, da ich das Feedback erhielt, meine Erweiterung sei „veraltet“.

Während ich verzweifelt versuchte herauszufinden, was falsch war, schob ich meine Verlegenheit beiseite und begann sofort mit meiner tiefen Tauchfahrt zurück in die Welt der Chrome-Erweiterungen. Leider waren Informationen zu Manifest V3 spärlich und es fiel mir schwer, schnell zu verstehen, worum es bei dieser Umstellung ging.

Unnötig zu erwähnen, dass ich mit einem anstehenden Auftrag mühsam meinen Weg durch die Chrome-Entwicklerdokumentation von Google navigieren und die Dinge selbst herausfinden musste. Obwohl ich den Auftrag erledigt habe, wollte ich nicht, dass mein Wissen und meine Recherche in diesem Bereich verschwendet werden, und beschloss, das zu teilen, was ich mir in meiner Lernreise leicht zugänglich gewünscht hätte.

Warum die Umstellung auf 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 der Regeln für Erweiterungen ein, von denen einige die neuen Hauptstützen von V2, an die wir gewöhnt waren, ablösen werden.

Die Umstellung auf Manifest V3 kann wie folgt zusammengefasst werden:

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

Eines der Hauptziele von Manifest V3 ist es, die Nutzer sicherer zu machen und das allgemeine Browsererlebnis zu verbessern. Zuvor stützten sich viele Browsererweiterungen auf Code in der Cloud, was es schwierig machen konnte, zu beurteilen, ob eine Erweiterung riskant war. Manifest V3 zielt darauf ab, dies zu beheben, indem Erweiterungen verpflichtet werden, den gesamten Code zu enthalten, den sie ausführen werden, was es Google ermöglicht, sie zu scannen und potenzielle Risiken zu erkennen. Es zwingt Erweiterungen auch, die Erlaubnis von Google für die Änderungen einzuholen, die sie im Browser implementieren können.

Es ist wichtig, mit Googles Umstellung auf Manifest V3 Schritt zu halten, da diese neue Regeln für Erweiterungen einführt, die darauf abzielen, die Sicherheit der Nutzer und das allgemeine Browsererlebnis zu verbessern, und Erweiterungen, die diese Regeln nicht einhalten, schließlich aus dem Chrome Web Store entfernt werden.

Kurz gesagt, all Ihre harte Arbeit bei der Erstellung von Erweiterungen, die Manifest V2 verwendeten, könnte umsonst sein, wenn Sie diesen Übergang in den kommenden Monaten nicht vollziehen.

Die wichtigsten Unterschiede zwischen Manifest V2 und V3

Es gibt viele Unterschiede zwischen den beiden, und obwohl ich Ihnen dringend empfehle, sich Googles Leitfaden „Migrating to Manifest V3“ durchzulesen, hier eine kurze und bündige Zusammenfassung der wichtigsten Punkte.

1. Service Workers ersetzen Hintergrundseiten in Manifest V3.
2. Die Änderung von Netzwerkanfragen wird mit der neuen API declarativeNetRequest in Manifest V3 gehandhabt.
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 führt promise-Unterstützung für viele Methoden ein, obwohl Callbacks weiterhin als Alternative unterstützt werden.
5. Host-Berechtigungen in Manifest V3 sind ein separates Element und müssen im Feld "host_permissions" angegeben werden.
6. Die Content-Security-Policy in Manifest V3 ist ein Objekt mit Mitgliedern, die alternative Content-Security-Policy (CSP)-Kontexte darstellen, anstatt einer Zeichenkette, wie es in Manifest V2 der Fall war.

In einem einfachen Chrome-Erweiterungsmanifest, das den Hintergrund einer Webseite ändert, könnte dies 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 erscheinen, lesen Sie weiter, um herauszufinden, was Sie genau wissen müssen.

Wie man reibungslos auf Manifest V3 umstellt

Ich habe die Umstellung auf Manifest V3 in vier Schlüsselbereiche zusammengefasst. Natürlich gibt es in Manifest V3 viele neue Funktionen, die von Manifest V2 implementiert werden müssen. Die Implementierung von Änderungen in diesen vier Bereichen wird Ihre Chrome-Erweiterung auf den richtigen Weg für die endgültige Umstellung bringen.

Die vier Schlüsselbereiche sind:

1. Aktualisierung der grundlegenden Struktur Ihres Manifests.
2. Ändern Sie Ihre Host-Berechtigungen.
3. Aktualisieren Sie die Content-Security-Policy.
4. Ändern Sie Ihre Handhabung von Netzwerkanfragen.

Mit diesen vier Bereichen ist die Grundlage Ihres Manifests für die Umstellung auf Manifest V3 gerüstet. Betrachten wir jeden dieser Schlüsselaspekte im Detail und sehen wir, wie wir auf die Zukunftssicherheit Ihrer Chrome-Erweiterung bei dieser Umstellung hinarbeiten können.

Aktualisierung der grundlegenden Struktur Ihres Manifests

Die Aktualisierung der grundlegenden Struktur Ihres Manifests ist der erste Schritt bei der Umstellung auf Manifest V3. Die wichtigste Änderung, die Sie vornehmen müssen, ist die Änderung des Werts des Elements "manifest_version" auf 3, was bestimmt, dass Sie die Manifest V3-Funktionssammlung verwenden.

Einer der Hauptunterschiede zwischen Manifest V2 und V3 ist der Ersatz von Hintergrundseiten durch einen einzigen Erweiterungsdienst-Worker in Manifest V3. Sie müssen den Dienst-Worker unter dem Feld "background" mit dem Schlüssel "service_worker" registrieren und eine einzelne JavaScript-Datei angeben. Obwohl Manifest V3 keine mehreren Hintergrundskripte unterstützt, können Sie den Dienst-Worker optional als ES-Modul deklarieren, indem Sie "type": "module" angeben, was Ihnen den Import von weiterem Code ermöglicht.

In Manifest V3 werden die Eigenschaften "browser_action" und "page_action" zu einer einzigen Eigenschaft "action" zusammengeführt. Sie müssen diese Eigenschaften in Ihrem Manifest durch "action" ersetzen. Ebenso werden die APIs "chrome.browserAction" und "chrome.pageAction" zu einer einzigen „Action“-API in Manifest V3 zusammengeführt, 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 grundlegenden Struktur Ihres Manifests ein entscheidender Schritt im Prozess der Umstellung auf Manifest V3, da sie es Ihnen ermöglicht, die neuen Funktionen und Änderungen zu nutzen, die in dieser Version der API eingeführt wurden.

Ändern Sie Ihre Host-Berechtigungen

Der zweite Schritt bei der Umstellung auf Manifest V3 ist die Änderung Ihrer Host-Berechtigungen. In Manifest V2 geben Sie Host-Berechtigungen im Feld "permissions" in der Manifestdatei an. In Manifest V3 sind Host-Berechtigungen ein separates Element, und Sie sollten sie im Feld "host_permissions" in der Manifestdatei angeben.

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 Content-Security-Policy

Um die CSP Ihrer Manifest V2-Erweiterung zu aktualisieren, damit sie mit Manifest V3 kompatibel ist, müssen Sie einige Änderungen an Ihrer Manifestdatei vornehmen. In Manifest V2 wurde die CSP als Zeichenkette im Feld "content_security_policy" des Manifests angegeben.

In Manifest V3 ist die CSP nun ein Objekt mit verschiedenen Mitgliedern, die alternative CSP-Kontexte darstellen. Anstelle eines einzelnen Feldes "content_security_policy" müssen Sie nun separate Felder für "content_security_policy.extension_pages" und "content_security_policy.sandbox" angeben, je nach Art der verwendeten Erweiterungsseiten.

Sie sollten auch alle Verweise auf externe Domains in den Direktiven "script-src", "worker-src", "object-src" und "style-src" entfernen, falls vorhanden. Es ist wichtig, diese Aktualisierungen an Ihrer 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.de; 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.de; object-src 'self'"

Ändern Sie Ihre Handhabung von Netzwerkanfragen

Der letzte Schritt bei der Umstellung auf Manifest V3 ist die Änderung Ihrer Handhabung von Netzwerkanfragen. In Manifest V2 haben Sie die API chrome.webRequest verwendet, um Netzwerkanfragen zu ändern. Diese API wird jedoch in Manifest V3 durch die API declarativeNetRequest ersetzt.

Um diese neue API zu verwenden, müssen Sie die Berechtigung declarativeNetRequest in Ihrem Manifest angeben und Ihren Code aktualisieren, um die neue API zu verwenden. Ein wichtiger Unterschied zwischen den beiden APIs ist, dass die API declarativeNetRequest verlangt, dass Sie eine Liste von vordefinierten Adressen angeben, die blockiert werden sollen, anstatt ganze Kategorien von HTTP-Anfragen blockieren zu können, wie Sie es mit der API chrome.webRequest konnten.

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 API declarativeNetRequest in Manifest V3 zu verwenden:

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

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

Sie müssen auch Ihren Erweiterungscode aktualisieren, um die API declarativeNetRequest anstelle der API chrome.webRequest zu verwenden.

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 tagelang hier sein und es gäbe keinen Sinn, die Chrome Developer Guides von Google zu haben. Was ich behandelt habe, wird Sie ausreichend zukunftssicher machen, um Ihre Chrome-Erweiterungen auf diese Umstellung vorzubereiten, aber hier sind einige andere Dinge, die Sie vielleicht überprüfen möchten, um sicherzustellen, dass Ihre Erweiterungen auf höchstem Niveau funktionieren.

• Hintergrundskripte in den Service-Worker-Ausführungskontext migrieren: Wie bereits erwähnt, ersetzt Manifest V3 Hintergrundseiten durch einen einzigen Erweiterungsdienst-Worker. Daher kann es notwendig sein, Hintergrundskripte zu aktualisieren, um sie an den Service-Worker-Ausführungskontext anzupassen.
• Vereinheitlichung der APIs **chrome.browserAction** und **chrome.pageAction**: Diese beiden äquivalenten APIs werden in Manifest V3 zu einer einzigen API zusammengeführt. Daher kann es notwendig sein, zur Action-API zu migrieren.
• Migrieren von Funktionen, die einen Manifest V2-Hintergrundkontext erwarten: Die Einführung von Service Workern in Manifest V3 ist nicht mit Methoden wie chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs() und chrome.extension.getViews() kompatibel. Möglicherweise ist eine Migration zu einem Design erforderlich, das Nachrichten zwischen anderen Kontexten und dem Hintergrund-Service-Worker austauscht.
• Verschieben von CORS-Anfragen in Content-Skripten zum Hintergrund-Service-Worker: Möglicherweise müssen CORS-Anfragen in Content-Skripten zum Hintergrund-Service-Worker verschoben werden, um Manifest V3 zu entsprechen.
• Abkehr von der Ausführung externen Codes oder beliebiger Zeichenketten: Manifest V3 erlaubt nicht mehr die Ausführung externer Logik über chrome.scripting.executeScript({code: '...'}), eval() und new Function(). Es kann notwendig sein, den gesamten externen Code (JavaScript, WebAssembly, CSS) in das Erweiterungsbündel zu verschieben, Skript- und Stilreferenzen zu aktualisieren, um Ressourcen aus dem Erweiterungsbündel zu laden, und chrome.runtime.getURL() zu verwenden, um Laufzeit-Ressourcen-URLs zu erstellen.
• Aktualisierung bestimmter Skript- und CSS-Methoden in der Tabs API: Wie bereits erwähnt, werden mehrere Methoden von der Tabs API zur Scripting API in Manifest V3 verschoben. Möglicherweise müssen Aufrufe dieser Methoden aktualisiert werden, um die korrekte Manifest V3 API zu verwenden.

Und viele mehr!

Nehmen Sie sich ruhig 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 aufgrund der Vermeidung dieser Umstellung verloren gehen, dann verbringen Sie einige Zeit damit, sich das nötige Wissen anzueignen.

Wenn Sie neu in der Programmierung von Chrome-Erweiterungen sind und gerade erst anfangen, ist es eine großartige Möglichkeit, sich mit den Chrome-Webentwicklertools vertraut zu machen. Das habe ich durch einen Kurs auf LinkedIn Learning gemacht, der mich ziemlich schnell auf den neuesten Stand gebracht hat. Sobald Sie dieses Grundwissen haben, kommen Sie zu diesem Artikel zurück und übertragen Sie Ihr Wissen auf Manifest V3!

Wie werde ich die Funktionen im neuen Manifest V3 zukünftig nutzen?

Nun, für mich scheint die Umstellung auf Manifest V3 und die Entfernung der API chrome.webRequest Erweiterungen von datenzentrierten Anwendungsfällen (wie Ad-Blockern) hin zu funktionaleren und anwendungsbasierten Nutzungen zu verlagern. Ich habe mich in letzter Zeit von der Anwendungsentwicklung ferngehalten, da sie manchmal ziemlich ressourcenintensiv sein kann. Diese Verschiebung könnte mich jedoch zurückbringen!

Der Aufstieg von KI-Tools in letzter Zeit, viele davon mit verfügbar nutzbaren APIs, hat Unmengen neuer und frischer SaaS-Anwendungen hervorgebracht. Persönlich denke ich, dass dies zur richtigen Zeit mit der Verschiebung hin zu stärker anwendungsbasierten Chrome-Erweiterungen kommt! Während viele der älteren Erweiterungen durch diese Umstellung verloren gehen mögen, werden zahlreiche 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, APIs zu nutzen, die KI beinhalten, um das Surferlebnis eines Nutzers zu verbessern. Aber das ist wirklich nur die Spitze des Eisbergs. Wenn Sie wirklich in Ihre professionellen Erweiterungen eintauchen oder sich an Unternehmen wenden möchten, um Erweiterungen für sie zu erstellen/aktualisieren, empfehle ich Ihnen, Ihr Gmail-Konto zu aktualisieren, um die Vorteile für die Zusammenarbeit, Entwicklung und Veröffentlichung von Erweiterungen im Chrome Web Store zu nutzen.

Denken Sie jedoch daran, dass die Anforderungen jedes Entwicklers unterschiedlich sind. Lernen Sie also, was Sie brauchen, um Ihre aktuellen Erweiterungen am Laufen zu halten oder Ihre neuen weiterzuentwickeln!