Das Aktualisieren einer Chrome-Erweiterung von Manifest V2 auf Manifest V3 ist ein wichtiger Schritt für Entwickler, da Google die Unterstützung für Manifest V2 eingestellt hat. In diesem Artikel gehen wir durch den Prozess des Upgrades einer Pomodoro-Timer-Erweiterung, die ursprünglich mit Manifest V2 erstellt wurde, auf den neueren Manifest V3-Standard.

Meine Geschichte

Ich hatte eine Pomodoro-Timer-Erweiterung, die ich vor 4 Jahren kostenlos erstellt hatte, und erhielt eine Benachrichtigung von Google, dass ich Manifest aktualisieren musste.

Die ursprüngliche Version meines Pomodoro-Timers habe ich selbst entworfen, mit einem T-Rex-Gebrüll als Benachrichtigung über das Ende des Zyklus? Es war eigenartig und hat Spaß gemacht. Ich war sogar überrascht, dass 24 Leute es nutzten.

So sah es aus:

Meine Frau hat vor kurzem angefangen, Design zu lernen, und da ich Manifest aktualisieren muss, habe ich sie gebeten, das Design aufzufrischen. Das Ergebnis finden Sie am Ende des Artikels. Spoiler: Ich denke, es ist großartig geworden.

Warum ein Upgrade auf Manifest V3?

Manifest V3 führt mehrere wichtige Änderungen ein, die darauf abzielen, den Datenschutz, die Sicherheit und die Leistung in Chrome-Erweiterungen zu verbessern. Zu diesen Änderungen gehören:

• Servicemitarbeiter: Hintergrundseiten werden durch Servicemitarbeiter ersetzt, die effizienter sind, da sie nicht kontinuierlich ausgeführt werden.
• Erhöhte Sicherheit: Reduzierte Berechtigungsbereiche und die Einführung der declarativeNetRequest-API zur Verwaltung von Netzwerkanfragen.
• Verbesserte Leistung: Durch die Optimierung der Interaktion von Erweiterungen mit Browserressourcen sorgt V3 für eine bessere Ressourcenverwaltung.

Schritt 1: Die Hauptunterschiede verstehen

Bevor Sie sich mit dem Update befassen, ist es wichtig, die wichtigsten Änderungen zwischen Manifest V2 und V3 zu verstehen:

1. Hintergrundskripte: In V2 wurden Hintergrundskripte kontinuierlich ausgeführt. In V3 werden diese durch Servicemitarbeiter ersetzt, die nur bei Bedarf ausgeführt werden.
2. Berechtigungen: Manifest V3 erfordert die explizite Deklaration aller Berechtigungen, und bestimmte Berechtigungen wurden veraltet oder ersetzt.
3. API-Änderungen: Einige APIs wurden entfernt oder ersetzt und das Nachrichtensystem zwischen verschiedenen Komponenten der Erweiterung wurde aktualisiert.

Schritt 2: Aktualisieren der Manifestdatei

So würden Sie die Datei manifest.json von V2 auf V3 für eine Pomodoro-Timer-Erweiterung aktualisieren:

Original Manifest V2 Beispiel:

{
  "name": "Pomodoro Clock",
  "version": "1.1.0",
  "description": "Simple background timer for productivity",
  "manifest_version": 2,
  "permissions": ["storage"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "img/tomato16.png",
      "32": "img/tomato32.png",
      "48": "img/tomato48.png",
      "128": "img/tomato128.png"
    }
  },
  "icons": {
    "16": "img/tomato16.png",
    "32": "img/tomato32.png",
    "48": "img/tomato48.png",
    "128": "img/tomato128.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "options_page": "options.html"
}

Aktualisiertes Manifest V3-Beispiel:

{
  "name": "Pomodoro Timer & Focus Clock",
  "version": "2.0.1",
  "description": "Boost productivity with this simple Pomodoro timer. Focus on tasks, minimize distractions, and manage your time effectively.",
  "manifest_version": 3,
  "permissions": ["storage","notifications","alarms"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "img/tomato16.png",
      "32": "img/tomato32.png",
      "48": "img/tomato48.png",
      "128": "img/tomato128.png"
    }
  },
  "icons": {
    "16": "img/tomato16.png",
    "32": "img/tomato32.png",
    "48": "img/tomato48.png",
    "128": "img/tomato128.png"
  },
  "background": {
    "service_worker": "background.js"
  }
}

Wichtige Änderungen im Manifest:

Hintergrundskript:

• V2: "background": {"scripts": ["background.js"]}
• V3: "background": {"service_worker": "background.js"}

In V3 werden Hintergrundskripte durch Servicemitarbeiter ersetzt. Servicemitarbeiter sind nur dann aktiv, wenn es nötig ist, was die Ressourceneffizienz verbessert.

Aktion vs. Browser-Aktion:

• V2: "browser_action": { ... }
• V3: "Aktion": { ... }

browser_action wurde durch action ersetzt, was die Funktionalität konsolidiert und das Manifest vereinfacht.

Schritt 3: Aktualisieren des Hintergrundskripts zur Verwendung von Servicemitarbeitern

Meine Erweiterung hat ein einfaches setInterval() im Hintergrund verwendet. Mit Service Worker funktioniert dieses Verhalten nicht, da es nur bei Bedarf ausgeführt wird, um Browserressourcen zu sparen.

In meinem Fall musste ich den Timer ändern und den Zeitstempel im Speicher speichern, Alarme verwenden, um die Ausführung des Auslösecodes des Benachrichtigungsaufrufers zu planen.

Und natürlich die integrierten Benachrichtigungen von Chrome verwendet, um Benachrichtigungen zu senden und das lästige T-Rex-Heck loszuwerden. Wenn ich von frühen Benutzern meiner Erweiterung gelesen werde, tut es mir wirklich leid?

Es wird hier kein Codebeispiel geben, da es zu spezifisch ist.

Abschluss

Hier ist das Ergebnis. Ich finde es ziemlich cool. Minimalistisch und einfach zu bedienen

Das Update war nicht so schwierig, die Hauptsache ist, den Unterschied zwischen einem alten Hintergrundskript und einem Servicemitarbeiter zu verstehen, aber seien Sie vorsichtig mit Alarmen, ich habe es beim Testen sogar ein paar Mal geschafft, Chrome zum Absturz zu bringen?

Probieren Sie gerne die aktualisierte Pomodoro Timer & Focus Clock-Erweiterung aus und wünschen Ihnen viel Erfolg bei der Aktualisierung!