Oczyszczanie URL z trackerów w Manifest V3 bez awarii

Czyszczenie URL z trackerów w Manifest V3: unikanie typowych błędów

Twórcy rozszerzeń przeglądarkowych często mierzą się z zadaniem usuwania znaczników UTM, fbclid, gclid i innych parametrów śledzących z adresów URL. Prosta implementacja za pomocą wyrażeń regularnych działa w podstawowych przypadkach, ale w Manifest V3 prowadzi do awarii: uszkodzenia wyszukiwarek, nieskończonych przekierowań i zakłóceń w żądaniach XHR. Przyjrzyjmy się kluczowym problemom i ich rozwiązaniom na przykładzie rzeczywistej architektury.

Biała lista dla wyszukiwarek zapobiega usuwaniu niezbędnych parametrów. Google, Yandex i inne wykorzystują source, medium do filtrów (obrazy, wideo). Bez wyjątków czyszczenie sprawia, że wyszukiwanie przestaje działać.

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; // Nie dotykamy wyszukiwarek
  }
  // ... logika czyszczenia
}

Nawigacja w Manifest V3: filtrowanie przejść

Manifest V3 ogranicza przechwytywanie żądań. declarativeNetRequest nie analizuje parametrów dynamicznie, dlatego używa się webNavigation.onBeforeNavigate. Proste przekierowanie przez chrome.tabs.update powoduje problemy:

• Żądania POST z formularzy ulegają uszkodzeniu.
• XHR/Fetch dla JSON kończą się niepowodzeniem.
• Przekierowanie wyzwala zdarzenie ponownie, tworząc pętlę.

Rozwiązanie to ścisła weryfikacja transitionType. Przetwarzaj tylko 'link' (kliknięcia w linki), ignorując typing, auto_subframe, form_submit.

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']}
  ]
});

Filtr hostContains: '.' wyklucza schematy chrome-extension://, gdzie new URL() zachowuje się niestabilnie.

Menu kontekstowe i Clipboard API

Do ręcznego czyszczenia linków dodaje się menu kontekstowe. W Service Worker Manifest V3 dostęp do schowka jest zablokowany — deleguje się do content script.

W background.js:

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

Content script wykorzystuje Async Clipboard API z powiadomieniem typu toast:

function cleanAndCopyLink(url) {
  chrome.runtime.sendMessage({ action: "cleanLink", url: url }, (response) => {
    if (response && response.cleanedUrl) {
      navigator.clipboard.writeText(response.cleanedUrl).then(() => {
        showNotification(`Link wyczyszczony i skopiowany!
Usunięto trackerów: ${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);
}

Stylizacja imituje Material Design: gradientowe tło, cień, płynne zanikanie.

Co jest ważne

• Biała lista domen: Wyklucza wyszukiwarki (google.com, yandex.ru), gdzie parametry są kluczowe dla funkcjonalności.
• transitionType === 'link': Zapobiega ingerencji w formularze, XHR i wpisywanie URL.
• Filtr schematów: hostContains: '.' + http/https unika błędów z extension://.
• Delegowanie Clipboard: Service Worker → Content Script dla Manifest V3.
• Toast-UI: Minimalistyczne powiadomienia bez alertów, z liczeniem usuniętych trackerów.

— Editorial Team