URL-Tracker-Bereinigung in Manifest V3 ohne Abstürze

Tracker-Parameter aus URLs in Manifest V3 entfernen: Häufige Fallstricke vermeiden

Entwickler von Browser-Erweiterungen stehen oft vor der Aufgabe, UTM-Tags, fbclid, gclid und andere Tracking-Parameter aus URLs zu entfernen. Eine einfache Implementierung mit regulären Ausdrücken funktioniert für grundlegende Fälle, führt aber in Manifest V3 zu Problemen: Suchmaschinen werden beeinträchtigt, es kommt zu Endlosschleifen bei Weiterleitungen und XHR-Anfragen werden unterbrochen. Lassen Sie uns die wichtigsten Probleme und ihre Lösungen anhand eines Praxisbeispiels für die Architektur untersuchen.

Eine Whitelist für Suchmaschinen verhindert das Entfernen notwendiger Parameter. Google, Yandex und andere nutzen Quell- und Medium-Parameter für Filter (z.B. Bilder, Videos). Ohne Ausnahmen macht die Bereinigung die Suche unbrauchbar.

const WHITELIST = [
  'google.com', 'bing.com', 'yandex.ru', 'duckduckgo.com' 
];

async function cleanUrl(url) {
  const urlObj = new URL(url);
  if (WHITELIST.some(site => urlObj.hostname.includes(site))) {
    return url; // Suchmaschinen unverändert lassen
  }
  // ... Bereinigungslogik
}

Navigation in Manifest V3: Übergänge filtern

Manifest V3 schränkt die Anfrage-Abfangung ein. declarativeNetRequest analysiert Parameter nicht dynamisch, daher wird webNavigation.onBeforeNavigate verwendet. Eine einfache Weiterleitung über chrome.tabs.update verursacht Probleme:

• POST-Anfragen von Formularen werden unterbrochen.
• XHR/Fetch-Anfragen für JSON schlagen fehl.
• Die Weiterleitung löst das Ereignis wiederholt aus und erzeugt eine Schleife.

Die Lösung ist eine strikte Prüfung von transitionType. Nur 'link' (Link-Klicks) behandeln, während Eingaben, auto_subframe und form_submit ignoriert werden.

chrome.webNavigation.onBeforeNavigate.addListener(async (details) => {
  const result = await chrome.storage.sync.get(['autoClean']);
  if (!result.autoClean) return;

  if (details.transitionType !== 'link') return;

  const cleanedUrl = await cleanUrl(details.url);

  if (details.url !== cleanedUrl) {
    chrome.tabs.update(details.tabId, { url: cleanedUrl });
  }
}, {
  url: [
    {hostContains: '.'},
    {schemes: ['http', 'https']}
  ]
});

Der hostContains: '.'-Filter schließt chrome-extension://-Schemas aus, bei denen new URL() unvorhersehbar reagiert.

Kontextmenü und Clipboard API

Für die manuelle Link-Bereinigung fügen Sie ein Kontextmenü hinzu. In Manifest V3 Service Workern ist der Zugriff auf die Zwischenablage blockiert – delegieren Sie dies an ein Content-Skript.

In background.js:

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "cleanCopy" && info.linkUrl) {
    chrome.tabs.sendMessage(tab.id, {
      action: "cleanAndCopy",
      url: info.linkUrl
    });
  }
});

Das Content-Skript nutzt die Async Clipboard API mit einer Toast-Benachrichtigung:

function cleanAndCopyLink(url) {
  chrome.runtime.sendMessage({ action: "cleanLink", url: url }, (response) => {
    if (response && response.cleanedUrl) {
      navigator.clipboard.writeText(response.cleanedUrl).then(() => {
        showNotification(`Link bereinigt und kopiert!\nEntfernte Tracker: ${response.trackerCount}`);
      });
    }
  });
}

function showNotification(message) {
  let toast = document.getElementById('zerotail-toast');
  if (!toast) {
    toast = document.createElement('div');
    toast.id = 'zerotail-toast';
    toast.style.cssText = `
      position: fixed; bottom: 20px; right: 20px;
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      color: white; padding: 12px 20px; border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 999999;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      max-width: 320px; transition: opacity 0.3s ease;
    `;
    document.body.appendChild(toast);
  }
  toast.textContent = message;
  toast.style.opacity = '1';
  setTimeout(() => { toast.style.opacity = '0'; }, 3000);
}

Das Styling orientiert sich an Material Design: Farbverlauf, Schatten, sanftes Ausblenden.

Wichtige Erkenntnisse

• Domain-Whitelist: Schließt Suchmaschinen (google.com, yandex.ru) aus, bei denen Parameter für die Funktionalität entscheidend sind.
• transitionType === 'link': Verhindert Störungen bei Formularen, XHR und URL-Eingaben.
• Schema-Filter: hostContains: '.' + http/https vermeidet Fehler mit extension://.
• Clipboard-Delegierung: Service Worker → Content Script für Manifest V3.
• Toast-UI: Minimalistische Benachrichtigungen ohne Alerts, mit Zählung der entfernten Tracker.

— Editorial Team