merge main v2

barre_latérale/content.js

 // Écouteur d'événement qui se déclenche lorsqu'un utilisateur relâche le bouton de la souris
 document.addEventListener('mouseup', () => {
   
-    // Récupère le texte sélectionné par l'utilisateur et supprime les espaces inutiles
-    const selection = window.getSelection().toString().trim();
-  
-    // Vérifie si une sélection de texte a bien été effectuée
-    if (selection) {
-      // Affiche dans la console le mot ou texte sélectionné pour le débogage
-      console.log("Mot sélectionné :", selection);
-  
-      // Envoie un message au script de la barre latérale pour lui transmettre le mot sélectionné
-      browser.runtime.sendMessage({ 
-        action: "mot_selectionne", // Action identifiant le type de message
-        mot: window.getSelection().toString().trim()              // Le texte sélectionné
-      });
-    }
-  });
-  
\ No newline at end of file
+  // Récupère le texte sélectionné par l'utilisateur et supprime les espaces inutiles
+  const selection = window.getSelection().toString().trim();
+
+  // Vérifie si une sélection de texte a bien été effectuée
+  if (selection) {
+    // Affiche dans la console le mot ou texte sélectionné pour le débogage
+    console.log("Mot sélectionné :", selection);
+
+    // Envoie un message au script de la barre latérale pour lui transmettre le mot sélectionné
+    browser.runtime.sendMessage({ 
+      action: "mot_selectionne", // Action identifiant le type de message
+      mot: window.getSelection().toString().trim()              // Le texte sélectionné
+    });
+  }
+});

barre_latérale/sidebar.js

 console.log("✅ sidebar.js chargé avec succès !");
 
-let authToken = '';
+// let authToken = '';
 
+//Variable globale qui contient le token
+let authToken = null;
+
+// Fonction pour charger le token
+async function loadAuthToken() {
+  try {
+    const result = await browser.storage.local.get("accessToken");
+    authToken = result.accessToken;
+    console.log("🔑 Token chargé au démarrage :", authToken);
+  } catch (error) {
+    console.error("❌ Erreur lors de la récupération du token :", error);
+  }
+}
 // Gestionnaire global des erreurs
 window.addEventListener('error', (e) => {
   console.error("❗️ Erreur globale détectée :", e.message, "dans", e.filename, ":", e.lineno);
@@ -60,12 +73,15 @@ function displayLexicons(lexicons) {
   lexiquesContainer.innerHTML = '';
 
   if (lexicons.length === 0) {
+    console.log("⚠️ Aucun lexique à afficher.");
     lexiquesContainer.textContent = 'Aucun lexique disponible.';
     return;
   }
 
-  // Ajouter les lexiques à la liste
-  lexicons.forEach(lexique => {
+  console.log("🖼️ Affichage des lexiques...");
+  lexicons.forEach(({ lexiconName, lexiconId, active }) => {
+    console.log(`➡️ Affichage du lexique : ${lexiconName} (ID: ${lexiconId})`);
+
     const lexiqueDiv = document.createElement('div');
     lexiqueDiv.className = 'lexique-item';
 
@@ -75,26 +91,30 @@ function displayLexicons(lexicons) {
 
     const labelSpan = document.createElement('span');
     labelSpan.className = 'lexique-label';
-    labelSpan.textContent = lexique.name;
+    labelSpan.textContent = lexiconName;
 
     const checkbox = document.createElement('input');
     checkbox.type = 'checkbox';
     checkbox.className = 'lexique-checkbox';
-    checkbox.checked = lexique.active || false;
+    checkbox.checked = active;
 
     checkbox.addEventListener('change', () => {
-      console.log(`🔄 Changement de surlignage pour ${lexique.name}: ${checkbox.checked ? 'activé' : 'désactivé'}`);
+      console.log(
+        `🔄 Changement de surlignage pour ${lexiconName} (ID: ${lexiconId}): ${
+          checkbox.checked ? 'activé' : 'désactivé'
+        }`
+      );
       // Implémentez ici la logique pour activer/désactiver le surlignage
     });
 
     lexiqueDiv.appendChild(iconDiv);
     lexiqueDiv.appendChild(labelSpan);
     lexiqueDiv.appendChild(checkbox);
-
     lexiquesContainer.appendChild(lexiqueDiv);
   });
 }
 
+
 // Gestion de l'affichage du message d'information
 function toggleHighlightMessage(isLoggedIn) {
   const highlightNote = document.getElementById('highlight-note');
@@ -103,55 +123,56 @@ function toggleHighlightMessage(isLoggedIn) {
   }
 }
 
-// Récupération des lexiques avec diagnostics détaillés
+// Récupération des lexiques de l'utilisateur après la connexion de l'utilisateur
 async function fetchLexicons() {
-  console.log("🚀 La fonction fetchLexicons() est appelée.");
+  try {
+    console.log("🔄 Début de la récupération des lexiques...");
+    console.log("🔑 Token utilisé :", authToken);
+
+    if (!authToken) {
+      console.warn("⚠️ Aucun token disponible. Veuillez vous connecter.");
+      const lexiquesContainer = document.getElementById("lexiques");
+      lexiquesContainer.textContent = "Veuillez vous connecter pour voir vos lexiques.";
+      return;
+    }
 
-  const lexiquesContainer = document.getElementById('lexiques');
-  const authSection = document.getElementById('auth-section');
-  lexiquesContainer.innerHTML = '';
+    // Appel de l'API
+    const lexicons = await getLexicons(authToken, 52, 'fr');
+    console.log("📚 Réponse brute de l'API :", lexicons);
 
-  if (!authToken) {
-    console.warn('⚠️ Token non disponible ou vide.');
-    lexiquesContainer.textContent = 'Lexiques non disponibles. Veuillez vous connecter.';
-    if (authSection) {
-      authSection.style.display = 'block';
+    if (!Array.isArray(lexicons) || lexicons.length === 0) {
+      console.warn("⚠️ Aucun lexique trouvé.");
+      const lexiquesContainer = document.getElementById("lexiques");
+      lexiquesContainer.textContent = "Aucun lexique disponible.";
+      return;
     }
-    return;
-  }
 
-  try {
-    console.log(`📡 Tentative d'envoi de la requête GET avec le token : Bearer ${authToken}`);
-    const response = await fetch('https://babalex.lezinter.net/api/user/lexicons', {
-      method: 'GET',
-      headers: {
-        'Authorization': `Bearer ${authToken}`,
-        'Content-Type': 'application/json'
-      }
+    // Transformation des données
+    const results = lexicons.map((lexicon) => {
+      console.log("📋 Transformation du lexique :", lexicon);
+      return {
+        lexiconName: lexicon.category === 'User'
+          ? `Lexique personnel (${lexicon.user?.pseudo || 'Inconnu'})`
+          : `Lexique de groupe (${lexicon.group?.name || 'Inconnu'})`,
+        lexiconId: lexicon.id,
+        active: lexicon.active || false,
+      };
     });
 
-    console.log(`📊 Statut de la réponse API : ${response.status}`);
-
-    if (!response.ok) {
-      const errorBody = await response.text();
-      throw new Error(`❌ Erreur API Babalex : ${response.status} - ${errorBody}`);
-    }
+    console.log("Appel de displayLexicons avec :", results);
 
-    const lexicons = await response.json();
-    console.log('📚 Lexiques récupérés :', lexicons);
-    displayLexicons(lexicons);
-    if (authSection) {
-      authSection.style.display = 'block'; // Toujours afficher la section auth
-    }
+    // Affichage des lexiques
+    displayLexicons(results);
   } catch (error) {
-    console.error('❗️ Erreur pendant la récupération des lexiques :', error);
-    lexiquesContainer.textContent = 'Impossible de charger les lexiques. Vérifiez votre connexion ou le token.';
-    if (authSection) {
-      authSection.style.display = 'block';
-    }
+    console.error("❌ Erreur lors du chargement des lexiques :", error.message);
+    console.error("Détails de l'erreur :", error);
+    const lexiquesContainer = document.getElementById("lexiques");
+    lexiquesContainer.textContent = "Erreur lors du chargement des lexiques.";
   }
 }
 
+
+
 function toggleElementsVisibility(isLoggedIn) {
   const addToLexiques = document.getElementById('add-to-lexiques');
   const possibleDefinitions = document.getElementById('possible-definitions');
@@ -196,3 +217,34 @@ function updateAuthButton(isLoggedIn) {
   }
 }
 
+
+
+//----------------ENVOI A LA BARRE LATERALE----------------------------------------//
+browser.runtime.onMessage.addListener((message) => {
+  if (message.action === "mot_et_lexiques") {
+    const { mot, lexiques } = message;
+    console.log("Mot reçu :", mot);
+    console.log("Liste des lexiques :", lexiques);
+
+    // Mettre à jour l'affichage du mot sélectionné
+    document.getElementById('motSelectionne').textContent = mot;
+
+    // Mettre à jour la liste des lexiques dans la barre latérale
+    const container = document.getElementById('lexiques');
+    container.innerHTML = ''; //On supprime le contenu existant
+
+    lexiques.forEach(({ lexiconName, lexiconId, isPresent }) => {
+      const div = document.createElement('div');
+      div.className = 'lexique-item';
+
+      const status = isPresent ? 'Présent' : 'Non présent';
+
+      div.innerHTML = `
+        <div>${lexiconName} (ID: ${lexiconId})</div>
+        <div>${status}</div>
+      `;
+
+      container.appendChild(div);
+    });
+  }
+});

menu_extension/background.js

+// === 1. Variables globales ===
+let isExtensionActive = true;
+let areStatsActive = false;
+
+console.log("🚀 ff2BaLex est chargé.");
+
+// === 2. Installation de l'extension ===
+browser.runtime.onInstalled.addListener(() => {
+  console.log("🔔 Extension ff2BaLex installée.");
+});
+
+browser.runtime.onStartup.addListener(() => {
+  console.log("🔄 Extension démarrée.");
+});
+
+// === 3. Suivi des changements de paramètres ===
+browser.storage.onChanged.addListener((changes) => {
+  if (changes.extensionActive) {
+    isExtensionActive = changes.extensionActive.newValue;
+    console.log("✅ Extension activée :", isExtensionActive);
+  }
+  if (changes.statsActive) {
+    areStatsActive = changes.statsActive.newValue;
+    console.log("📊 Statistiques activées :", areStatsActive);
+  }
+});
+
+// === 4. Gestion des connexions/déconnexions ===
+browser.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
+  console.log("📩 Message reçu dans background.js :", message);
+
+  if (message.action === "toggleAuth") {
+    const isConnected = await isUserConnected();
+    console.log("🔍 État actuel de connexion :", isConnected ? "Connecté" : "Déconnecté");
+    if (isConnected) {
+      await disconnectFromLexicalDB();
+    } else {
+      openLoginPage();
+    }
+  } else if (message.action === "checkAuthStatus") {
+    const isConnected = await isUserConnected();
+    sendResponse(isConnected);
+  } else if (message.action === "authStatusChanged") {
+    console.log("🔄 Mise à jour de l'état d'authentification :", message.isLoggedIn);
+    browser.runtime.sendMessage({ action: "updateUI", isLoggedIn: message.isLoggedIn });
+  } else if (message.action === "refreshSidebar") {
+    refreshSidebar();
+  } else if (message.action === "refreshMenu") {
+    refreshExtensionMenu();
+  } else if (message.action === "showNotification") {
+    showNotification(message.title, message.message, message.iconUrl);
+  }
+  return true; 
+});
+
+function openLoginPage() {
+  const authUrl = "https://prisms.lezinter.net/fr/login";
+  console.log("🔗 Ouverture de la page de connexion :", authUrl);
+  browser.tabs.create({ url: authUrl });
+  browser.runtime.sendMessage({ action: "authStatusChanged", isLoggedIn: false });
+}
+
+// === 5. Afficher le popup après redirection vers Prisms ===
+browser.webNavigation.onCompleted.addListener(async (details) => {
+  const url = new URL(details.url);
+
+  if (url.hostname === "prisms.lezinter.net" && url.pathname === "/fr/login") {
+    console.log("📘 Injection du popup d'instruction sur Prisms.");
+    showInstructionPopup(details);
+  }
+
+  if (url.hostname === "prisms.lezinter.net" && url.pathname === "/fr/headquarters/balex") {
+    console.log("🟢 L'utilisateur est sur la page /balex. Tentative de récupération du token.");
+    try {
+      await new Promise(resolve => setTimeout(resolve, 3000));
+      await browser.tabs.executeScript(details.tabId, {
+        code: `
+          console.log("🔍 Recherche du token...");
+          const tokenElement = document.getElementById("accesToken");
+          if (tokenElement) {
+            const token = tokenElement.innerText.trim();
+            console.log("🔐 Token détecté :", token);
+            browser.runtime.sendMessage({ action: "saveToken", token });
+          } else {
+            console.error("❌ Token introuvable.");
+          }
+        `
+      });
+    } catch (error) {
+      console.error("❌ Erreur lors de la récupération du token :", error);
+    }
+  }
+}, { url: [{ hostContains: "prisms.lezinter.net" }] });
+
+
+// === 6. Redirection immédiate vers /balex ===
+browser.webRequest.onBeforeRequest.addListener(
+  function(details) {
+    if (details.url === "https://prisms.lezinter.net/fr/headquarters/") {
+      console.log("🚀 Redirection automatique vers /balex.");
+      return { redirectUrl: "https://prisms.lezinter.net/fr/headquarters/balex" };
+    }
+  },
+  { urls: ["https://prisms.lezinter.net/fr/headquarters/*"] },
+  ["blocking"]
+);
+
+// // === 7. Injection du popup dans la page ===
+function showInstructionPopup(details) {
+  console.log("📘 Injection du message d'instruction centré sur la page Prisms.");
+
+  browser.tabs.executeScript(details.tabId, {
+    code: `
+      if (!document.getElementById("balex-instruction-popup")) {
+        const popup = document.createElement("div");
+        popup.id = "balex-instruction-popup";
+        popup.style.position = "fixed";
+        popup.style.top = "50%";
+        popup.style.left = "50%";
+        popup.style.transform = "translate(-50%, -50%)";
+        popup.style.backgroundColor = "#a08e9f";
+        popup.style.color = "#323046";
+        popup.style.padding = "20px";
+        popup.style.borderRadius = "10px";
+        popup.style.boxShadow = "0 2px 10px rgba(0, 0, 0, 0.3)";
+        popup.style.zIndex = "10000";
+        popup.style.fontFamily = "Helvetica, sans-serif";
+        popup.style.fontSize = "14px";
+        popup.style.width = "300px";
+        popup.style.textAlign = "center";
+
+        popup.innerHTML = \`
+          <h5 style="color: #fff; font-weight: bold; margin-top: 0;">🔑 Connexion à l'extension</h5>
+          <p style="margin: 15px 0;">Après avoir renseigné vos identifiants, cliquez sur <strong>"Se connecter avec BaLex"</strong>.</p>
+          <button id="close-popup-btn" style="
+            width: 100%;
+            margin-top: 15px;
+            padding: 10px;
+            border: none;
+            background-color: #8d5c70;
+            color: #fbfcfc;
+            font-weight: bold;
+            cursor: pointer;
+            border-radius: 5px;
+          ">Fermer</button>
+        \`;
+
+        document.body.appendChild(popup);
+
+        document.getElementById("close-popup-btn").onclick = () => {
+          popup.remove();
+        };
+      }
+    `
+  });
+}
+
+
+
+// === 8. Sauvegarde du token ===
+browser.runtime.onMessage.addListener(async (message) => {
+  if (message.action === "saveToken" && message.token) {
+    console.log("✅ Sauvegarde du token :", message.token);
+    await browser.storage.local.set({ accessToken: message.token });
+    showNotification('Connexion réussie', 'La barre latérale va se recharger.', 'icons/success.png');
+    refreshSidebar();
+    refreshExtensionMenu();
+    browser.runtime.sendMessage({ action: "updateUI", isLoggedIn: true });
+  }
+});
+
+async function disconnectFromLexicalDB() {
+  console.log("🔓 Déconnexion en cours...");
+  await browser.storage.local.remove("accessToken");
+  console.log("🔓 Token supprimé avec succès.");
+  showNotification('Déconnexion réussie', 'La barre latérale va se recharger.', 'icons/logout.png');
+  refreshSidebar();
+  refreshExtensionMenu();
+  browser.runtime.sendMessage({ action: "updateUI", isLoggedIn: false });
+}
+
+async function isUserConnected() {
+  const result = await browser.storage.local.get("accessToken");
+  console.log("🔑 État actuel du token :", result.accessToken);
+  return result.accessToken !== undefined;
+}
+
+function refreshSidebar() {
+  console.log("🔄 Rafraîchissement de la barre latérale.");
+  browser.runtime.sendMessage({ action: "refreshSidebar" });
+}
+
+function refreshExtensionMenu() {
+  console.log("🔄 Rafraîchissement du menu de l'extension.");
+  browser.runtime.sendMessage({ action: "refreshMenu" });
+}
+
+function showNotification(title, message, iconUrl) {
+  console.log(`🔔 Notification : ${title} - ${message}`);
+  if (browser.notifications) {
+    browser.notifications.create({
+      type: 'basic',
+      iconUrl: iconUrl || "icons/info.png",
+      title: title,
+      message: message
+    });
+  } else {
+    console.warn("⚠️ Notifications non supportées.");
+  }
+}
+
+setInterval(() => {
+  console.warn("⚠️ Aucune API de rafraîchissement disponible.");
+}, 15 * 60 * 1000);

menu_extension/options.html

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Paramètres ff2BaLex</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      padding: 20px;
+      background-color: #323046;
+      color: white;
+    }
+    button {
+      width: 100%;
+      padding: 10px;
+      margin-bottom: 10px;
+      font-size: 15px;
+      color: #94608a;
+      font-weight: bold;
+      border: none;
+      cursor: pointer;
+    }
+    button:hover {
+      background-color: #94608a;
+      color: white;
+    }
+  </style>
+</head>
+<body>
+  <h3>Paramètres BaLex</h3>
+  <button id="connectBtn">Se connecter</button>
+  <button id="toggleExtensionBtn">Activer/Désactiver l'extension</button>
+  <button id="toggleStatsBtn">Activer/Désactiver les statistiques</button>
+  <script src="options.js"></script>
+</body>
+</html>

menu_extension/options.js

+document.getElementById('connectBtn').addEventListener('click', () => {
+  browser.runtime.sendMessage({ action: "openLoginPage" });
+});
+
+async function disconnectFromLexicalDB() {
+  await browser.storage.local.remove("accessToken");
+  console.log("Token supprimé, déconnexion réussie.");
+  alert("Déconnexion réussie.");
+  updateContextMenu();
+
+  // Envoi d'un message pour mettre à jour l'UI
+  browser.runtime.sendMessage({ action: "updateUI" });
+}
+  
+document.getElementById("toggleExtensionBtn").addEventListener("click", async () => {
+  const { extensionActive } = await browser.storage.local.get("extensionActive");
+  const newState = !extensionActive;
+  await browser.storage.local.set({ extensionActive: newState });
+  alert(`Extension ${newState ? "activée" : "désactivée"}.`);
+});
+
+document.getElementById("toggleStatsBtn").addEventListener("click", async () => {
+  const { statsActive } = await browser.storage.local.get("statsActive");
+  const newState = !statsActive;
+  await browser.storage.local.set({ statsActive: newState });
+  alert(`Statistiques ${newState ? "activées" : "désactivées"}.`);
+});
+

menu_extension/popup.html

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Extension BaLex</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 20px;
+      width: 200px;
+      background-color: #323046;
+      color: white;
+      text-align: center;
+    }
+    button {
+      width: 100%;
+      padding: 10px;
+      margin-bottom: 10px;
+      font-size: 15px;
+      color: #94608a;
+      font-weight: bold;
+      border: none;
+      cursor: pointer;
+    }
+    button:hover {
+      background-color: #94608a;
+      color: white;
+    }
+  </style>
+</head>
+<body>
+  <h3>Extension BaLex</h3>
+  <button id="auth-button">Se connecter</button>
+  <button id="toggleExtensionBtn">Activer/Désactiver l'extension</button>
+  <button id="toggleStatsBtn">Activer les statistiques</button>
+  <script src="popup.js"></script>
+</body>
+</html>

menu_extension/popup.js

+console.log("✅ popup.js chargé avec succès !");
+
+// === 1. Mise à jour du bouton Connexion/Déconnexion ===
+async function updateConnectionButton() {
+  const { accessToken } = await browser.storage.local.get("accessToken");
+  const button = document.getElementById("auth-button");
+
+  if (button) {
+    button.textContent = accessToken ? "Se déconnecter" : "Se connecter";
+    button.onclick = async () => {
+      await browser.runtime.sendMessage({ action: "toggleAuth" });
+    };
+  } else {
+    console.error("❌ Le bouton de connexion n'a pas été trouvé.");
+  }
+}
+
+// === 2. Écoute des messages depuis background.js ===
+browser.runtime.onMessage.addListener((message) => {
+  if (message.action === "updateUI") {
+    console.log("📩 Mise à jour reçue : État connecté :", message.isLoggedIn);
+    updateConnectionButton();
+  } else if (message.action === "refreshMenu") {
+    console.log("🔄 Actualisation du menu de l'extension déclenchée.");
+    updateConnectionButton();
+  }
+});
+
+// === 3. Gestion des actions des boutons ===
+document.getElementById("toggleExtensionBtn").addEventListener("click", async () => {
+  const { extensionActive } = await browser.storage.local.get("extensionActive");
+  const newState = !extensionActive;
+  await browser.storage.local.set({ extensionActive: newState });
+  alert(`Extension ${newState ? "activée" : "désactivée"}.`);
+});
+
+document.getElementById("toggleStatsBtn").addEventListener("click", async () => {
+  const { statsActive } = await browser.storage.local.get("statsActive");
+  const newState = !statsActive;
+  await browser.storage.local.set({ statsActive: newState });
+  alert(`Statistiques ${newState ? "activées" : "désactivées"}.`);
+});
+
+// === 4. Initialisation ===
+document.addEventListener("DOMContentLoaded", () => {
+  console.log("🌐 Initialisation du menu de l'extension...");
+  updateConnectionButton();
+});