Nettoyage des traqueurs d'URL dans Manifest V3 sans plantages

Nettoyer les paramètres de suivi des URL dans Manifest V3 : Éviter les pièges courants

Les développeurs d'extensions de navigateur sont souvent confrontés à la tâche de supprimer les balises UTM, fbclid, gclid et autres paramètres de suivi des URL. Une implémentation simple utilisant des expressions régulières fonctionne pour les cas de base, mais dans Manifest V3, cela entraîne des échecs : perturbation des moteurs de recherche, redirections infinies et interruption des requêtes XHR. Explorons les principaux problèmes et leurs solutions avec un exemple d'architecture concret.

Une liste blanche pour les moteurs de recherche empêche la suppression des paramètres nécessaires. Google, Yandex et d'autres utilisent la source et le support pour leurs filtres (par exemple, images, vidéos). Sans exceptions, le nettoyage rend la recherche non fonctionnelle.

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; // Laisser les moteurs de recherche intacts
  }
  // ... logique de nettoyage
}

Navigation dans Manifest V3 : Filtrer les transitions

Manifest V3 restreint l'interception des requêtes. declarativeNetRequest ne permet pas d'analyser les paramètres dynamiquement, donc webNavigation.onBeforeNavigate est utilisé. Une simple redirection via chrome.tabs.update pose problème :

• Les requêtes POST des formulaires échouent.
• Les requêtes XHR/Fetch pour JSON échouent.
• La redirection déclenche l'événement de manière répétée, créant une boucle.

La solution est une vérification stricte du transitionType. Ne traiter que les 'link' (clics sur les liens), en ignorant typing, auto_subframe et 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']}
  ]
});

Le filtre hostContains: '.' exclut les schémas chrome-extension://, où new URL() se comporte de manière imprévisible.

Menu contextuel et API Clipboard

Pour un nettoyage manuel des liens, ajoutez un menu contextuel. Dans les Service Workers de Manifest V3, l'accès au presse-papiers est bloqué — déléguez à un script de contenu.

Dans background.js :

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

Le script de contenu utilise l'API Async Clipboard avec une notification toast :

function cleanAndCopyLink(url) {
  chrome.runtime.sendMessage({ action: "cleanLink", url: url }, (response) => {
    if (response && response.cleanedUrl) {
      navigator.clipboard.writeText(response.cleanedUrl).then(() => {
        showNotification(`Lien nettoyé et copié !\nTraceurs supprimés : ${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);
}

Le style s'inspire du Material Design : fond dégradé, ombre, fondu fluide.

Points clés à retenir

• Liste blanche de domaines : Exclut les moteurs de recherche (google.com, yandex.ru) où les paramètres sont essentiels au fonctionnement.
• transitionType === 'link' : Empêche l'interférence avec les formulaires, XHR et la saisie d'URL.
• Filtre de schéma : hostContains: '.' + http/https évite les erreurs avec extension://.
• Délégation du presse-papiers : Service Worker → Script de contenu pour Manifest V3.
• Interface toast : Notifications minimalistes sans alertes, avec un compteur de traceurs supprimés.

— Editorial Team