Surlignage 1 lexique

manifest.json

@@ -61,7 +61,9 @@
         "src/utils/definitions.js",
         "src/sidebar/sidebar.js",
         "src/context_menu/custom_context_menu.js",
-        "src/utils/stats.js"],
+        "src/utils/stats.js",
+        "src/utils/highlighting.js"
+      ],
       "css": ["src/context_menu/custom_context_menu.css"],
       "run_at": "document_idle"
     },

src/background/background.js

@@ -167,7 +167,7 @@ async function saveToken(token) {
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Gestion des messages reçus (depuis popup, etc.)
+// Gestion des messages reçus 
 // ─────────────────────────────────────────────────────────────────────────────
 browser.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
   log("📩 Message reçu dans background.js :", message);
@@ -217,6 +217,34 @@ browser.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
       }
       break;
     }
+    case "toggleLexiconHighlight": {
+      const tabs = await browser.tabs.query({active: true, currentWindow: true});
+      if (tabs[0]) {
+        try {
+          // S'assurer que le script est injecté
+          await browser.scripting.executeScript({
+              target: { tabId: tabs[0].id },
+              files: ["src/utils/highlighting.js"]
+          });
+
+          // Envoyer le message d'activation
+          await browser.tabs.sendMessage(tabs[0].id, {
+            command: message.isActive ? "activate-highlighting" : "deactivate-highlighting",
+            lexiconId: message.lexiconId
+          });
+          log(`✅ Message de surlignage transmis à l'onglet ${tabs[0].id}`);
+        } catch (error) {
+          console.error("❌ Erreur lors de la gestion du surlignage:", error);
+        }
+      }
+      break;
+    }
+
+    case "register-highlighting-script": {
+      log("📝 Script de surlignage enregistré pour l'onglet", sender.tab.id);
+      break;
+    }
+    
     default:
       break;
   }
@@ -543,3 +571,26 @@ function sendStoplistToWorker() {
 browser.runtime.onStartup.addListener(loadStoplist);
 browser.runtime.onInstalled.addListener(loadStoplist);
 
+async function handleHighlighting(command, lexiconId, tabId) {
+  console.log(`🎯 Gestion du surlignage: ${command} pour le lexique ${lexiconId}`);
+  
+  try {
+      // S'assurer que le script est injecté
+      await browser.scripting.executeScript({
+          target: { tabId: tabId },
+          files: ["utils/highlighting.js"]
+      });
+
+      // Envoyer le message d'activation
+      const response = await browser.tabs.sendMessage(tabId, {
+          command: command,
+          lexiconId: lexiconId
+      });
+      
+      console.log("✅ Réponse du content script:", response);
+      return response;
+  } catch (error) {
+      console.error("❌ Erreur lors de la gestion du surlignage:", error);
+      return false;
+  }
+}
\ No newline at end of file

src/sidebar/sidebar.html

@@ -293,6 +293,16 @@
       transform: translateX(-50%) translateY(-5px);
     }
 
+    .lexicon-highlight {
+      background-color: rgba(255, 255, 0, 0.3);
+      border-bottom: 1px dashed #666;
+      transition: background-color 0.3s;
+    }
+
+    .lexicon-highlight:hover {
+      background-color: rgba(255, 255, 0, 0.5);
+    }
+
     .lexicon-section {
       margin-bottom: 10px;
     }

src/sidebar/sidebar.js

@@ -116,8 +116,8 @@ async function refreshSidebarState() {
 }
 
 /**
- * Bascule l’affichage d’un bloc.
- * @param {string} blockId - L’ID du conteneur à basculer.
+ * Bascule l'affichage d'un bloc.
+ * @param {string} blockId - L'ID du conteneur à basculer.
  * @param {HTMLElement} btn - Le bouton qui déclenche la bascule, pour mettre à jour son texte.
  */
 function toggleBlock(blockId, btn) {
@@ -134,8 +134,8 @@ function toggleBlock(blockId, btn) {
 }
 
 /**
- * Ouvre un bloc s’il est fermé et met à jour le bouton de bascule.
- * @param {string} blockId - L’ID du conteneur à ouvrir.
+ * Ouvre un bloc s'il est fermé et met à jour le bouton de bascule.
+ * @param {string} blockId - L'ID du conteneur à ouvrir.
  * @param {HTMLElement} [btn] - (Optionnel) Le bouton de bascule à mettre à jour.
  */
 function openBlock(blockId, btn) {
@@ -301,12 +301,9 @@ async function displayLexiconsWithCheckbox(lexicons) {
       let currentState = highlightButton.dataset.active === "true";
       let newState = !currentState;
       try {
-        await browser.runtime.sendMessage({
-          action: "toggleLexiconHighlight",
-          lexiconId,
-          isActive: newState,
-        });
+        await toggleLexiconHighlight(lexiconId, newState);
         highlightButton.dataset.active = newState ? "true" : "false";
+        highlightButton.classList.toggle("active", newState);
       } catch (error) {
         console.error("Erreur lors du toggle de surlignage pour le lexique", lexiconId, ":", error);
       }
@@ -413,7 +410,7 @@ async function handleAddWordClick() {
     return;
   }
 
-  // 3) Vérifier si le mot existe déjà dans l’un des lexiques sélectionnés
+  // 3) Vérifier si le mot existe déjà dans l'un des lexiques sélectionnés
   let definitions = [];
   try {
     definitions = await fetchLexiconDefinitions(selectedWord);
@@ -445,7 +442,7 @@ async function handleAddWordClick() {
     return; 
   }
 
-  // 6) Envoi d’une seule requête pour tous les lexiques restants
+  // 6) Envoi d'une seule requête pour tous les lexiques restants
   try {
     log(`📡 Envoi de l'ajout du mot "${selectedWord}" dans les lexiques :`, lexiconsToAdd);
     const result = await window.AddWord(authToken, selectedWord, lexiconsToAdd, false);
@@ -464,9 +461,9 @@ async function handleAddWordClick() {
     }
 
   } catch (error) {
-    console.error("Erreur lors de l’ajout du mot :", error);
+    console.error("Erreur lors de l'ajout du mot :", error);
     if (lexiconResultElement) {
-      lexiconResultElement.textContent = "Erreur lors de l’ajout : " + error.message;
+      lexiconResultElement.textContent = "Erreur lors de l'ajout : " + error.message;
     }
   }
 }
@@ -476,95 +473,126 @@ async function handleAddWordClick() {
 // ─────────────────────────────────────────────────────────────────────────────
 browser.runtime.onMessage.addListener(async (message) => {
   log("📩 Message reçu dans sidebar.js :", message);
-  switch (message.action) {
-    case "refreshUI":
-      log("🔄 Demande de rafraîchissement de la barre latérale.");
-      await refreshSidebarState();
-      break;
-
-    case "mot_selectionne":
-      if (message.selectedText) {
-        log("🖋️ Mot sélectionné :", message.selectedText);
-        const selectedWordElement = document.getElementById("motSelectionne");
-        if (selectedWordElement) {
-          selectedWordElement.textContent = message.selectedText;
-        } else {
-          console.warn("⚠️ Élément #motSelectionne introuvable.");
+  
+  if (message.action === "refreshUI") {
+    log("🔄 Demande de rafraîchissement de la barre latérale.");
+    await refreshSidebarState();
+    return;
+  }
+
+  if (message.command) {
+    switch (message.command) {
+      case "activate-highlighting":
+        const highlightButton = document.querySelector(`[data-lexicon-id="${message.lexiconId}"] .lexique-highlight-toggle`);
+        if (highlightButton) {
+          highlightButton.dataset.active = "true";
+          highlightButton.classList.add("active");
         }
-        const lexiconResultElement = document.getElementById("lexiconResult");
-        if (lexiconResultElement) {
-          lexiconResultElement.innerHTML = "";
+        break;
+        
+      case "deactivate-highlighting":
+        const highlightButtonOff = document.querySelector(`[data-lexicon-id="${message.lexiconId}"] .lexique-highlight-toggle`);
+        if (highlightButtonOff) {
+          highlightButtonOff.dataset.active = "false";
+          highlightButtonOff.classList.remove("active");
         }
-        openBlock("etatContent");
-      }
-      break;
-
-    case "getDefinition":
-      if (message.selectedText) {
-        log("📖 Recherche des définitions pour :", message.selectedText);
-        openBlock("definitionContent");
-        await window.showDefinitions(message.selectedText);
-      }
-      break;
+        break;
+
+      case "mot_selectionne":
+        if (message.selectedText) {
+          log("🖋️ Mot sélectionné :", message.selectedText);
+          const selectedWordElement = document.getElementById("motSelectionne");
+          if (selectedWordElement) {
+            selectedWordElement.textContent = message.selectedText;
+          } else {
+            console.warn("⚠️ Élément #motSelectionne introuvable.");
+          }
+          const lexiconResultElement = document.getElementById("lexiconResult");
+          if (lexiconResultElement) {
+            lexiconResultElement.innerHTML = "";
+          }
+          openBlock("etatContent");
+        }
+        break;
 
-    case "showDefinitions":
-      if (Array.isArray(message.definitions)) {
-        window.displayDefinitions(message.definitions);
-      }
-      break;
+      case "getDefinition":
+        if (message.selectedText) {
+          log("📖 Recherche des définitions pour :", message.selectedText);
+          openBlock("definitionContent");
+          await window.showDefinitions(message.selectedText);
+        }
+        break;
 
-    case "fetchWiktionaryDefinitionResponse":
-      if (message.selectedText) {
-        log(`📖 Réception de la définition du Wiktionnaire pour '${message.selectedText}'`);
-        window.displayDefinitions(message.definitions);
-      }
-      break;
+      case "showDefinitions":
+        if (Array.isArray(message.definitions)) {
+          window.displayDefinitions(message.definitions);
+        }
+        break;
 
-    case "showLexiconResult":
-      log("📚 Résultat des lexiques reçus :", message.lexicons);
-      window.displayLexiconResults(message.lexicons);
-      break;
-    
-    case "addWordResult":
-      const lexiconResultElement = document.getElementById("lexiconResult");
-      if (lexiconResultElement) {
-        lexiconResultElement.innerHTML = message.lexicons;
-      }
-      break;
+      case "fetchWiktionaryDefinitionResponse":
+        if (message.selectedText) {
+          log(`📖 Réception de la définition du Wiktionnaire pour '${message.selectedText}'`);
+          window.displayDefinitions(message.definitions);
+        }
+        break;
 
-    case "addToLexicon":
-      handleAddWordClick();
-      break;
-    
-    case "openLexiconBlock":
-      openBlock("menuContent");
-      break;
+      case "showLexiconResult":
+        log("📚 Résultat des lexiques reçus :", message.lexicons);
+        window.displayLexiconResults(message.lexicons);
+        break;
       
-    case "toggleAuth":
-      break;
-
-    case "authStatusChanged":
-      break;
-
-    case "updateUI":
-      await refreshSidebarState();
-      break;
-
-    case "pyodide-simplemma-ready":
-      return;
-
-    case "saveToken":
-      authToken = message.token;
-      break;
+      case "addWordResult":
+        const lexiconResultElement = document.getElementById("lexiconResult");
+        if (lexiconResultElement) {
+          lexiconResultElement.innerHTML = message.lexicons;
+        }
+        break;
 
-    case "closeSidebarBlocks":
-      closeBlock("menuContent");
-      closeBlock("etatContent");
-      closeBlock("definitionContent")
-      break;
+      case "addToLexicon":
+        handleAddWordClick();
+        break;
+      
+      case "openLexiconBlock":
+        openBlock("menuContent");
+        break;
+        
+      case "toggleAuth":
+        break;
+
+      case "authStatusChanged":
+        break;
+
+      case "updateUI":
+        await refreshSidebarState();
+        break;
+
+      case "pyodide-simplemma-ready":
+        return;
+
+      case "saveToken":
+        authToken = message.token;
+        break;
+
+      case "closeSidebarBlocks":
+        closeBlock("menuContent");
+        closeBlock("etatContent");
+        closeBlock("definitionContent")
+        break;
+
+      case "register-stats-script":
+        break;
+
+      case "register-highlighting-script":
+        log("✅ Script de surlignage enregistré");
+        browser.runtime.sendMessage({ 
+          command: "updateAuthToken", 
+          token: authToken 
+        });
+        break;
 
-    default:
-      console.warn("⚠️ Action inconnue reçue :", message.action);
+      default:
+        console.warn("⚠️ Action inconnue reçue :", message.command);
+    }
   }
 });
 
@@ -677,3 +705,18 @@ document.addEventListener("DOMContentLoaded", async () => {
       }
     });
   });
+
+async function toggleLexiconHighlight(lexiconId, isActive) {
+  try {
+    await browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+      browser.tabs.sendMessage(tabs[0].id, {
+        command: isActive ? "activate-highlighting" : "deactivate-highlighting",
+        lexiconId: lexiconId
+      });
+    });
+
+    log(`✅ Surlignage ${isActive ? 'activé' : 'désactivé'} pour le lexique ${lexiconId}`);
+  } catch (error) {
+    console.error(`❌ Erreur lors du toggle du surlignage pour le lexique ${lexiconId}:`, error);
+  }
+}

src/utils/api.js

@@ -15,7 +15,7 @@ document.addEventListener("mouseup", () => {
 });
 
 // ─────────────────────────────────────────────────────────────────────────────
-// ▌ Fonction utilitaire pour appeler l’API
+// ▌ Fonction utilitaire pour appeler l'API
 // ─────────────────────────────────────────────────────────────────────────────
 /**
  * Effectue une requête API (GET, POST, etc.) avec ou sans body JSON
@@ -54,7 +54,7 @@ async function callApi(url, authToken = null, method = 'GET', data = null) {
 // ─────────────────────────────────────────────────────────────────────────────
 
 /**
- * Récupère les lexiques de l’utilisateur,
+ * Récupère les lexiques de l'utilisateur,
  * en langue par défaut "fr".
  * 
  * @param {string} authToken - Le token d'authentification.
@@ -67,7 +67,7 @@ async function getLexicons(authToken) {
 }
 
 /**
- * Récupère tous les lexiques (catégories) de l’utilisateur
+ * Récupère tous les lexiques (catégories) de l'utilisateur
  */
 async function getAllCategoriesLexicons(authToken) {
   const categories = ["User", "Group", "Zero", "New words"];
@@ -118,7 +118,7 @@ async function getAllLexiconWords(authToken) {
     const lexicons = await getLexicons(authToken);
     
     if (!Array.isArray(lexicons) || lexicons.length === 0) {
-      console.warn("⚠️ Aucun lexique retourné par l’API pour ces paramètres.");
+      console.warn("⚠️ Aucun lexique retourné par l'API pour ces paramètres.");
       return {};
     }
 
@@ -127,6 +127,11 @@ async function getAllLexiconWords(authToken) {
     
     for (const lexicon of lexicons) {
       const entries = await getLexiconEntries(authToken, lexicon.id);
+      // Vérification que entries est bien un tableau
+      if (!Array.isArray(entries)) {
+        console.warn(`⚠️ Format invalide pour les entrées du lexique ${lexicon.id}:`, entries);
+        continue;
+      }
       const allGraphies = entries.map(entry => entry.graphy);
       
       // Création d'un libellé unique pour le lexique
@@ -187,13 +192,13 @@ async function getWiktionaryDefinition(word) {
  */
 async function AddWord(authToken, selectedWord, lexiconIds, force = false) {
   if (!authToken) {
-    throw new Error("Aucun token d’authentification fourni.");
+    throw new Error("Aucun token d'authentification fourni.");
   }
   if (!selectedWord) {
-    throw new Error("Aucun mot n’a été spécifié pour l’ajout.");
+    throw new Error("Aucun mot n'a été spécifié pour l'ajout.");
   }
   if (!Array.isArray(lexiconIds) || lexiconIds.length === 0) {
-    throw new Error("Aucun lexique sélectionné pour l’ajout.");
+    throw new Error("Aucun lexique sélectionné pour l'ajout.");
   }
 
   const url = "https://babalex.lezinter.net/api/entry/create";