← Todos los artículos

Tipos de acciones

Tres acciones que merecen un sitio en la barra: URL limpia, CSV, PIP

15 mayo 2026 · por JustZix Team

La barra de acciones JustZix da lo mejor cuando contiene las cosas que usas a diario. Aquí tienes tres acciones universales — útiles casi en todas partes, sea cual sea el sitio. Cada una es un botón y unas pocas líneas de código.

Acción 1 — una URL limpia

Copias un enlace para enviar, y se arrastra detrás una cola de ?utm_source=...&fbclid=.... Esta acción copia la dirección sin la basura de tracking. Etiqueta URL, morada:

const url = new URL(location.href);
const junk = ['fbclid', 'gclid', 'msclkid', 'igshid', 'mc_eid'];
[...url.searchParams.keys()].forEach(k => {
  if (k.startsWith('utm_') || junk.includes(k)) {
    url.searchParams.delete(k);
  }
});
navigator.clipboard.writeText(url.toString());
JUSTZIX.log('URL limpia al portapapeles: ' + url);

Acción 2 — exportar una tabla a CSV

La página muestra datos en una tabla pero no te da ningún «descargar». Esta acción vuelca la primera tabla a un archivo CSV. Etiqueta CSV, verde:

const t = document.querySelector('table');
if (!t) { alert('Ninguna tabla en la página.'); }
else {
  const csv = [...t.rows].map(r =>
    [...r.cells].map(c =>
      '"' + c.innerText.trim().replace(/"/g, '""') + '"'
    ).join(',')
  ).join('\n');
  const a = document.createElement('a');
  a.href = URL.createObjectURL(new Blob([csv], { type: 'text/csv' }));
  a.download = 'tabla.csv';
  a.click();
}

Acción 3 — Picture-in-Picture

Hace saltar el vídeo de la página a una ventana flotante que se queda en primer plano cuando cambias de pestaña. Etiqueta PIP, azul:

const v = document.querySelector('video');
if (!v) { alert('Ningún vídeo en la página.'); }
else if (document.pictureInPictureElement) {
  document.exitPictureInPicture();
} else {
  v.requestPictureInPicture();
}

Por qué acciones, no reglas

Las tres comparten un rasgo: quieres activarlas en un momento que eliges tú, no automáticamente. Es la definición de una acción — código ejecutado por un clic, no en cada carga de página. Una regla que «copia la URL en cada visita» no tendría sentido; un botón «copia ahora» sí.

Trampas

• clipboard requiere un gesto. navigator.clipboard.writeText funciona porque una acción es un clic — el navegador lo trata como consentimiento del usuario. El mismo código en una regla (sin clic) sería bloqueado.
• CSV coge la primera tabla. ¿Una página con varias tablas? Restringe querySelector a la correcta.
• PIP solo para <video>. Los reproductores que dibujan la imagen sobre un <canvas> no entrarán en Picture-in-Picture.

Mira también

• Ejemplos — estas y otras acciones listas para usar
• La acción BUTTON — el tipo de acción detrás de estas tres
• window.JZ helpers — la API programática de las acciones

Instala JustZix — y ten estos tres botones a mano en todas partes.