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:
- 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.
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.
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
Aún no hay comentarios.