Cette année, j’ai pris une bonne résolution : optimiser mon temps passé en ligne, surtout sur les tâches répétitives et pas franchement passionnantes… mais indispensables.
Si tu fais partie par exemple d’une asso, tu connais sûrement ce genre de situation : des formulaires en ligne à remplir, avec des informations redondantes, parfois légèrement différentes selon le contexte.
Bien sûr, les navigateurs proposent des fonctions d’autoremplissage. Mais c’est souvent limité aux champs classiques (nom, email, adresse), ça ne fonctionne pas toujours de manière fiable.
Je souhaiterais donc pouvoir faire des trucs un poil plus poussé comme remplir des champs en fonction de conditions .
La redécouverte : Tampermonkey
Je me suis souvenu de l’existence de Tampermonkey, une extension firefox qui permet d’écrire des scripts utilisateurs en JavaScript.
En clair : tu peux personnaliser le comportement d’une page web selon tes besoins. Et ça c’est juste super pratique.
Tu peux par exemple :
- remplir automatiquement les champs de formulaire,
- insérer du texte prédéfini,
- sélectionner une option dans une liste déroulante,
- ou même créer une petite interface en HTML pour choisir quelle version d’une info tu veux insérer.
Un exemple concret ? remplir l’agenda du libre
👉 Proposer des événements sur l’Agenda du Libre
Quand tu vas sur le site pour proposer un évènement tu as ce formulaire à remplir:
Sur ce formulaire, on trouve plusieurs types de champs :
- zones de texte
- dates
- listes déroulantes
- cases à cocher
Pour automatiser son remplissage on va Installer l’extension tampermonkey , téléchargeable ici
Ouvre l’extension dans ton navigateur
clique sur « créer un nouveau script«
Par défaut , tu as ça:
Si tu connais le javascript côté client ça ne devrait pas être trop difficile. D’ailleurs même si tu le connais pas, mais que tu as un minimum de connaissances en programmation tu devrais comprendre facilement.
Remplir le titre ?
Pour remplir un champ tu dois récupérer le nom de son ID. Comment faire ?
Dans Firefox:
1- Ouvre les outils de développement
Appuie sur la touche F12 (ou clic droit > « Inspecter ») pour ouvrir l’inspecteur d’éléments de ton navigateur.
2- Survole le champ « titre »
Ensuite, fais un clic droit dessus et choisis « Inspecter ». Cela ouvrira automatiquement le code HTML correspondant à cet élément.
Repère le nom de l’attribut id
Dans la section de code qui s’affiche, cherche un attribut comme id= »nom_du_champ ». Ici c’est input_id= »event_title ». C’est ce nom qui te permettra de cibler précisément ce champ avec JavaScript ou CSS.
Ainsi pour tester et remplir automatiquement le titre , tu peux créer ce script :
// ==UserScript==
// @name Remplir titre AgendaDuLibre
// @namespace https://root66.org/
// @version 1.0
// @description Remplit automatiquement le champ titre du formulaire
// @match https://www.agendadulibre.org/events/new
// @grant none
// ==/UserScript==
(function() {
'use strict';
window.addEventListener('load', () => {
document.querySelector('#event_title').value = "Permanence Logiciels Libres Root66";
console.log(" Titre rempli automatiquement.");
});
})();
N’oublie pas d’activer le script dans le tableau de bord de tampermonkey.
Recharge ta page et …hop , le titre apparait prérempli dans le formulaire !
Script complet pour remplir l’ensemble du formulaire :
Ce que je veux faire maintenant :
- remplissage des champs : titre, description, adresse, ville, lieu, contact
- date automatique : mettre la date du prochain samedi de 14h à 17h ;
- sélection automatique de la région Île-de-France ;
- mettre des tags : adieu-window, linux etc
Et voici le script pour remplir le formulaire en entier . Tu peux adapter avec tes propres infos :
// ==UserScript==
// @name AutoRemplissage AgendaDuLibre
// @namespace https://root66.org/
// @version 1.3
// @description Remplit automatiquement les champs du formulaire d'ajout d'événement
// @match https://www.agendadulibre.org/events/new
// @grant none
// ==/UserScript==
(function () {
'use strict';
window.addEventListener('load', () => {
// Données de l'événement
const titre = "Permanences Logiciels Libres : pc et smartphones";
const description = `<p>Root66 vous propose une permanence Logiciels Libres.<img style="float: right;" src="https://root66.net/public/motoroot.png" width="227" height="251"></p>
<p>À cette permanence, tu pourras bénéficier d'une aide et d'un accompagnement pour t'aider à installer, configurer des logiciels libres aussi bien sur PC que sur Smartphones.<br>Un vieux pc qui rame ? Besoin de faire une sauvegarde de tes données ? Envie de tester des applications opensource sur ton téléphone ou sur ton pc, mais tu as peur de tout casser et de ne pas y arriver seul.e. Pas de souci, l'équipe de root66 est là pour t'accompagner, à ton propre rythme !</p>
<p>Un des objectifs est de t'aider à reprendre le contrôle de tes données et d'apprendre pas à pas les bonnes pratiques à adopter pour sécuriser et améliorer ta vie privée numérique.</p>
<p>N'hésite pas à passer ! L'équipe de root66 sera ravie de t'accueillir ! 🤓</p>
<p><strong>Programme</strong> (non exhaustif) :</p>
<ul>
<li>Dépannage, assistance sur PC, smartphones utilisant du logiciel libre</li>
<li>Découverte et apprentissage pour utiliser un système libre comme Linux</li>
<li>Installations et configurations complémentaires d'applications</li>
<li>Mise à jour et installation de nouveaux logiciels opensource</li>
<li>Discussions conviviales entre utilisateurs autour des logiciels libres</li>
</ul>
<p>Entrée libre et gratuite 😎</p>
<p>Pour une installation Linux ou pour un dépannage particulier, envoyez un mail à : contact@root66.net</p>
<p>Sur place, l'<a href="https://root66.net/public/bulletin-adhesion-R66-saisieDirecte.pdf">adhésion</a> à l’association est possible, mais non obligatoire.</p>
<p><strong>Accès :</strong> Parking rue Raymond Lefebvre. RER C, Transilien N, Tram T13 — gare de Saint-Cyr.</p>`;
const lieu = "La Maison des Associations, Simone Veil";
const adresse = "14 Av. Tom Morel";
const ville = "Saint-Cyr L'École";
const url = "https://root66.net";
const tags = "root66,logicielslibres,logiciellibre,linux,adieu-windows";
const contact = "contact@root66.net";
// Date automatique : demain de 14h à 17h
const now = new Date();
now.setDate(now.getDate() + 1);
const yyyy = now.getFullYear();
const mm = String(now.getMonth() + 1).padStart(2, '0');
const dd = String(now.getDate()).padStart(2, '0');
const startTime = `${yyyy}-${mm}-${dd}T14:00`;
const endTime = `${yyyy}-${mm}-${dd}T17:00`;
// Sélection de la région Île-de-France
const regionInput = document.querySelector('#event_region_id_12');
if (regionInput) {
regionInput.checked = true;
regionInput.dispatchEvent(new Event('change', { bubbles: true }));
}
// Remplissage des champs simples
document.querySelector('#event_title')?.setAttribute("value", titre);
document.querySelector('#event_start_time')?.setAttribute("value", startTime);
document.querySelector('#event_end_time')?.setAttribute("value", endTime);
document.querySelector('#event_place_name')?.setAttribute("value", lieu);
document.querySelector('#event_address')?.setAttribute("value", adresse);
document.querySelector('#event_city')?.setAttribute("value", ville);
document.querySelector('#event_url')?.setAttribute("value", url);
document.querySelector('[name="event[tag_list]"]')?.setAttribute("value", tags);
document.querySelector('[name="event[contact]"]')?.setAttribute("value", contact);
// Champ description : gestion du WYSIWYG (TinyMCE)
if (window.tinyMCE && tinyMCE.get('event_description')) {
tinyMCE.get('event_description').setContent(description);
} else {
const descField = document.querySelector('#event_description');
if (descField) {
descField.innerHTML = description;
}
}
// Scroll automatique au formulaire
document.querySelector('form')?.scrollIntoView({ behavior: 'smooth' });
console.log("Formulaire pré-rempli avec succès.");
});
})();
Si tu veux télécharger le script en entier :
https://framagit.org/benzo/tampermonkey_scripts.git
Conclusion:
Tampermonkey est un super outil et il peut faire bien plus que des remplissages de formulaires.
Il existe des tas de scripts intéressants disponibles ici comme pour :
- zapper automatiquement la pub de youtube,
- ajouter de s boutons télécharger les medias sur les reseaux sociaux,
- récupérer des coupons sur sites achats en ligne
- …
Voilà, avec un peu de JavaScript et Tampermonkey, c’est ton navigateur qui bosse pour toi !
Leave a Reply