Čištění URL trackerů v Manifest V3 bez selhání

Čištění URL od sledovacích prvků v Manifestu V3: Jak se vyhnout běžným chybám

Vývojáři rozšíření prohlížečů často řeší úlohu odstranění UTM značek, fbclid, gclid a dalších parametrů sledování z URL. Jednoduchá implementace pomocí regulárních výrazů funguje pro základní případy, ale v Manifestu V3 vede k selháním: poškození vyhledávačů, nekonečným přesměrováním a narušení XHR požadavků. Podívejme se na klíčové problémy a jejich řešení na příkladu reálné architektury.

Whitelist pro vyhledávače zabraňuje odstranění nezbytných parametrů. Google, Yandex a další používají source, medium pro filtry (obrázky, videa). Bez výjimek čištění znemožňuje vyhledávání.

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; // Necháme vyhledávače na pokoji
  }
  // ... logika čištění
}

Navigace v Manifestu V3: Filtrování přechodů

Manifest V3 omezuje zachytávání požadavků. declarativeNetRequest neparsuje parametry dynamicky, proto se používá webNavigation.onBeforeNavigate. Jednoduché přesměrování přes chrome.tabs.update způsobuje problémy:

• POST požadavky z formulářů se poškodí.
• XHR/Fetch pro JSON selžou.
• Přesměrování spustí událost znovu, čímž vznikne smyčka.

Řešením je přísná kontrola transitionType. Zpracovávat pouze 'link' (kliky na odkazy), ignorovat 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: '.' vylučuje schémata chrome-extension://, kde new URL() se chová nestabilně.

Kontextové menu a Clipboard API

Pro ruční čištění odkazů se přidává kontextové menu. V Service Worker Manifestu V3 je přístup k schránce blokován – deleguje se do content scriptu.

V 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 využívá Async Clipboard API s toast oznámením:

function cleanAndCopyLink(url) {
  chrome.runtime.sendMessage({ action: "cleanLink", url: url }, (response) => {
    if (response && response.cleanedUrl) {
      navigator.clipboard.writeText(response.cleanedUrl).then(() => {
        showNotification(`Odkaz vyčištěn a zkopírován!\nOdstraněno sledovacích prvků: ${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);
}

Stylizace napodobuje Material Design: gradientní pozadí, stín, plynulé mizení.

Co je důležité

• Whitelist domén: Vylučuje vyhledávače (google.com, yandex.ru), kde jsou parametry klíčové pro funkčnost.
• transitionType === 'link': Zabrání zásahu do formulářů, XHR a zadávání URL.
• Filtr schémat: hostContains: '.' + http/https se vyhne chybám s extension://.
• Delegování Clipboard: Service Worker → Content Script pro Manifest V3.
• Toast-UI: Minimalistická oznámení bez alertů, s počtem odstraněných sledovacích prvků.

— Editorial Team