Remplit automatiquement pseudo, nom, prénom, email et mot de passe de manière securisée avec un design moderne
// ==UserScript==
// @name Auto-Form [NEW]
// @namespace http://tampermonkey.net/
// @version 1.7.2
// @description Remplit automatiquement pseudo, nom, prénom, email et mot de passe de manière securisée avec un design moderne
// @author Devlaubin
// @match https://www.facebook.com/*
// @match https://www.google.com/account/*
// @match https://www.youtube.com/*
// @match https://www.instagram.com/*
// @match https://www.tiktok.com/*
// @match https://www.microsoft.com/*
// @match https://www.amazon.com/*
// @match https://www.roblox.com/*
// @grant none
// @icon https://simpleicons.org/icons/elk.svg
// @license OpenSource
// ==/UserScript==
(function() {
'use strict';
let modeDebug = false;
// Générateur de données aléatoires
function genererDonnees() {
const timestamp = Date.now();
const random = Math.floor(Math.random() * 1000);
// Génère une date de naissance aléatoire (entre 18 et 80 ans)
const age = 18 + Math.floor(Math.random() * 62);
const birthYear = new Date().getFullYear() - age;
const birthMonth = Math.floor(Math.random() * 12) + 1;
const birthDay = Math.floor(Math.random() * 28) + 1;
const genres = ['masculin', 'féminin'];
const genreChoisi = genres[Math.floor(Math.random() * genres.length)];
return {
pseudo: 'user' + timestamp,
username: 'testuser' + random,
prenom: genreChoisi === 'masculin' ? 'Jean' : 'Marie',
nom: 'Dupont',
email: 'test' + timestamp + '@gmail.com',
password: 'TestPass123!@#',
dateNaissance: {
jour: birthDay,
mois: birthMonth,
annee: birthYear,
complete: `${birthDay.toString().padStart(2, '0')}/${birthMonth.toString().padStart(2, '0')}/${birthYear}`,
iso: `${birthYear}-${birthMonth.toString().padStart(2, '0')}-${birthDay.toString().padStart(2, '0')}`
},
genre: genreChoisi
};
}
// Fonction pour logger en mode debug
function debugLog(message, element = null) {
if (modeDebug) {
console.log(`[AutoFill Debug] ${message}`, element || '');
}
}
// Fonction pour remplir un champ avec force
function remplirChampForce(field, value) {
if (!field) return false;
try {
const oldValue = field.value;
field.value = value;
// Force tous les événements possibles
const events = ['input', 'change', 'blur', 'keyup', 'keydown', 'focus'];
events.forEach(eventType => {
field.dispatchEvent(new Event(eventType, { bubbles: true }));
field.dispatchEvent(new InputEvent(eventType, { bubbles: true, cancelable: true }));
});
// Pour React et Vue
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
nativeInputValueSetter.call(field, value);
field.dispatchEvent(new Event('input', { bubbles: true }));
debugLog(`Champ rempli: ${field.name || field.id} = "${value}"`, field);
return true;
} catch (e) {
debugLog(`Erreur remplissage: ${e.message}`, field);
return false;
}
}
// Fonction pour cocher un radio/checkbox avec force
function cocherOptionForce(field) {
if (!field) return false;
try {
field.checked = true;
const events = ['change', 'click', 'input'];
events.forEach(eventType => {
field.dispatchEvent(new Event(eventType, { bubbles: true }));
field.dispatchEvent(new MouseEvent(eventType, { bubbles: true, cancelable: true }));
});
debugLog(`Option cochée: ${field.name || field.id}`, field);
return true;
} catch (e) {
debugLog(`Erreur cochage: ${e.message}`, field);
return false;
}
}
// Fonction pour sélectionner dans un select avec force et recherche intelligente
function selectionnerOptionForce(select, value) {
if (!select || select.tagName !== 'SELECT') return false;
try {
const options = Array.from(select.options);
debugLog(`Select trouvé avec ${options.length} options`, select);
// Convertir la valeur en string pour comparaison
const valueStr = value.toString();
// Stratégies de recherche multiples
let selectedOption = null;
// 1. Recherche exacte par valeur
selectedOption = options.find(opt => opt.value === valueStr);
// 2. Recherche par valeur partielle
if (!selectedOption) {
selectedOption = options.find(opt => opt.value.includes(valueStr));
}
// 3. Recherche par texte exact
if (!selectedOption) {
selectedOption = options.find(opt => opt.text.trim() === valueStr);
}
// 4. Recherche par texte partiel
if (!selectedOption) {
selectedOption = options.find(opt => opt.text.includes(valueStr));
}
// 5. Recherche insensible à la casse
if (!selectedOption) {
selectedOption = options.find(opt =>
opt.value.toLowerCase() === valueStr.toLowerCase() ||
opt.text.toLowerCase().includes(valueStr.toLowerCase())
);
}
// 6. Pour les nombres, essayer de trouver l'option correspondante
if (!selectedOption && !isNaN(valueStr)) {
const numValue = parseInt(valueStr);
selectedOption = options.find(opt => {
const optNum = parseInt(opt.value) || parseInt(opt.text);
return optNum === numValue;
});
}
// 7. Pour les mois, essayer de trouver par index (0-11 ou 1-12)
if (!selectedOption && !isNaN(valueStr)) {
const monthIndex = parseInt(valueStr);
if (monthIndex >= 1 && monthIndex <= 12) {
selectedOption = options[monthIndex]; // Essayer index direct
}
}
if (selectedOption) {
select.value = selectedOption.value;
select.selectedIndex = selectedOption.index;
const events = ['change', 'input', 'blur'];
events.forEach(eventType => {
select.dispatchEvent(new Event(eventType, { bubbles: true }));
});
debugLog(`Option sélectionnée: "${selectedOption.text}" (value: ${selectedOption.value})`, select);
return true;
} else {
debugLog(`Aucune option trouvée pour: "${valueStr}"`, select);
return false;
}
} catch (e) {
debugLog(`Erreur sélection: ${e.message}`, select);
return false;
}
}
// Fonction de recherche exhaustive d'éléments
function trouverElements(selectors) {
const elements = [];
selectors.forEach(selector => {
try {
const found = document.querySelectorAll(selector);
found.forEach(el => {
if (!elements.includes(el)) {
elements.push(el);
}
});
} catch (e) {
debugLog(`Erreur sélecteur ${selector}: ${e.message}`);
}
});
return elements;
}
// Fonction principale de remplissage ULTRA RENFORCÉE
function remplirFormulaire() {
const donnees = genererDonnees();
let champsRemplis = 0;
debugLog('=== DÉBUT DU REMPLISSAGE ===');
debugLog('Données générées:', donnees);
// === PSEUDO / USERNAME ===
const pseudoSelectors = [
'input[name*="pseudo" i]', 'input[id*="pseudo" i]', 'input[class*="pseudo" i]',
'input[name*="username" i]', 'input[id*="username" i]', 'input[class*="username" i]',
'input[placeholder*="pseudo" i]', 'input[placeholder*="username" i]',
'input[name="user"]', 'input[id="user"]'
];
trouverElements(pseudoSelectors).forEach(field => {
if (field.type !== 'password' && field.type !== 'email' && field.value === '') {
if (remplirChampForce(field, donnees.pseudo)) champsRemplis++;
}
});
// === PRÉNOM ===
const prenomSelectors = [
'input[name*="prenom" i]', 'input[id*="prenom" i]', 'input[class*="prenom" i]',
'input[name*="firstname" i]', 'input[id*="firstname" i]', 'input[class*="firstname" i]',
'input[name*="first_name" i]', 'input[id*="first_name" i]', 'input[class*="first_name" i]',
'input[name*="first-name" i]', 'input[id*="first-name" i]',
'input[placeholder*="prénom" i]', 'input[placeholder*="first name" i]'
];
trouverElements(prenomSelectors).forEach(field => {
if (field.value === '') {
if (remplirChampForce(field, donnees.prenom)) champsRemplis++;
}
});
// === NOM ===
const nomSelectors = [
'input[name*="nom" i]:not([name*="prenom" i])',
'input[id*="nom" i]:not([id*="prenom" i])',
'input[class*="nom" i]:not([class*="prenom" i])',
'input[name*="lastname" i]', 'input[id*="lastname" i]', 'input[class*="lastname" i]',
'input[name*="last_name" i]', 'input[id*="last_name" i]', 'input[class*="last_name" i]',
'input[name*="last-name" i]', 'input[id*="last-name" i]',
'input[placeholder*="nom" i]:not([placeholder*="prenom" i])',
'input[placeholder*="last name" i]'
];
trouverElements(nomSelectors).forEach(field => {
if (field.value === '') {
if (remplirChampForce(field, donnees.nom)) champsRemplis++;
}
});
// === EMAIL ===
const emailSelectors = [
'input[type="email"]',
'input[name*="email" i]', 'input[id*="email" i]', 'input[class*="email" i]',
'input[placeholder*="email" i]',
'input[name*="mail" i]', 'input[id*="mail" i]', 'input[class*="mail" i]'
];
trouverElements(emailSelectors).forEach(field => {
if (field.value === '') {
if (remplirChampForce(field, donnees.email)) champsRemplis++;
}
});
// === MOT DE PASSE ===
const passwordFields = document.querySelectorAll('input[type="password"]');
passwordFields.forEach(field => {
if (field.value === '') {
if (remplirChampForce(field, donnees.password)) champsRemplis++;
}
});
// === DATE DE NAISSANCE - VERSION ULTRA RENFORCÉE ===
debugLog('--- Recherche des champs de date ---');
// Champs de date simples (input type="date")
const dateFields = document.querySelectorAll('input[type="date"]');
dateFields.forEach(field => {
if (field.value === '') {
if (remplirChampForce(field, donnees.dateNaissance.iso)) champsRemplis++;
}
});
// Champs texte pour date
const dateTextSelectors = [
'input[name*="birth" i]:not([type="date"])',
'input[id*="birth" i]:not([type="date"])',
'input[name*="dob" i]', 'input[id*="dob" i]',
'input[name*="date" i][name*="naissance" i]',
'input[placeholder*="date" i][placeholder*="naissance" i]',
'input[placeholder*="birth" i]'
];
trouverElements(dateTextSelectors).forEach(field => {
if (field.type === 'text' && field.value === '') {
if (remplirChampForce(field, donnees.dateNaissance.complete)) champsRemplis++;
}
});
// === JOUR - RECHERCHE EXHAUSTIVE ===
const jourSelectors = [
// Inputs
'input[name*="jour" i]', 'input[id*="jour" i]', 'input[class*="jour" i]',
'input[name*="day" i]', 'input[id*="day" i]', 'input[class*="day" i]',
'input[name*="dd" i]', 'input[id*="dd" i]',
'input[placeholder*="jour" i]', 'input[placeholder*="day" i]',
'input[placeholder*="jj" i]', 'input[placeholder*="dd" i]',
// Selects
'select[name*="jour" i]', 'select[id*="jour" i]', 'select[class*="jour" i]',
'select[name*="day" i]', 'select[id*="day" i]', 'select[class*="day" i]',
'select[name*="dd" i]', 'select[id*="dd" i]',
'select[name*="birth" i][name*="day" i]',
'select[id*="birth" i][id*="day" i]'
];
debugLog(`Recherche JOUR avec valeur: ${donnees.dateNaissance.jour}`);
const joursFound = trouverElements(jourSelectors);
debugLog(`${joursFound.length} champ(s) JOUR trouvé(s)`);
joursFound.forEach(field => {
if (field.tagName === 'SELECT') {
if (selectionnerOptionForce(field, donnees.dateNaissance.jour)) champsRemplis++;
} else if (field.value === '') {
if (remplirChampForce(field, donnees.dateNaissance.jour.toString())) champsRemplis++;
}
});
// === MOIS - RECHERCHE EXHAUSTIVE ===
const moisSelectors = [
// Inputs
'input[name*="mois" i]', 'input[id*="mois" i]', 'input[class*="mois" i]',
'input[name*="month" i]', 'input[id*="month" i]', 'input[class*="month" i]',
'input[name*="mm" i]', 'input[id*="mm" i]',
'input[placeholder*="mois" i]', 'input[placeholder*="month" i]',
'input[placeholder*="mm" i]',
// Selects
'select[name*="mois" i]', 'select[id*="mois" i]', 'select[class*="mois" i]',
'select[name*="month" i]', 'select[id*="month" i]', 'select[class*="month" i]',
'select[name*="mm" i]', 'select[id*="mm" i]',
'select[name*="birth" i][name*="month" i]',
'select[id*="birth" i][id*="month" i]'
];
debugLog(`Recherche MOIS avec valeur: ${donnees.dateNaissance.mois}`);
const moisFound = trouverElements(moisSelectors);
debugLog(`${moisFound.length} champ(s) MOIS trouvé(s)`);
moisFound.forEach(field => {
if (field.tagName === 'SELECT') {
if (selectionnerOptionForce(field, donnees.dateNaissance.mois)) champsRemplis++;
} else if (field.value === '') {
if (remplirChampForce(field, donnees.dateNaissance.mois.toString())) champsRemplis++;
}
});
// === ANNÉE - RECHERCHE EXHAUSTIVE ===
const anneeSelectors = [
// Inputs
'input[name*="annee" i]', 'input[id*="annee" i]', 'input[class*="annee" i]',
'input[name*="year" i]', 'input[id*="year" i]', 'input[class*="year" i]',
'input[name*="yyyy" i]', 'input[id*="yyyy" i]', 'input[name*="yy" i]',
'input[placeholder*="année" i]', 'input[placeholder*="year" i]',
'input[placeholder*="yyyy" i]', 'input[placeholder*="aaaa" i]',
// Selects
'select[name*="annee" i]', 'select[id*="annee" i]', 'select[class*="annee" i]',
'select[name*="year" i]', 'select[id*="year" i]', 'select[class*="year" i]',
'select[name*="yyyy" i]', 'select[id*="yyyy" i]',
'select[name*="birth" i][name*="year" i]',
'select[id*="birth" i][id*="year" i]'
];
debugLog(`Recherche ANNÉE avec valeur: ${donnees.dateNaissance.annee}`);
const anneesFound = trouverElements(anneeSelectors);
debugLog(`${anneesFound.length} champ(s) ANNÉE trouvé(s)`);
anneesFound.forEach(field => {
if (field.tagName === 'SELECT') {
if (selectionnerOptionForce(field, donnees.dateNaissance.annee)) champsRemplis++;
} else if (field.value === '') {
if (remplirChampForce(field, donnees.dateNaissance.annee.toString())) champsRemplis++;
}
});
// === GENRE - RECHERCHE EXHAUSTIVE ===
debugLog(`--- Recherche du genre: ${donnees.genre} ---`);
// Radio buttons pour le genre
const genreRadioSelectors = [
'input[type="radio"][name*="gender" i]',
'input[type="radio"][id*="gender" i]',
'input[type="radio"][name*="genre" i]',
'input[type="radio"][id*="genre" i]',
'input[type="radio"][name*="sex" i]',
'input[type="radio"][id*="sex" i]',
'input[type="radio"][name*="sexe" i]',
'input[type="radio"][class*="gender" i]',
'input[type="radio"][class*="genre" i]'
];
const radiosFound = trouverElements(genreRadioSelectors);
debugLog(`${radiosFound.length} radio(s) genre trouvé(s)`);
radiosFound.forEach(radio => {
const value = (radio.value || '').toLowerCase();
const label = radio.labels && radio.labels[0] ? radio.labels[0].textContent.toLowerCase() : '';
const id = (radio.id || '').toLowerCase();
const name = (radio.name || '').toLowerCase();
debugLog(`Radio: value="${radio.value}", label="${label}", id="${id}"`);
let shouldCheck = false;
if (donnees.genre === 'masculin') {
if (value.includes('male') || value.includes('homme') || value.includes('masculin') ||
value === 'm' || value === 'h' || value === '1' ||
label.includes('homme') || label.includes('masculin') || label.includes('male') || label.includes('man') ||
id.includes('male') || id.includes('homme') || id.includes('masculin')) {
shouldCheck = true;
}
} else {
if (value.includes('female') || value.includes('femme') || value.includes('feminin') ||
value === 'f' || value === '2' ||
label.includes('femme') || label.includes('féminin') || label.includes('female') || label.includes('woman') ||
id.includes('female') || id.includes('femme') || id.includes('feminin')) {
shouldCheck = true;
}
}
if (shouldCheck) {
if (cocherOptionForce(radio)) champsRemplis++;
}
});
// Select pour le genre
const genreSelectSelectors = [
'select[name*="gender" i]', 'select[id*="gender" i]', 'select[class*="gender" i]',
'select[name*="genre" i]', 'select[id*="genre" i]', 'select[class*="genre" i]',
'select[name*="sex" i]', 'select[id*="sex" i]', 'select[class*="sex" i]',
'select[name*="sexe" i]', 'select[id*="sexe" i]'
];
const selectsGenre = trouverElements(genreSelectSelectors);
debugLog(`${selectsGenre.length} select(s) genre trouvé(s)`);
selectsGenre.forEach(select => {
let success = false;
if (donnees.genre === 'masculin') {
success = selectionnerOptionForce(select, 'male') ||
selectionnerOptionForce(select, 'homme') ||
selectionnerOptionForce(select, 'masculin') ||
selectionnerOptionForce(select, 'm') ||
selectionnerOptionForce(select, '1');
} else {
success = selectionnerOptionForce(select, 'female') ||
selectionnerOptionForce(select, 'femme') ||
selectionnerOptionForce(select, 'féminin') ||
selectionnerOptionForce(select, 'f') ||
selectionnerOptionForce(select, '2');
}
if (success) champsRemplis++;
});
debugLog('=== FIN DU REMPLISSAGE ===');
debugLog(`Total: ${champsRemplis} champ(s) rempli(s)`);
return champsRemplis;
}
// Création de l'interface moderne
function creerInterface() {
const container = document.createElement('div');
container.id = 'autofill-widget';
container.innerHTML = `
<div class="autofill-panel">
<div class="autofill-header">
<div class="autofill-title">
<span>Auto-Form v1.7</span>
</div>
<button class="autofill-toggle" id="toggle-panel">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="18 15 12 9 6 15"></polyline>
</svg>
</button>
</div>
<div class="autofill-content" id="autofill-content">
<div class="autofill-info">
<div class="info-item">
<span class="info-label">Champs:</span>
<span class="info-value" id="fields-count">0 détectés</span>
</div>
<div class="info-item">
<span class="info-label">Debug:</span>
<label class="toggle-switch">
<input type="checkbox" id="debug-toggle">
<span class="toggle-slider"></span>
</label>
</div>
</div>
<button class="autofill-btn" id="fill-btn">
<span>Remplir le formulaire</span>
</button>
<div class="autofill-shortcut">
Raccourci : <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd>
</div>
</div>
</div>
`;
const styles = document.createElement('style');
styles.textContent = `
#autofill-widget {
position: fixed;
top: 20px;
right: 20px;
z-index: 999999;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
.autofill-panel {
background: #2d3d3d;
border-radius: 32px;
overflow: hidden;
width: 340px;
backdrop-filter: blur(10px);
animation: slideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.autofill-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.autofill-title {
display: flex;
align-items: center;
gap: 10px;
color: white;
font-weight: 600;
font-size: 16px;
}
.autofill-title svg {
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.autofill-toggle {
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 80px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: white;
transition: all 0.3s ease;
}
.autofill-toggle:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.autofill-toggle:active {
transform: scale(0.8)
}
.autofill-toggle.collapsed svg {
transform: rotate(180deg);
}
.autofill-content {
padding: 20px;
max-height: 500px;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.autofill-content.collapsed {
max-height: 0;
padding: 0 20px;
}
.autofill-info {
background: rgba(255, 255, 255, 0.15);
border-radius: 28px;
padding: 16px;
margin-bottom: 16px;
backdrop-filter: blur(10px);
}
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
color: white;
font-size: 14px;
padding: 6px 0;
}
.info-label {
opacity: 0.9;
font-weight: 500;
}
.info-value {
font-weight: 600;
background: rgba(255, 255, 255, 0.2);
padding: 4px 12px;
border-radius: 32px;
font-size: 13px;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.3);
transition: .3s;
border-radius: 24px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .3s;
border-radius: 50%;
}
input:checked + .toggle-slider {
background-color: #10b981;
}
input:checked + .toggle-slider:before {
transform: translateX(20px);
}
.autofill-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 16px;
}
.feature-badge {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 10px 12px;
display: flex;
align-items: center;
gap: 8px;
color: white;
font-size: 12px;
font-weight: 500;
transition: all 0.3s ease;
}
.feature-badge:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
.feature-badge svg {
flex-shrink: 0;
opacity: 0.9;
}
.autofill-btn {
width: 100%;
background: white;
color: #667eea;
border: none;
border-radius: 32px;
padding: 14px 20px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.autofill-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
background: #f8f9ff;
}
.autofill-btn:active {
transform: scale(0.9);
}
.autofill-btn.success {
background: #10b981;
color: white;
}
.autofill-shortcut {
text-align: center;
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
margin-top: 12px;
}
.autofill-shortcut kbd {
background: rgba(255, 255, 255, 0.2);
padding: 3px 8px;
border-radius: 4px;
font-family: monospace;
font-size: 11px;
margin: 0 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.notification {
position: fixed;
left: -1000px;
top: -1000px;
background: white;
color: #1f2937;
padding: 16px 24px;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
gap: 12px;
font-weight: 500;
animation: slideInNotif 0.4s ease;
z-index: 999998;
}
@keyframes slideInNotif {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.notification.success {
border-left: 4px solid #10b981;
}
.notification svg {
flex-shrink: 0;
}
`;
document.head.appendChild(styles);
document.body.appendChild(container);
// Événements
const toggleBtn = document.getElementById('toggle-panel');
const content = document.getElementById('autofill-content');
const fillBtn = document.getElementById('fill-btn');
const debugToggle = document.getElementById('debug-toggle');
debugToggle.addEventListener('change', (e) => {
modeDebug = e.target.checked;
console.log(`[AutoFill] Mode debug: ${modeDebug ? 'ACTIVÉ' : 'DÉSACTIVÉ'}`);
afficherNotification(`Mode debug ${modeDebug ? 'activé' : 'désactivé'}`);
});
toggleBtn.addEventListener('click', () => {
content.classList.toggle('collapsed');
toggleBtn.classList.toggle('collapsed');
});
fillBtn.addEventListener('click', () => {
const count = remplirFormulaire();
fillBtn.classList.add('success');
fillBtn.innerHTML = `
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
<span>Rempli !</span>
`;
afficherNotification(`${count} champ(s) rempli(s) avec succès !`);
setTimeout(() => {
fillBtn.classList.remove('success');
fillBtn.innerHTML = `
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
<span>Remplir le formulaire</span>
`;
}, 2000);
});
// Détecter les champs disponibles
setInterval(() => {
const allFields = document.querySelectorAll('input, select');
document.getElementById('fields-count').textContent = `${allFields.length} détectés`;
}, 1000);
}
function afficherNotification(message) {
const notif = document.createElement('div');
notif.className = 'notification success';
notif.innerHTML = `
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2">
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
<span>${message}</span>
`;
document.body.appendChild(notif);
setTimeout(() => {
notif.style.animation = 'slideInNotif 0.4s ease reverse';
setTimeout(() => notif.remove(), 400);
}, 3000);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', creerInterface);
} else {
creerInterface();
}
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.shiftKey && e.key === 'F') {
e.preventDefault();
const count = remplirFormulaire();
afficherNotification(`${count} champ(s) rempli(s) !`);
}
});
})();