Browser-Erweiterungsentwicklung: Navigieren in Manifest V3 und JavaScript-APIs

Browser-Erweiterungen bieten eine leistungsstarke Möglichkeit, das Browsing-Erlebnis zu verbessern und anzupassen. Sie ermöglichen es Entwicklern, Webbrowsern Funktionalität hinzuzufügen, mit Webseiten zu interagieren und sich in Webdienste zu integrieren. Dieser Leitfaden bietet einen umfassenden Überblick über die Entwicklung von Browser-Erweiterungen, wobei der Schwerpunkt auf Manifest V3 und den zentralen JavaScript-APIs liegt, die diese Erweiterungen antreiben.

Browser-Erweiterungen verstehen

Eine Browser-Erweiterung ist ein kleines Softwareprogramm, das die Funktionalität eines Webbrowsers erweitert. Erweiterungen können Webseiten ändern, neue Funktionen hinzufügen und sich in externe Dienste integrieren. Sie werden typischerweise in JavaScript, HTML und CSS geschrieben und als ZIP-Datei mit einer Manifest-Datei verpackt, die die Metadaten und Berechtigungen der Erweiterung beschreibt.

Beliebte Anwendungsfälle für Browser-Erweiterungen sind:

• Werbeblocker: Entfernen von Werbung von Webseiten.
• Passwort-Manager: Sicheres Speichern und Verwalten von Passwörtern.
• Produktivitäts-Tools: Workflow-Verbesserung mit Funktionen wie Aufgabenverwaltung und Notizen.
• Inhaltsanpassung: Ändern des Aussehens und Verhaltens von Webseiten.
• Barrierefreiheitstools: Verbesserung der Web-Barrierefreiheit für Benutzer mit Behinderungen.

Manifest V3: Der neue Standard

Manifest V3 ist die neueste Version der Manifest-Datei für Browser-Erweiterungen, einer JSON-Datei, die die Metadaten, Berechtigungen und Ressourcen der Erweiterung beschreibt. Es führt erhebliche Änderungen am Entwicklungsprozess von Erweiterungen ein, wobei der Schwerpunkt hauptsächlich auf verbesserter Sicherheit, Datenschutz und Leistung liegt. Zu den wichtigsten Änderungen in Manifest V3 gehören:

• Service Worker: Ersetzen von Hintergrundseiten durch Service Worker für verbesserte Leistung und reduzierten Speicherverbrauch. Service Worker sind ereignisgesteuerte Skripte, die im Hintergrund ausgeführt werden und Ereignisse wie Netzwerkanfragen und Alarme verarbeiten.
• Declarative Net Request API: Ersetzen der blockierenden webRequest API durch die Declarative Net Request API zum Filtern von Netzwerkanfragen. Dies verbessert den Datenschutz und die Sicherheit, indem der Zugriff der Erweiterung auf den Netzwerkverkehr eingeschränkt wird.
• Content Security Policy (CSP): Durchsetzung strengerer CSP-Richtlinien, um die Ausführung von beliebigem Code zu verhindern und Sicherheitsrisiken zu mindern.
• Manifest-Version: Der Schlüssel manifest_version in der Datei manifest.json muss auf 3 gesetzt werden.

Migration von Manifest V2 zu Manifest V3

Die Migration von Manifest V2 zu Manifest V3 erfordert eine sorgfältige Planung und Code-Modifikationen. Hier ist eine Schritt-für-Schritt-Anleitung:

1. Manifest-Datei aktualisieren: Setzen Sie manifest_version auf 3 und aktualisieren Sie die Felder permissions und background, um den Manifest V3-Anforderungen zu entsprechen.
2. Hintergrundseiten durch Service Worker ersetzen: Schreiben Sie Hintergrundskripte als Service Worker neu und verarbeiten Sie Ereignisse mit den APIs chrome.scripting und chrome.alarms.
3. Zur Declarative Net Request API migrieren: Ersetzen Sie blockierende webRequest-API-Aufrufe durch deklarative Regeln, die in der declarativeNetRequest API definiert sind.
4. Content Security Policy aktualisieren: Passen Sie das Feld content_security_policy in der Manifest-Datei an, um strengeren CSP-Anforderungen zu entsprechen.
5. Gründlich testen: Testen Sie die Erweiterung ausgiebig in verschiedenen Browsern, um Kompatibilität und ordnungsgemäße Funktionalität sicherzustellen.

Beispiel: Migration eines Hintergrundskripts zu einem Service Worker

Manifest V2 (background.js):

            chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: true};
  },
  {urls: ["*.example.com/*"]},
  ["blocking"]
);

            

              
                Copy
              
            
          

Manifest V3 (service-worker.js):

            chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1],
  addRules: [{
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": { "urlFilter": "*.example.com/*", "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"] }
  }]
});

            

              
                Copy
              
            
          

manifest.json (Manifest V3):

            {
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple extension",
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "storage"
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

            

              
                Copy
              
            
          

Wichtige JavaScript-APIs für Browser-Erweiterungen

Browser-Erweiterungen verlassen sich auf eine Reihe von JavaScript-APIs, um mit dem Browser und Webseiten zu interagieren. Hier sind einige der wichtigsten APIs:

1. chrome.runtime

Die chrome.runtime API bietet Zugriff auf die Laufzeitumgebung der Erweiterung. Sie ermöglicht es Erweiterungen, mit dem Hintergrundskript zu kommunizieren, auf die Manifest-Datei zuzugreifen und den Lebenszyklus der Erweiterung zu verwalten.

Wichtige Methoden:

• chrome.runtime.sendMessage(): Sendet eine Nachricht an das Hintergrundskript oder andere Erweiterungen.
• chrome.runtime.onMessage.addListener(): Lauscht auf Nachrichten von anderen Skripten.
• chrome.runtime.getManifest(): Gibt die Manifest-Datei der Erweiterung als JavaScript-Objekt zurück.
• chrome.runtime.reload(): Lädt die Erweiterung neu.

Beispiel: Senden einer Nachricht vom Inhaltsskript an das Hintergrundskript

Inhaltsskript (content.js):

            chrome.runtime.sendMessage({message: "Hello from content script!"}, function(response) {
  console.log("Response from background script: ", response.message);
});

            

              
                Copy
              
            
          

Hintergrundskript (service-worker.js):

            chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Message from content script: ", request.message);
    sendResponse({message: "Hello from background script!"});
  }
);

            

              
                Copy
              
            
          

2. chrome.storage

Die chrome.storage API bietet einen Mechanismus zum Speichern und Abrufen von Daten innerhalb der Erweiterung. Sie bietet sowohl lokale als auch synchronisierte Speicheroptionen.

Wichtige Methoden:

• chrome.storage.local.set(): Speichert Daten lokal.
• chrome.storage.local.get(): Ruft Daten aus dem lokalen Speicher ab.
• chrome.storage.sync.set(): Speichert Daten, die über die Geräte des Benutzers hinweg synchronisiert werden.
• chrome.storage.sync.get(): Ruft Daten aus dem synchronisierten Speicher ab.

Beispiel: Speichern und Abrufen von Daten im lokalen Speicher

            // Store data
chrome.storage.local.set({key: "value"}, function() {
  console.log("Value is set to " + "value");
});

// Retrieve data
chrome.storage.local.get(["key"], function(result) {
  console.log("Value currently is " + result.key);
});

            

              
                Copy
              
            
          

3. chrome.tabs

Die chrome.tabs API ermöglicht es Erweiterungen, mit Browser-Tabs zu interagieren. Sie bietet Methoden zum Erstellen, Abfragen, Ändern und Schließen von Tabs.

Wichtige Methoden:

• chrome.tabs.create(): Erstellt einen neuen Tab.
• chrome.tabs.query(): Fragt Tabs ab, die bestimmten Kriterien entsprechen.
• chrome.tabs.update(): Aktualisiert die Eigenschaften eines Tabs.
• chrome.tabs.remove(): Schließt einen Tab.
• chrome.tabs.executeScript(): Führt JavaScript-Code in einem Tab aus.

Beispiel: Erstellen eines neuen Tabs

            chrome.tabs.create({url: "https://www.example.com"}, function(tab) {
  console.log("New tab created with ID: " + tab.id);
});

            

              
                Copy
              
            
          

4. chrome.alarms

Die chrome.alarms API ermöglicht es Erweiterungen, Aufgaben zu planen, die zu einem bestimmten Zeitpunkt oder nach einem festgelegten Intervall ausgeführt werden sollen. Dies ist in Manifest V3 besonders wichtig, da es die Verwendung von Timern innerhalb von Hintergrundseiten ersetzt, die nicht mehr unterstützt werden.

Wichtige Methoden:

• chrome.alarms.create(): Erstellt einen neuen Alarm.
• chrome.alarms.get(): Ruft einen vorhandenen Alarm ab.
• chrome.alarms.clear(): Löscht einen Alarm.
• chrome.alarms.getAll(): Ruft alle Alarme ab.
• chrome.alarms.onAlarm.addListener(): Lauscht auf Alarmereignisse.

Beispiel: Erstellen eines Alarms

            chrome.alarms.create("myAlarm", {delayInMinutes: 1, periodInMinutes: 1});

chrome.alarms.onAlarm.addListener(function(alarm) {
  if (alarm.name === "myAlarm") {
    console.log("Alarm triggered!");
  }
});

            

              
                Copy
              
            
          

5. chrome.scripting

Die chrome.scripting API ermöglicht es Erweiterungen, JavaScript und CSS in Webseiten einzufügen. Diese API ist ein wichtiger Bestandteil von Manifest V3 und wird von Service Workern verwendet, um nach dem Laden mit Webseiten zu interagieren.

Wichtige Methoden:

• chrome.scripting.executeScript(): Führt JavaScript-Code in einem Tab oder Frame aus.
• chrome.scripting.insertCSS(): Fügt CSS in einen Tab oder Frame ein.

Beispiel: Einfügen von JavaScript in einen Tab

            chrome.scripting.executeScript({
  target: {tabId: tabId},
  function: function() {
    console.log("Injected script!");
    document.body.style.backgroundColor = 'red';
  }
});

            

              
                Copy
              
            
          

6. chrome.notifications

Die chrome.notifications API ermöglicht es Erweiterungen, dem Benutzer Benachrichtigungen anzuzeigen. Dies ist nützlich, um Updates, Warnungen und andere wichtige Informationen bereitzustellen.

Wichtige Methoden:

• chrome.notifications.create(): Erstellt eine neue Benachrichtigung.
• chrome.notifications.update(): Aktualisiert eine vorhandene Benachrichtigung.
• chrome.notifications.clear(): Löscht eine Benachrichtigung.
• chrome.notifications.getAll(): Ruft alle Benachrichtigungen ab.

Beispiel: Erstellen einer Benachrichtigung

            chrome.notifications.create('myNotification', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'My Extension',
  message: 'Hello from my extension!'
}, function(notificationId) {
  console.log('Notification created with ID: ' + notificationId);
});

            

              
                Copy
              
            
          

7. chrome.contextMenus

Die chrome.contextMenus API ermöglicht es Erweiterungen, Elemente zum Kontextmenü des Browsers (Rechtsklick-Menü) hinzuzufügen. Dies bietet Benutzern eine bequeme Möglichkeit, auf die Funktionalität der Erweiterung direkt von Webseiten aus zuzugreifen.

Wichtige Methoden:

• chrome.contextMenus.create(): Erstellt ein neues Kontextmenü-Element.
• chrome.contextMenus.update(): Aktualisiert ein vorhandenes Kontextmenü-Element.
• chrome.contextMenus.remove(): Entfernt ein Kontextmenü-Element.
• chrome.contextMenus.removeAll(): Entfernt alle von der Erweiterung erstellten Kontextmenü-Elemente.

Beispiel: Erstellen eines Kontextmenü-Elements

            chrome.contextMenus.create({
  id: "myContextMenuItem",
  title: "My Context Menu Item",
  contexts: ["page", "selection"]
}, function() {
  console.log("Context menu item created.");
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "myContextMenuItem") {
    console.log("Context menu item clicked!");
    alert("You clicked the context menu item!");
  }
});

            

              
                Copy
              
            
          

8. chrome.i18n

Die chrome.i18n API wird verwendet, um Ihre Erweiterung zu internationalisieren und sie für Benutzer in verschiedenen Sprachen und Regionen zugänglich zu machen. Sie ermöglicht es Ihnen, lokalisierte Versionen der Benutzeroberfläche und Nachrichten Ihrer Erweiterung bereitzustellen.

Wichtige Methoden:

• chrome.i18n.getMessage(): Ruft eine lokalisierte Zeichenfolge aus dem _locales-Verzeichnis der Erweiterung ab.

Beispiel: Verwendung von chrome.i18n für die Lokalisierung

Erstellen Sie zunächst ein _locales-Verzeichnis im Stammordner Ihrer Erweiterung. Darin erstellen Sie sprachspezifische Ordner wie en, es, fr usw.

Innerhalb jedes Sprachordners erstellen Sie eine messages.json-Datei. Zum Beispiel in _locales/en/messages.json:

            {
  "extensionName": {
    "message": "My Extension",
    "description": "The name of the extension."
  },
  "greetingMessage": {
    "message": "Hello, world!",
    "description": "A simple greeting message."
  }
}

            

              
                Copy
              
            
          

Anschließend, in Ihrem JavaScript-Code:

            let extensionName = chrome.i18n.getMessage("extensionName");
let greeting = chrome.i18n.getMessage("greetingMessage");
console.log(extensionName); // Output: My Extension
console.log(greeting);      // Output: Hello, world!

            

              
                Copy
              
            
          

Cross-Browser-Kompatibilität

Obwohl Chrome der beliebteste Browser für die Entwicklung von Erweiterungen ist, ist es wichtig, die Cross-Browser-Kompatibilität zu berücksichtigen. Firefox, Safari und andere Browser unterstützen ebenfalls Erweiterungen, aber ihre APIs und Manifest-Formate können geringfügig abweichen.

Um Cross-Browser-Kompatibilität zu gewährleisten:

• Verwenden Sie die WebExtensions API: Die WebExtensions API ist eine standardisierte API für die Entwicklung von Browser-Erweiterungen, die von mehreren Browsern unterstützt wird.
• Testen Sie in verschiedenen Browsern: Testen Sie Ihre Erweiterung in verschiedenen Browsern, um Kompatibilitätsprobleme zu identifizieren und zu beheben.
• Verwenden Sie Polyfills: Verwenden Sie Polyfills, um fehlende API-Funktionalität in verschiedenen Browsern bereitzustellen.
• Bedingten Code verwenden: Verwenden Sie bedingten Code, um sich an browserspezifische Unterschiede anzupassen. Zum Beispiel: if (typeof browser === "undefined") { var browser = chrome; }

Best Practices für die Entwicklung von Browser-Erweiterungen

Hier sind einige Best Practices, die Sie bei der Entwicklung von Browser-Erweiterungen beachten sollten:

• Berechtigungen minimieren: Fordern Sie nur die Berechtigungen an, die Ihre Erweiterung unbedingt benötigt. Dies verbessert den Datenschutz und die Sicherheit der Benutzer.
• Sichere Codierungspraktiken verwenden: Befolgen Sie sichere Codierungspraktiken, um Schwachstellen wie Cross-Site-Scripting (XSS) und Code-Injection zu verhindern.
• Leistung optimieren: Optimieren Sie die Leistung Ihrer Erweiterung, um deren Auswirkungen auf die Browser-Leistung zu minimieren.
• Klare und prägnante Dokumentation bereitstellen: Stellen Sie eine klare und prägnante Dokumentation bereit, um Benutzern zu helfen, die Verwendung Ihrer Erweiterung zu verstehen.
• Fehler elegant behandeln: Implementieren Sie eine Fehlerbehandlung, um zu verhindern, dass Ihre Erweiterung abstürzt oder unerwartetes Verhalten verursacht.
• Erweiterung aktuell halten: Aktualisieren Sie Ihre Erweiterung regelmäßig, um Fehler, Sicherheitslücken und Kompatibilitätsprobleme zu beheben.
• Internationalisierung (i18n) berücksichtigen: Gestalten Sie Ihre Erweiterung so, dass sie leicht in verschiedene Sprachen lokalisiert werden kann. Verwenden Sie die chrome.i18n API.
• Benutzerdatenschutz respektieren: Seien Sie transparent darüber, wie Ihre Erweiterung Benutzerdaten sammelt und verwendet, und holen Sie bei Bedarf die Zustimmung des Benutzers ein. Halten Sie sich an relevante Datenschutzbestimmungen wie DSGVO und CCPA.

Einreichung Ihrer Erweiterung in den Stores

Sobald Ihre Erweiterung entwickelt und getestet wurde, möchten Sie sie in den Browser-Erweiterungs-Stores einreichen, um sie Benutzern zugänglich zu machen. Jeder Browser hat seinen eigenen Store und Einreichungsprozess:

• Chrome Web Store: Reichen Sie Ihre Erweiterung im Chrome Web Store für Chrome-Benutzer ein. Der Prozess umfasst die Erstellung eines Entwicklerkontos, das Verpacken Ihrer Erweiterung und das Hochladen in den Store.
• Firefox Add-ons: Reichen Sie Ihre Erweiterung bei Firefox Add-ons für Firefox-Benutzer ein. Der Prozess ähnelt dem des Chrome Web Stores und umfasst die Erstellung eines Entwicklerkontos und die Einreichung Ihrer Erweiterung zur Überprüfung.
• Safari Extensions Gallery: Reichen Sie Ihre Erweiterung in der Safari Extensions Gallery für Safari-Benutzer ein. Der Prozess umfasst den Erwerb eines Entwicklerzertifikats von Apple und die Einreichung Ihrer Erweiterung zur Überprüfung.

Beim Einreichen Ihrer Erweiterung stellen Sie sicher, dass Sie genaue und vollständige Informationen bereitstellen, einschließlich eines aussagekräftigen Titels, einer detaillierten Beschreibung, Screenshots und einer Datenschutzerklärung. Die Erweiterungs-Stores überprüfen die Einreichungen, um sicherzustellen, dass sie ihren Richtlinien und Leitlinien entsprechen.

Fazit

Die Entwicklung von Browser-Erweiterungen mit Manifest V3 und JavaScript-APIs bietet eine leistungsstarke Möglichkeit, das Browsing-Erlebnis anzupassen und zu verbessern. Durch das Verständnis der Kernkonzepte, die Befolgung von Best Practices und die Berücksichtigung der Cross-Browser-Kompatibilität können Entwickler wertvolle und ansprechende Erweiterungen für Benutzer auf der ganzen Welt erstellen. Während sich das Web weiterentwickelt, werden Browser-Erweiterungen weiterhin eine entscheidende Rolle bei der Gestaltung der Zukunft des Internets spielen.

Denken Sie daran, beim Entwickeln von Erweiterungen stets den Datenschutz und die Sicherheit der Benutzer zu priorisieren. Indem Sie diese Prinzipien berücksichtigen, können Sie Erweiterungen erstellen, die sowohl nützlich als auch vertrauenswürdig sind.

Dieser Leitfaden bietet eine solide Grundlage für den Einstieg in die Entwicklung von Browser-Erweiterungen. Wenn Sie tiefer eintauchen, erkunden Sie die verschiedenen verfügbaren APIs und Funktionen und experimentieren Sie mit verschiedenen Techniken, um innovative und wirkungsvolle Erweiterungen zu erstellen.