Trikaya Add Datas on Website Links (Extension Chrome)

📊 SEO Data on Website Links (ADOWL)

Extension Chrome professionnelle avancée qui permet d’afficher directement sur les pages web les données SEO issues des exports Semrush, GSC, etc… Un outil indispensable pour les professionnels du SEO qui souhaitent analyser rapidement les performances des liens sur n’importe quel site web avec une gestion multi-domaines et multi-fichiers.

✨ Fonctionnalités

🎯 Données SEO en temps réel

• Nombre de mots-clés sur lesquels chaque lien se positionne
• Trafic estimé total pour chaque URL
• Volume de recherche cumulé des mots-clés
• Position moyenne sur les SERPs
• Top 5 des mots-clés les plus générateurs de trafic

🌐 Gestion multi-domaines avancée

• Stockage par domaine : Organisation automatique des données par site web
• Multi-fichiers par domaine : Plusieurs exports par site (historique, différentes périodes)
• Fichiers actifs/inactifs : Basculement facile entre différents jeux de données
• Détection automatique du domaine à partir des URLs des exports
• Migration automatique des anciennes données vers le nouveau format

📊 Interface de gestion globale

• Page d’options dédiée : Interface complète de gestion de tous vos domaines
• Statistiques centralisées : Vue d’ensemble de tous vos sites et données
• Suivi du stockage : Monitoring de l’utilisation de l’espace Chrome avec barre de progression
• Export global : Sauvegarde complète de toutes vos données SEO
• Suppression en masse : Nettoyage rapide avec confirmations de sécurité

🔧 Formats supportés

• Semrush : Exports organiques (CSV, XLSX, XLS)
• Auto-détection du format de fichier
• Gestion des conflits : Détection des doublons de noms de fichiers

💅 Interface moderne et intuitive

• Design professionnel avec gradients et animations
• Cartes de statistiques visuelles et informatives
• Aperçu des données avant injection avec métadonnées enrichies
• Notifications contextuelles pour les domaines avec données disponibles
• Tooltips détaillés au survol des indicateurs
• Indicateurs visuels selon le niveau de trafic

🎨 Affichage intelligent

• Badges colorés selon le niveau de performance
• Tooltips riches avec détail des mots-clés
• Adaptation automatique au design du site
• Positionnement intelligent pour éviter les chevauchements
• Persistance avancée des données entre les sessions

🚀 Gestion de fichiers avancée

• Upload multi-formats avec drag & drop
• Historique des uploads avec dates et métadonnées
• Activation sélective : Choisissez quel fichier utiliser par domaine
• Injection ciblée : Injectez directement depuis la liste des fichiers
• Suppression granulaire : Supprimez des fichiers individuels ou des domaines entiers

🚀 Installation

Installation en mode développeur

1. Télécharger ou cloner ce repository :

git clone https://github.com/votre-username/seo-data-on-links.git

2. Ouvrir Chrome et aller à chrome://extensions/
3. Activer le mode développeur (toggle en haut à droite)
4. Cliquer sur « Charger l’extension non empaquetée »
5. Sélectionner le dossier du projet
6. L’extension apparaît maintenant dans votre barre d’outils Chrome ! 🎉

📖 Utilisation

1️⃣ Préparation des données

Export Semrush

1. Aller dans Recherche organique > Positions
2. Cliquer sur Exporter et choisir le format Excel ou CSV
3. S’assurer que les colonnes suivantes sont présentes :
   • Keyword
   • Position
   • Search Volume
   • URL
   • Traffic

2️⃣ Gestion des données par domaine

Ajout d’un nouveau fichier

1. Cliquer sur l’icône de l’extension dans Chrome
2. Glisser-déposer ou sélectionner votre fichier d’export
3. Le domaine sera détecté automatiquement à partir des URLs du fichier
4. Vérifier l’aperçu des données avec les statistiques détaillées
5. Le fichier est automatiquement sauvegardé par domaine

Gestion des fichiers existants

• Fichiers multiples : Chaque domaine peut avoir plusieurs fichiers (historiques, périodes différentes)
• Activation/Désactivation : Un seul fichier peut être actif par domaine à la fois
• Notification automatique : L’extension vous informe si des données sont disponibles pour le site visité
• Injection ciblée : Choisissez quel fichier injecter directement depuis la liste

3️⃣ Interface d’injection

Depuis le popup principal

1. Navigation automatique : Si vous visitez un domaine avec des données, elles s’affichent automatiquement
2. Aperçu complet : Statistiques détaillées avec nombre de mots-clés, URLs uniques, trafic total
3. Liste des fichiers : Tous les fichiers disponibles pour le domaine courant
4. Injection sélective : Bouton d’injection pour chaque fichier individuellement

Actions disponibles

• 🚀 Injecter : Applique les données du fichier sélectionné sur la page
• 🗑️ Supprimer : Supprime un fichier spécifique (avec confirmation)
• ⚙️ Gestion globale : Accès à l’interface de gestion complète

4️⃣ Visualisation sur les pages

Les indicateurs apparaissent automatiquement à côté des liens :

• 📊 X KW : Nombre de mots-clés
• 🚦 X : Trafic estimé
• 📈 X.X : Position moyenne

Survolez les indicateurs pour voir le détail complet avec le top 5 des mots-clés !

5️⃣ Gestion globale avancée

Accès à l’interface de gestion

• Depuis le popup : Cliquer sur « ⚙️ Gestion globale de tous les sites »
• URL directe : chrome-extension://[ID]/options.html

Fonctionnalités de la page de gestion

• 📊 Dashboard global : Statistiques de tous vos domaines (nombre de domaines, fichiers, mots-clés totaux, stockage utilisé)
• 🌐 Vue par domaine : Organisation claire de tous vos sites avec leurs fichiers
• 📁 Gestion des fichiers : Activation, suppression, consultation des métadonnées
• 💾 Monitoring stockage : Suivi de l’utilisation de l’espace Chrome avec barre de progression
• 📤 Export complet : Sauvegarde de toutes vos données au format JSON
• 🗑️ Suppression globale : Nettoyage complet avec confirmations de sécurité

Informations détaillées par fichier

• 📋 Type détecté : Semrush ou Inconnu
• 📅 Date d’upload : Horodatage précis de l’ajout
• 📊 Statistiques : Nombre de mots-clés, URLs uniques, trafic estimé
• 💾 Taille : Poids du fichier en KB/MB
• ✅ Statut actif : Indication visuelle du fichier actuellement utilisé

🎨 Types d’indicateurs

Indicateurs de trafic

• 🟢 Bordure verte : Trafic élevé (>100 visites/mois)
• 🟠 Bordure orange : Trafic moyen (20-100 visites/mois)
• 🔴 Bordure rouge : Trafic faible (<20 visites/mois)

Couleurs de position (dans les tooltips)

• 🟢 Vert : Positions 1-3 (très bon)
• 🟠 Orange : Positions 4-10 (bon)
• 🔴 Rouge : Positions 11+ (à améliorer)

📊 Exemple de tooltip

📈 Résumé SEO
Total mots-clés: 12
Trafic estimé: 156
Volume de recherche: 8,450
Position moyenne: 6.2

🔝 Top 5 mots-clés (par trafic):
achat velo electrique
Position: 4 | Volume: 2100 | Trafic: 45

velo electrique pas cher  
Position: 7 | Volume: 1800 | Trafic: 32
...

⚙️ Architecture technique

Structure des fichiers

├── manifest.json          # Configuration de l'extension (Manifest V3)
├── popup.html             # Interface principale du popup
├── popup.css              # Styles du popup  
├── popup.js               # Logique principale et gestion multi-domaines
├── options.html           # Page de gestion globale
├── options.js             # Interface de gestion avancée
├── tabFunctions.js        # Injection et affichage sur les pages
├── inject.css             # Styles injectés sur les sites
├── background.js          # Service worker
├── papaparse.min.js       # Parser CSV avancé
├── xlsx.full.min.js       # Parser Excel complet
├── icon.png               # Icône de l'extension
└── README.md              # Cette documentation

Permissions utilisées

• storage : Sauvegarde des données entre sessions
• unlimitedStorage : Stockage étendu pour gros volumes de données
• activeTab : Injection sur la page active
• scripting : Injection de scripts et CSS
• tabs : Gestion et création d’onglets
• host_permissions: ["*://*/*"] : Accès à tous les sites web

Architecture des données

Structure de stockage Chrome

{
  adowl_domain_data: {
    "exemple.com": {
      files: [
        {
          id: "file_1634567890123",
          name: "export-semrush-octobre.xlsx",
          uploadDate: "2023-10-18T14:30:00.000Z",
          type: "Semrush",
          isActive: true,
          data: [...], // Données CSV/Excel parsées
          size: 1234567,
          lastModified: 1634567890123
        }
      ],
      lastAccess: "2023-10-18T14:30:00.000Z"
    }
  }
}

Gestion des fichiers actifs

• Un fichier actif par domaine : Seul un fichier peut être actif à la fois par domaine
• Activation automatique : L’injection d’un fichier l’active automatiquement
• Persistance : Le statut actif est conservé entre les sessions
• Basculement facile : Interface pour changer de fichier actif depuis le popup ou la page de gestion

Migration automatique

• Compatibilité ascendante : Migration automatique des anciennes données
• Détection de domaine : Extraction du domaine depuis les anciennes structures
• Nettoyage automatique : Suppression des anciennes clés de stockage après migration

🔧 Développement

Prérequis

• Google Chrome 88+ (Manifest V3 compatible)
• Fichiers d’export Semrush
• Connaissance des APIs Chrome Extensions v3

Architecture de développement

L’extension utilise Manifest V3 avec les dernières APIs Chrome :

• Service Worker au lieu des background pages
• chrome.scripting pour l’injection dynamique
• chrome.storage.local avec gestion étendue
• chrome.tabs pour la gestion multi-onglets

Modifier l’extension

1. Modifier les fichiers source
2. Aller à chrome://extensions/
3. Cliquer sur le bouton « 🔄 Actualiser » de l’extension
4. Tester les modifications sur plusieurs domaines

Structure du code détaillée

popup.js (Interface principale)

• Gestion multi-fichiers : Upload, organisation par domaine
• Parsing avancé : CSV/Excel avec Papa Parse et XLSX.js
• Détection automatique : Domaine, format, colonnes
• Interface utilisateur : Preview, statistiques, gestion des conflits
• Persistance intelligente : Stockage par domaine avec métadonnées
• Migration des données : Compatibilité avec les anciennes versions

options.js (Gestion globale)

• Dashboard complet : Statistiques globales multi-domaines
• Gestion avancée : CRUD sur fichiers et domaines
• Monitoring stockage : Suivi de l’utilisation Chrome
• Export/Import : Sauvegarde complète des données
• Interface moderne : Cards, animations, responsive design

tabFunctions.js (Injection et affichage)

• Analyse des données : Regroupement par URL, calculs de statistiques
• Correspondance URL/données : Matching intelligent avec normalisation
• Injection des indicateurs : Badges colorés avec positioning intelligent
• Génération des tooltips : Affichage riche avec top mots-clés
• Gestion des collisions : Évitement des chevauchements

inject.css (Styles dynamiques)

• Styles des indicateurs : Badges modernes avec couleurs sémantiques
• Animations fluides : Transitions et micro-interactions
• Responsive design : Adaptation mobile et desktop
• Intégration harmonieuse : Styles non-intrusifs pour tous sites

background.js (Service Worker)

• Gestion des événements : Installation, mises à jour
• Persistance : Maintien des données entre les sessions
• Communication : Messages entre popup et content scripts

APIs utilisées

• chrome.storage.local : Stockage persistant avec quotas étendus
• chrome.scripting : Injection dynamique de CSS et JS
• chrome.tabs : Requêtes et création d’onglets
• FileReader API : Lecture de fichiers locaux
• XLSX.js : Parsing des fichiers Excel
• Papa Parse : Parsing CSV avec options avancées

Tests et débogage

• Console DevTools : Debugging du popup et options
• Inspect popup : Clic droit sur l’icône → Inspecter la fenêtre contextuelle
• Background Script : chrome://extensions → Détails → Inspect views service worker
• Content Script : F12 sur la page web → Console

🐛 Dépannage

L’extension ne charge pas

• Mode développeur : Vérifier que le mode développeur est activé dans chrome://extensions/
• Manifest V3 : S’assurer de la compatibilité Chrome 88+
• Console erreurs : Contrôler la console pour d’éventuelles erreurs de permissions
• Fichiers requis : S’assurer que tous les fichiers sont présents (notamment les parseurs)
• Service Worker : Vérifier le statut du service worker dans chrome://extensions/

Aucune donnée n’apparaît sur les pages

• Domaine détecté : Vérifier que le domaine a bien été détecté dans le popup
• Fichier actif : S’assurer qu’un fichier est marqué comme « actif » pour le domaine
• Format d’export : Contrôler la détection automatique du format Semrush
• Colonnes requises : Vérifier la présence des colonnes URL, Keyword, Traffic, Position
• Console développeur : Consulter la console (F12) pour les erreurs d’injection
• URLs matchées : S’assurer que les URLs du site correspondent à celles du fichier

Problèmes de gestion des fichiers

• Conflit de noms : L’extension empêche les doublons de noms par domaine
• Fichier actif : Un seul fichier peut être actif par domaine à la fois
• Migration : Les anciennes données sont automatiquement migrées au nouveau format
• Stockage : Vérifier l’utilisation du stockage dans la page de gestion globale
• Permissions : S’assurer que les permissions unlimitedStorage sont accordées

Données incorrectes ou partielles

• Auto-détection : Contrôler la détection automatique du format dans l’aperçu
• Encodage fichier : Vérifier l’encodage CSV (UTF-8 recommandé, délimiteur point-virgule)
• Export récent : Tester avec un export récent de Semrush
• Colonnes mappées : Vérifier le mapping des colonnes dans l’aperçu du popup
• URLs complètes : S’assurer que les URLs dans le fichier sont complètes (avec protocole)

Problèmes de performance

• Gros fichiers : Les fichiers très volumineux peuvent ralentir l’interface
• Stockage Chrome : Surveiller l’utilisation via la page de gestion globale
• Trop de domaines : Nettoyer périodiquement les anciens domaines non utilisés
• Cache navigateur : Vider le cache Chrome si nécessaire

Interface de gestion globale

• Page ne se charge pas : Vérifier l’URL chrome-extension://[ID]/options.html
• Statistiques incorrectes : Rafraîchir la page ou vider/recharger les données
• Export/Import : S’assurer des permissions de téléchargement pour les exports
• Suppression globale : Utiliser avec précaution, action irréversible

Messages d’erreur courants

• « Format non supporté » : Utiliser uniquement CSV, XLS, XLSX
• « Impossible de détecter le domaine » : Vérifier que le fichier contient des URLs valides
• « Fichier existe déjà » : Renommer le fichier ou supprimer l’ancien
• « Erreur lors de l’injection » : Recharger la page et réessayer l’injection

🤝 Contribution

Les contributions sont les bienvenues ! N’hésitez pas à :

1. Fork le projet
2. Créer une branche pour votre fonctionnalité
3. Commiter vos changements
4. Pousser vers la branche
5. Ouvrir une Pull Request

📝 License

Ce projet est sous licence MIT – voir le fichier LICENSE pour plus de détails.

🙏 Remerciements

• Papa Parse pour le parsing CSV
• XLSX.js pour la lecture des fichiers Excel
• Semrush pour leurs excellents outils SEO

Politique de confidentialité