Comment j'ai automatisé la prospection automobile avec une extension Chrome (5 min → 15 sec)

Un commercial passait 5 minutes par véhicule à naviguer entre deux sites pour analyser les opportunités d’achat. Aujourd’hui, il fait la même chose en 15 secondes. Voici comment j’ai développé l’extension Chrome qui a transformé sa prospection.

Le problème : une UX qui tue la productivité

Mon client Carooh, mandataire automobile en Suisse, avait un process de prospection chronophage :

1. Trouver un véhicule sur un site d’annonces (Site A)
2. Copier les caractéristiques : marque, modèle, année, kilométrage…
3. Ouvrir un autre site (Site B) pour analyser les prix du marché
4. Remplir manuellement une dizaine de filtres
5. Analyser les résultats et calculer si l’affaire est intéressante
6. Recommencer pour le véhicule suivant

Le problème ? L’UX des sites en question n’était pas pensée pour ce workflow. Navigation laborieuse, filtres mal placés, pas de raccourcis. Résultat : 5 minutes par véhicule, avec parfois des analyses qui ne mènent à rien.

Multiplié par des dizaines de véhicules par jour, ça représentait des heures perdues en clics répétitifs.

Pourquoi pas un robot de scraping classique ?

Ma première idée : un script qui automatise tout côté serveur. Problème : Cloudflare.

Les deux sites utilisent une protection anti-bot qui bloque les requêtes automatisées. Captchas, vérification JavaScript, fingerprinting… Les solutions de contournement existent mais sont complexes, coûteuses, et potentiellement fragiles.

J’ai donc opté pour une autre approche : une extension Chrome.

L’avantage ? L’extension s’exécute dans le navigateur de l’utilisateur, avec sa session authentifiée, ses cookies, son comportement “humain”. Cloudflare ne voit qu’un utilisateur normal qui navigue.

La solution : lire le code source

Plutôt que de simuler des clics ou d’intercepter des requêtes réseau, j’ai choisi la méthode la plus simple : lire directement le code source de la page.

Les données du véhicule (prix, caractéristiques, kilométrage) sont présentes dans le HTML. Pas besoin d’API, pas besoin de reverse-engineering complexe. Un simple parsing du DOM suffit.

// Exemple simplifié : extraction des données véhicule
const extractVehicleData = () => {
  return {
    brand: document.querySelector('[data-brand]')?.textContent,
    model: document.querySelector('[data-model]')?.textContent,
    year: document.querySelector('[data-year]')?.textContent,
    mileage: document.querySelector('[data-km]')?.textContent,
    price: document.querySelector('[data-price]')?.textContent,
  };
};

Une fois les données extraites, l’extension les stocke temporairement et les réutilise pour pré-remplir les filtres sur le Site B.

Les fonctionnalités développées

1. Extraction automatique des données

Un clic sur l’icône de l’extension capture toutes les informations du véhicule affiché. Plus besoin de copier-coller manuellement.

2. Pré-remplissage des filtres

Quand l’utilisateur arrive sur le Site B, l’extension détecte la page et pré-remplit automatiquement :

• Marque et modèle
• Fourchette d’année
• Fourchette de kilométrage
• Type de carburant
• Boîte de vitesse

Ce qui prenait 2 minutes de clics se fait en 0 seconde.

3. Calcul du prix moyen

L’extension analyse les résultats affichés et calcule :

• Le prix moyen des véhicules similaires
• Le prix médian (plus fiable en cas de valeurs extrêmes)
• Un indice de corrélation pour évaluer si l’affaire est intéressante

// Calcul simplifié de l'indice
const calculateIndex = (targetPrice, marketAverage) => {
  const ratio = targetPrice / marketAverage;
  if (ratio < 0.85) return { score: 'Excellente affaire', color: 'green' };
  if (ratio < 0.95) return { score: 'Bonne affaire', color: 'blue' };
  if (ratio < 1.05) return { score: 'Prix marché', color: 'gray' };
  return { score: 'Au-dessus du marché', color: 'red' };
};

4. Interface intégrée

Une petite interface Vue.js s’affiche en overlay sur la page, avec :

• Les données extraites
• Le prix moyen calculé
• L’indice de corrélation
• Un bouton pour lancer l’analyse sur le Site B

Stack technique

• JavaScript pour le content script (injection dans les pages)
• Vue.js pour l’interface popup et l’overlay
• Chrome Extension API (Manifest V3) pour la communication entre composants
• Local Storage pour persister les données entre les pages

L’architecture est simple :

Content Script (Site A)
    ↓ extrait les données
Background Service Worker
    ↓ stocke temporairement
Content Script (Site B)
    ↓ pré-remplit les filtres
Popup Vue.js
    ↓ affiche les résultats

Les défis rencontrés

Manifest V3

Google a migré les extensions vers Manifest V3, qui change pas mal de choses :

• Plus de background.js persistant, remplacé par des Service Workers
• Restrictions sur l’exécution de code distant
• Nouvelles permissions plus granulaires

J’ai dû adapter l’architecture pour que les données survivent entre les pages sans background persistant.

Variabilité du DOM

Les sites web évoluent. Un sélecteur CSS qui fonctionne aujourd’hui peut casser demain si le site change sa structure HTML.

J’ai implémenté plusieurs sélecteurs fallback et une détection d’erreur qui alerte l’utilisateur si l’extraction échoue.

Synchronisation entre onglets

L’utilisateur ouvre le Site A dans un onglet, le Site B dans un autre. Il fallait que les données circulent correctement entre les deux.

J’ai utilisé l’API chrome.storage.local qui synchronise automatiquement les données entre tous les contextes de l’extension.

Les résultats

Après déploiement :

• 20x plus rapide : de 5 minutes à 15 secondes par véhicule
• +300% de véhicules analysés par jour
• 0€/mois de coût (vs solutions SaaS de scraping)
• 0 blocage Cloudflare depuis le lancement

Le commercial peut maintenant analyser un véhicule en 3 clics :

1. Clic sur l’extension (extraction)
2. Clic pour ouvrir le Site B
3. Clic pour lancer la recherche (filtres déjà remplis)

Ce que j’ai appris

L’extension Chrome est sous-estimée

On pense souvent “API” ou “scraping serveur” pour automatiser des tâches web. Mais une extension Chrome peut être la solution idéale quand :

• Les sites ont une protection anti-bot
• Le workflow implique plusieurs sites
• L’utilisateur doit garder le contrôle (pas d’automatisation aveugle)

La simplicité paie

Lire le code source plutôt que reverse-engineer une API. Pré-remplir des champs plutôt que simuler des clics. Les solutions les plus simples sont souvent les plus robustes.

Le ROI de l’automatisation

15 secondes vs 5 minutes, ça paraît anecdotique. Mais sur 50 véhicules par jour, c’est 4 heures économisées. Par semaine, c’est une journée entière. Le développement de l’extension s’est rentabilisé en quelques jours.

Conclusion

L’automatisation n’est pas réservée aux gros projets avec des budgets conséquents. Une extension Chrome développée en 3 semaines peut transformer la productivité d’une équipe commerciale.

Si vous avez des workflows répétitifs entre plusieurs sites web, il y a probablement une solution simple à développer. Discutons-en.

Découvrir mes prestations d’automatisation à Bordeaux →

---

Vous avez un process manuel à automatiser ? Contactez-moi pour un premier échange gratuit.