← Tous les articles

Types d'actions

Trois actions qui méritent une place dans la barre : URL propre, CSV, PIP

15 mai 2026 · par JustZix Team

La barre d'actions JustZix est à son meilleur quand elle contient les choses que vous utilisez chaque jour. Voici trois actions universelles — utiles presque partout, quel que soit le site. Chacune, c'est un bouton et quelques lignes de code.

Action 1 — une URL propre

Vous copiez un lien à envoyer, et une traîne de ?utm_source=...&fbclid=... le suit. Cette action copie l'adresse sans le bazar de tracking. Étiquette URL, violet :

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 propre dans le presse-papiers : ' + url);

Action 2 — exporter un tableau en CSV

La page montre des données dans un tableau mais ne vous donne aucun « télécharger ». Cette action verse le premier tableau dans un fichier CSV. Étiquette CSV, vert :

const t = document.querySelector('table');
if (!t) { alert('Aucun tableau sur la page.'); }
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 = 'tableau.csv';
  a.click();
}

Action 3 — Picture-in-Picture

Fait surgir la vidéo de la page dans une fenêtre flottante qui reste au-dessus quand vous changez d'onglet. Étiquette PIP, bleu :

const v = document.querySelector('video');
if (!v) { alert('Aucune vidéo sur la page.'); }
else if (document.pictureInPictureElement) {
  document.exitPictureInPicture();
} else {
  v.requestPictureInPicture();
}

Pourquoi des actions, pas des règles

Les trois partagent un trait : vous voulez les déclencher à un moment que vous choisissez, pas automatiquement. C'est la définition d'une action — du code exécuté par un clic, pas à chaque chargement de page. Une règle qui « copie l'URL à chaque visite » n'aurait aucun sens ; un bouton « copier maintenant », si.

Pièges

• Le presse-papiers exige un geste. navigator.clipboard.writeText fonctionne parce qu'une action est un clic — le navigateur le traite comme un consentement de l'utilisateur. Le même code dans une règle (sans clic) serait bloqué.
• CSV prend le premier tableau. Une page avec plusieurs tableaux ? Restreignez querySelector au bon.
• PIP seulement pour <video>. Les lecteurs qui dessinent l'image sur un <canvas> n'entreront pas en Picture-in-Picture.

À voir aussi

• Exemples — ces actions et d'autres prêtes à l'emploi
• L'action BOUTON — le type d'action derrière ces trois
• window.JZ helpers — l'API programmatique des actions

Installez JustZix — et gardez ces trois boutons à portée de main partout.