Volver al inicio

Limpieza de rastreadores de URL en Manifest V3 sin fallos

El artículo desglosa la implementación de limpieza de URL de rastreadores en extensiones de Chrome Manifest V3. Se describen soluciones para lista blanca de motores de búsqueda, filtrado de transitionType, Clipboard API vía script de contenido. Se proporciona código funcional con ejemplos.

Manifest V3: Limpieza de enlaces sin romper el navegador
Advertisement 728x90

Eliminación de Parámetros de Rastreo en URLs con Manifest V3: Cómo Evitar Errores Comunes

Los desarrolladores de extensiones de navegador a menudo se enfrentan a la tarea de eliminar etiquetas UTM, fbclid, gclid y otros parámetros de seguimiento de las URLs. Una implementación simple con expresiones regulares funciona para casos básicos, pero en Manifest V3, esto provoca fallos: rompe los motores de búsqueda, causa redirecciones infinitas e interrumpe las solicitudes XHR. Exploremos los problemas clave y sus soluciones con un ejemplo de arquitectura del mundo real.

Una lista blanca para motores de búsqueda evita la eliminación de parámetros necesarios. Google, Yandex y otros utilizan fuente y medio para filtros (por ejemplo, imágenes, vídeos). Sin excepciones, la limpieza deja la búsqueda inoperativa.

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; // Dejar los motores de búsqueda intactos
  }
  // ... lógica de limpieza
}

Navegación en Manifest V3: Filtrando Transiciones

Manifest V3 restringe la interceptación de solicitudes. declarativeNetRequest no analiza parámetros dinámicamente, por lo que se utiliza webNavigation.onBeforeNavigate. Un redireccionamiento simple mediante chrome.tabs.update causa problemas:

Google AdInline article slot
  • Las solicitudes POST de formularios se rompen.
  • Las solicitudes XHR/Fetch para JSON fallan.
  • El redireccionamiento activa el evento repetidamente, creando un bucle.

La solución es verificar strictamente transitionType. Solo manejar 'link' (clics en enlaces), ignorando typing, auto_subframe y 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']}
  ]
});

El filtro hostContains: '.' excluye esquemas chrome-extension://, donde new URL() se comporta de manera impredecible.

Menú Contextual y API del Portapapeles

Para la limpieza manual de enlaces, añade un menú contextual. En los Service Workers de Manifest V3, el acceso al portapapeles está bloqueado—delega a un script de contenido.

Google AdInline article slot

En background.js:

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

El script de contenido utiliza la API Async Clipboard con una notificación tipo toast:

function cleanAndCopyLink(url) {
  chrome.runtime.sendMessage({ action: "cleanLink", url: url }, (response) => {
    if (response && response.cleanedUrl) {
      navigator.clipboard.writeText(response.cleanedUrl).then(() => {
        showNotification(`¡Enlace limpiado y copiado!\nRastreadores eliminados: ${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);
}

El estilo imita Material Design: fondo degradado, sombra, desvanecimiento suave.

Google AdInline article slot

Conclusiones Clave

  • Lista blanca de dominios: Excluye motores de búsqueda (google.com, yandex.ru) donde los parámetros son críticos para la funcionalidad.
  • transitionType === 'link': Evita interferencias con formularios, XHR y entrada de URL.
  • Filtro de esquema: hostContains: '.' + http/https evita errores con extension://.
  • Delegación del portapapeles: Service Worker → Script de Contenido para Manifest V3.
  • Interfaz de notificación toast: Notificaciones minimalistas sin alertas, con un conteo de rastreadores eliminados.

— Editorial Team

Advertisement 728x90

Leer después