diff --git a/src/sidebar/sidebar.html b/src/sidebar/sidebar.html
index 79f9c09a9d628179d8fb1bff4edf678d15f993c0..96de998b0c0aa38204efaf34153aa885dd55c84d 100644
--- a/src/sidebar/sidebar.html
+++ b/src/sidebar/sidebar.html
@@ -259,6 +259,8 @@
transition: filter 0.3s ease-in-out;
}
+ /* Ajout de la classe active */
+ .lexique-highlight-toggle.active .feutre-icon,
.lexique-highlight-toggle[data-active="true"] .feutre-icon {
filter: brightness(0) saturate(100%) invert(83%) sepia(89%) saturate(588%) hue-rotate(360deg);
}
diff --git a/src/sidebar/sidebar.js b/src/sidebar/sidebar.js
index 5b90964773983506a0c316017f13ccc7dc7e0af2..c51f264b8bcb7950aff6267a462837d8bd66f859 100644
--- a/src/sidebar/sidebar.js
+++ b/src/sidebar/sidebar.js
@@ -217,7 +217,7 @@ async function fetchLexicons() {
lexiconMap.set(lex.id, lexiconName);
});
- displayLexiconsWithCheckbox(lexicons.map((lex) => ({
+ await displayLexiconsWithCheckbox(lexicons.map((lex) => ({
lexiconName:
lex.category === "User"
? DEBUG
@@ -229,6 +229,9 @@ async function fetchLexicons() {
lexiconId: lex.id,
active: lex.active || false,
})));
+
+ // Restaurer l'état des boutons après l'affichage
+ await restoreHighlightingState();
} catch (error) {
console.error("⌠Erreur lors du chargement des lexiques :", error.message);
const lexiquesContainer = document.getElementById("lexiques");
@@ -286,6 +289,9 @@ async function displayLexiconsWithCheckbox(lexicons) {
// Conteneur pour le bouton de surlignage (avec tooltip)
const highlightButton = document.createElement("button");
highlightButton.className = "tooltip-container lexique-highlight-toggle";
+ if (active) {
+ highlightButton.classList.add('active');
+ }
highlightButton.dataset.lexiconId = lexiconId;
highlightButton.dataset.active = active ? "true" : "false";
const feutreIcon = document.createElement("img");
@@ -296,7 +302,7 @@ async function displayLexiconsWithCheckbox(lexicons) {
highlightTooltip.className = "tooltip";
highlightTooltip.textContent = "Activer/Désactiver le surlignage des mots du lexique";
- // Gestion du clic pour activer/désactiver le surlignage
+ // Mise à jour du gestionnaire d'événements
highlightButton.addEventListener("click", async () => {
let currentState = highlightButton.dataset.active === "true";
let newState = !currentState;
@@ -304,6 +310,11 @@ async function displayLexiconsWithCheckbox(lexicons) {
await toggleLexiconHighlight(lexiconId, newState);
highlightButton.dataset.active = newState ? "true" : "false";
highlightButton.classList.toggle("active", newState);
+
+ // Sauvegarder l'état dans le storage local
+ const activeLexicons = Array.from(document.querySelectorAll('.lexique-highlight-toggle[data-active="true"]'))
+ .map(btn => parseInt(btn.dataset.lexiconId));
+ await browser.storage.local.set({ activeLexicons });
} catch (error) {
console.error("Erreur lors du toggle de surlignage pour le lexique", lexiconId, ":", error);
}
@@ -343,6 +354,24 @@ async function displayLexiconsWithCheckbox(lexicons) {
}, 100);
}
+// Ajouter une fonction pour restaurer l'état des boutons au chargement
+async function restoreHighlightingState() {
+ try {
+ const { activeLexicons } = await browser.storage.local.get("activeLexicons");
+ if (activeLexicons && Array.isArray(activeLexicons)) {
+ const buttons = document.querySelectorAll('.lexique-highlight-toggle');
+ buttons.forEach(button => {
+ const lexiconId = parseInt(button.dataset.lexiconId);
+ const isActive = activeLexicons.includes(lexiconId);
+ button.dataset.active = isActive ? "true" : "false";
+ button.classList.toggle("active", isActive);
+ });
+ }
+ } catch (error) {
+ console.error("Erreur lors de la restauration de l'état des boutons:", error);
+ }
+}
+
function initModal() {
log("initModal appelé");
const modalOverlay = document.getElementById("modalOverlay");
@@ -483,7 +512,7 @@ browser.runtime.onMessage.addListener(async (message) => {
if (message.command) {
switch (message.command) {
case "activate-highlighting":
- const highlightButton = document.querySelector(`[data-lexicon-id="${message.lexiconId}"] .lexique-highlight-toggle`);
+ const highlightButton = document.querySelector(`button[data-lexicon-id="${message.lexiconId}"]`);
if (highlightButton) {
highlightButton.dataset.active = "true";
highlightButton.classList.add("active");
@@ -491,7 +520,7 @@ browser.runtime.onMessage.addListener(async (message) => {
break;
case "deactivate-highlighting":
- const highlightButtonOff = document.querySelector(`[data-lexicon-id="${message.lexiconId}"] .lexique-highlight-toggle`);
+ const highlightButtonOff = document.querySelector(`button[data-lexicon-id="${message.lexiconId}"]`);
if (highlightButtonOff) {
highlightButtonOff.dataset.active = "false";
highlightButtonOff.classList.remove("active");
@@ -713,6 +742,12 @@ document.addEventListener("DOMContentLoaded", async () => {
async function toggleLexiconHighlight(lexiconId, isActive) {
try {
+ const button = document.querySelector(`button[data-lexicon-id="${lexiconId}"]`);
+ if (button) {
+ button.dataset.active = isActive.toString();
+ button.classList.toggle('active', isActive);
+ }
+
await browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
browser.tabs.sendMessage(tabs[0].id, {
command: isActive ? "activate-highlighting" : "deactivate-highlighting",
diff --git a/src/utils/highlighting.js b/src/utils/highlighting.js
index 091579a9dd05cbd1efab5df32e1b71aaf9b73ea2..27402c8725780d11ba1f009d12983bf0accf191e 100644
--- a/src/utils/highlighting.js
+++ b/src/utils/highlighting.js
@@ -57,8 +57,8 @@ browser.runtime.onMessage.addListener((message) => {
// Au début du fichier, après la déclaration de observer
document.addEventListener('visibilitychange', async () => {
- if (document.visibilityState === 'visible' && window.highlightingActive) {
- log("📄 Page redevenue visible, réinitialisation complète du surlignage");
+ if (document.visibilityState === 'visible' && window.highlightingActive && activeLexiconIds.size > 0) {
+ log("📄 Page redevenue visible, réinitialisation du surlignage");
removeAllHighlights();
await updateLexiconCache();
highlightVisibleContent();
@@ -67,9 +67,9 @@ document.addEventListener('visibilitychange', async () => {
});
// Ajoutons aussi un listener pour le chargement complet de la page
-window.addEventListener('load', async () => {
- if (window.highlightingActive) {
- log("📄 Page chargée, réinitialisation complète du surlignage");
+window.addEventListener('pageshow', async () => {
+ if (window.highlightingActive && activeLexiconIds.size > 0) {
+ log("📄 Page affichée (pageshow), réinitialisation du surlignage");
removeAllHighlights();
await updateLexiconCache();
highlightVisibleContent();
@@ -77,30 +77,19 @@ window.addEventListener('load', async () => {
}
});
+// Déplacer checkAndRestoreHighlightingState après la déclaration de startHighlighting
(function () {
try {
- // Déplacer la vérification hasRun ici
if (window.hasRun) {
- console.log("âš ï¸ highlighting.js déjà chargé, mais listener maintenu");
+ console.log("âš ï¸ highlighting.js déjà chargé");
return;
}
window.hasRun = true;
- console.log("🟢 IIFE de highlighting.js démarrée");
-
- // Vérification immédiate des objets critiques
- console.log("🔠État initial:", {
- hasAuthToken: !!window.authToken,
- hasGetAllLexiconWords: !!window.getAllLexiconWords,
- browserRuntime: !!browser?.runtime,
- documentBody: !!document.body
- });
-
- // Amélioration du log initial pour vérifier si le script s'exécute
- console.log("🟢 Début d'exécution du script highlighting.js");
// Variables globales pour le script
let lexiconWordsCache = new Map();
let highlightingActive = false;
+ window.highlightingActive = false;
let activeLexiconIds = new Set();
let observer = null;
@@ -118,102 +107,103 @@ window.addEventListener('load', async () => {
if (message.command === "activate-highlighting") {
log(`🎯 Activation du surlignage pour le lexique ${message.lexiconId}`);
- // Exécuter startHighlighting de manière synchrone et envoyer la réponse
startHighlighting(message.lexiconId)
- .then(result => sendResponse(result))
+ .then(() => {
+ window.highlightingActive = true;
+ sendResponse(true);
+ })
.catch(error => {
- console.error("Erreur lors de l'activation:", error);
+ console.error("⌠Erreur lors de l'activation:", error);
sendResponse(false);
});
- return true; // Indique que nous allons envoyer une réponse asynchrone
+ return true;
}
if (message.command === "deactivate-highlighting") {
log(`🚫 Désactivation du surlignage pour le lexique ${message.lexiconId}`);
- stopHighlighting(message.lexiconId);
- sendResponse(true);
+ stopHighlighting(message.lexiconId)
+ .then(() => {
+ if (activeLexiconIds.size === 0) {
+ window.highlightingActive = false;
+ }
+ sendResponse(true);
+ })
+ .catch(error => {
+ console.error("⌠Erreur lors de la désactivation:", error);
+ sendResponse(false);
+ });
return true;
}
- sendResponse(false);
return false;
});
log("📡 Enregistrement du script auprès du background");
browser.runtime.sendMessage({ command: "register-highlighting-script" });
- window.hasRun = true;
log("🚀 Initialisation de highlighting.js");
// ─────────────────────────────────────────────────────────────────────────────
// Fonctions principales
// ─────────────────────────────────────────────────────────────────────────────
async function startHighlighting(lexiconId) {
- console.log("🎬 startHighlighting appelé avec:", {
- lexiconId,
- windowContext: {
- authToken: !!window.authToken,
- getAllLexiconWords: !!window.getAllLexiconWords,
- location: window.location.href
- }
- });
- log(`🎬 Démarrage du surlignage (lexiconId: ${lexiconId})`);
-
try {
- // Attendre que le token soit disponible via initAuthToken
await initAuthToken();
if (!window.authToken) {
- throw new Error("⌠Pas de token d'authentification disponible après initialisation");
+ throw new Error("⌠Pas de token d'authentification disponible");
}
if (lexiconId) {
activeLexiconIds.add(lexiconId);
- log("📊 Lexiques actifs:", Array.from(activeLexiconIds));
+ const activeLexicons = Array.from(activeLexiconIds);
+ await browser.storage.local.set({ activeLexicons });
+ log("📊 Lexiques actifs sauvegardés:", activeLexicons);
}
+ window.highlightingActive = true;
highlightingActive = true;
- log("🔄 Début de la mise à jour du cache");
await updateLexiconCache();
- log("✅ Cache mis à jour, début du surlignage");
highlightVisibleContent();
attachMutationObserver();
return true;
} catch (error) {
- console.error("⌠Erreur détaillée lors du démarrage du surlignage:", {
- error: error.message,
- stack: error.stack,
- authToken: !!window.authToken,
- getAllLexiconWords: typeof window.getAllLexiconWords,
- activeLexiconIds: Array.from(activeLexiconIds)
- });
- return false;
+ console.error("⌠Erreur lors du démarrage du surlignage:", error);
+ window.highlightingActive = false;
+ highlightingActive = false;
+ throw error;
}
}
- function stopHighlighting(lexiconId) {
- log(`🛑 Arrêt du surlignage (lexiconId: ${lexiconId})`);
- if (lexiconId) {
- activeLexiconIds.delete(lexiconId);
- log("📊 Lexiques actifs restants:", Array.from(activeLexiconIds));
-
- if (activeLexiconIds.size === 0) {
- log("🔄 Plus aucun lexique actif, désactivation complète");
+ async function stopHighlighting(lexiconId) {
+ try {
+ if (lexiconId) {
+ activeLexiconIds.delete(lexiconId);
+ const activeLexicons = Array.from(activeLexiconIds);
+ await browser.storage.local.set({ activeLexicons });
+
+ if (activeLexiconIds.size === 0) {
+ window.highlightingActive = false;
+ highlightingActive = false;
+ removeAllHighlights();
+ detachMutationObserver();
+ } else {
+ removeAllHighlights();
+ await updateLexiconCache();
+ highlightVisibleContent();
+ }
+ } else {
+ window.highlightingActive = false;
highlightingActive = false;
+ activeLexiconIds.clear();
removeAllHighlights();
detachMutationObserver();
- } else {
- log("🔄 Rafraîchissement du surlignage pour les lexiques restants");
- removeAllHighlights();
- highlightVisibleContent();
}
- } else {
- log("🧹 Désactivation globale du surlignage");
- highlightingActive = false;
- activeLexiconIds.clear();
- removeAllHighlights();
- detachMutationObserver();
+ return true;
+ } catch (error) {
+ console.error("⌠Erreur lors de l'arrêt du surlignage:", error);
+ throw error;
}
}
@@ -427,7 +417,8 @@ window.addEventListener('load', async () => {
highlights.forEach(highlight => {
const text = highlight.textContent;
- highlight.replaceWith(text);
+ const textNode = document.createTextNode(text);
+ highlight.parentNode.replaceChild(textNode, highlight);
});
}
@@ -502,6 +493,27 @@ window.addEventListener('load', async () => {
authToken: !!window.authToken,
getAllLexiconWords: typeof window.getAllLexiconWords
});
+
+ // Puis déclarer checkAndRestoreHighlightingState
+ async function checkAndRestoreHighlightingState() {
+ try {
+ const { activeLexicons } = await browser.storage.local.get("activeLexicons");
+ // Ne rien faire si pas de lexiques actifs
+ if (!activeLexicons || !Array.isArray(activeLexicons) || activeLexicons.length === 0) {
+ window.highlightingActive = false;
+ highlightingActive = false;
+ return;
+ }
+ log("🔄 État des lexiques trouvé:", activeLexicons);
+ } catch (error) {
+ console.error("⌠Erreur lors de la restauration de l'état:", error);
+ window.highlightingActive = false;
+ highlightingActive = false;
+ }
+ }
+
+ // Ne pas démarrer automatiquement le surlignage
+ checkAndRestoreHighlightingState();
} catch (error) {
console.error("🔴 Erreur critique dans l'IIFE:", error);
}