From 13f09cb117b6fd36e13cebaf14c12a9dc9d946af Mon Sep 17 00:00:00 2001 From: Lucie Bader <167515375+Lucie-Bdr@users.noreply.github.com> Date: Tue, 14 Jan 2025 15:44:17 +0100 Subject: [PATCH 1/6] =?UTF-8?q?Architecture=20de=20la=20barre=20lat=C3=A9r?= =?UTF-8?q?ale?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sidebar.html | 0 sidebar.js | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 sidebar.html create mode 100644 sidebar.js diff --git a/sidebar.html b/sidebar.html new file mode 100644 index 0000000..e69de29 diff --git a/sidebar.js b/sidebar.js new file mode 100644 index 0000000..e69de29 -- GitLab From 4567e6514cca0e642b9d9afa849ec459f69d716a Mon Sep 17 00:00:00 2001 From: Lucie Bader <167515375+Lucie-Bdr@users.noreply.github.com> Date: Tue, 14 Jan 2025 15:46:57 +0100 Subject: [PATCH 2/6] =?UTF-8?q?D=C3=A9placement=20fichiers?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sidebar.html => "barre_lat\303\251rale/sidebar.html" | 0 sidebar.js => "barre_lat\303\251rale/sidebar.js" | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename sidebar.html => "barre_lat\303\251rale/sidebar.html" (100%) rename sidebar.js => "barre_lat\303\251rale/sidebar.js" (100%) diff --git a/sidebar.html "b/barre_lat\303\251rale/sidebar.html" similarity index 100% rename from sidebar.html rename to "barre_lat\303\251rale/sidebar.html" diff --git a/sidebar.js "b/barre_lat\303\251rale/sidebar.js" similarity index 100% rename from sidebar.js rename to "barre_lat\303\251rale/sidebar.js" -- GitLab From 4985c85260096db70d0aaeb1b3a7b39d993bfe2f Mon Sep 17 00:00:00 2001 From: Lucie Bader <167515375+Lucie-Bdr@users.noreply.github.com> Date: Tue, 14 Jan 2025 16:34:06 +0100 Subject: [PATCH 3/6] Architecture de base --- "barre_lat\303\251rale/content.js" | 8 +++ "barre_lat\303\251rale/sidebar.html" | 54 +++++++++++++++++ "barre_lat\303\251rale/sidebar.js" | 86 ++++++++++++++++++++++++++++ manifest.json | 42 ++++++++++++++ 4 files changed, 190 insertions(+) create mode 100644 "barre_lat\303\251rale/content.js" create mode 100644 manifest.json diff --git "a/barre_lat\303\251rale/content.js" "b/barre_lat\303\251rale/content.js" new file mode 100644 index 0000000..78e6ed0 --- /dev/null +++ "b/barre_lat\303\251rale/content.js" @@ -0,0 +1,8 @@ +document.addEventListener('mouseup', () => { + const selection = window.getSelection().toString().trim(); + if (selection) { + console.log("Mot sélectionné :", selection); + browser.runtime.sendMessage({ action: "mot_selectionne", mot: selection }); + } + }); + \ No newline at end of file diff --git "a/barre_lat\303\251rale/sidebar.html" "b/barre_lat\303\251rale/sidebar.html" index e69de29..1a1084a 100644 --- "a/barre_lat\303\251rale/sidebar.html" +++ "b/barre_lat\303\251rale/sidebar.html" @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html lang="fr"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>BaLex - Barre Latérale</title> + <style> + body { + font-family: Arial, sans-serif; + margin: 0; + padding: 10px; + background-color: #323046; + color: white; + } + #menu, #etat { + padding: 10px; + margin-bottom: 10px; + border-radius: 5px; + } + #menu { + background-color: #3e383c; + } + #etat { + background-color: #3e383c; + } + button { + width: 100%; + margin-bottom: 5px; + padding: 8px; + border: none; + background-color: #94608a; + color: white; + cursor: pointer; + text-align: center; + } + button:hover { + background-color: #b478a3; + } + </style> +</head> +<body> + <div id="menu"> + <h3>Mes Lexiques</h3> + <div id="lexiques">Chargement...</div> + </div> + <div id="etat"> + <h3>Mot sélectionné</h3> + <p id="motSelectionne">Aucun mot sélectionné</p> + <button id="chercherDef">Chercher la définition</button> + </div> + <script src="sidebar.js"></script> +</body> +<div id="definition" style="margin-top: 10px; background-color: #444; padding: 10px; border-radius: 5px;"></div> +</html> diff --git "a/barre_lat\303\251rale/sidebar.js" "b/barre_lat\303\251rale/sidebar.js" index e69de29..5d77479 100644 --- "a/barre_lat\303\251rale/sidebar.js" +++ "b/barre_lat\303\251rale/sidebar.js" @@ -0,0 +1,86 @@ +// Affiche un message dans la console pour confirmer le chargement du script +console.log("sidebar.js chargé avec succès !"); + +// Écoute les messages venant du script de contenu pour afficher la sélection dans la barre latérale +browser.runtime.onMessage.addListener((message) => { + if (message.action === "mot_selectionne") { + document.getElementById('motSelectionne').textContent = message.mot; + console.log("Mot reçu dans la barre latérale :", message.mot); + } +}); + +// Fonction pour rechercher la définition d'un mot sur le Wiktionnaire +async function chercherDefinition(mot) { + const url = `https://fr.wiktionary.org/api/rest_v1/page/summary/${encodeURIComponent(mot)}`; + console.log("URL de la requête :", url); + + try { + const response = await fetch(url); + if (!response.ok) { + throw new Error(`Erreur HTTP : ${response.status}`); + } + + const data = await response.json(); + const definitionDiv = document.getElementById('definition'); + + if (data.extract) { + definitionDiv.innerHTML = `<strong>Définition de ${mot} :</strong><p>${data.extract}</p>`; + } else { + definitionDiv.innerHTML = `<p>Aucune définition trouvée pour : ${mot}</p>`; + } + } catch (error) { + console.error("Erreur lors de la récupération de la définition :", error); + document.getElementById('definition').innerHTML = "<p>Erreur lors de la recherche de la définition.</p>"; + } +} + +// Déclenche la recherche de définition au clic du bouton +document.getElementById('chercherDef').addEventListener('click', () => { + const mot = document.getElementById('motSelectionne').textContent; + if (mot && mot !== "Aucun mot sélectionné") { + chercherDefinition(mot); + } else { + alert("Veuillez sélectionner un mot avant de rechercher sa définition."); + } +}); + +// Simulation du chargement des lexiques de l'utilisateur avec des cases à cocher alignées à droite +async function chargerLexiques() { + const lexiques = ["Lexique 1", "Lexique 2", "Lexique 3"]; + const container = document.getElementById('lexiques'); + container.innerHTML = ''; + + lexiques.forEach(lexique => { + const div = document.createElement('div'); + div.style.display = 'flex'; + div.style.alignItems = 'center'; + div.style.justifyContent = 'space-between'; + div.style.marginBottom = '5px'; + + const label = document.createElement('label'); + label.htmlFor = `chk_${lexique}`; + label.textContent = lexique; + label.style.cursor = 'pointer'; + + const checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + checkbox.id = `chk_${lexique}`; + + checkbox.addEventListener('change', (e) => { + if (e.target.checked) { + // Charger les mots liés au lexique sélectionné ici + console.log(`Lexique sélectionné : ${lexique}`); + } else { + // Masquer les mots liés au lexique sélectionné ici + console.log(`Lexique désélectionné : ${lexique}`); + } + }); + + div.appendChild(label); + div.appendChild(checkbox); + container.appendChild(div); + }); +} + +// Chargement des lexiques au démarrage de la barre latérale +chargerLexiques(); diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..7be7bf3 --- /dev/null +++ b/manifest.json @@ -0,0 +1,42 @@ +{ + "manifest_version": 2, + "name": "ff2BaLex", + "version": "1.0", + "description": "Extension Firefox avec barre latérale.", + "permissions": [ + "storage", + "activeTab", + "https://fr.wiktionary.org/*" + ], + "background": { + "scripts": ["menu_extension/background.js"], + "persistent": true + }, + "browser_action": { + "default_popup": "menu_extension/popup.html", + "default_icon": { + "16": "icons/icon-16.png", + "48": "icons/icon-48.png", + "128": "icons/icon-128.png" + }, + "default_title": "ff2BaLex" + }, + "options_ui": { + "page": "menu_extension/options.html", + "open_in_tab": false + }, + "sidebar_action": { + "default_title": "BaLex", + "default_panel": "barre_latérale/sidebar.html", + "default_icon": { + "16": "icons/icon-16.png", + "48": "icons/icon-48.png" + } + }, + "content_scripts": [ + { + "matches": ["<all_urls>"], + "js": ["barre_latérale/content.js"] + } + ] +} -- GitLab From 03bcd5e08505a4477c1a68313ff4b40a57c19de9 Mon Sep 17 00:00:00 2001 From: Lucie Bader <167515375+Lucie-Bdr@users.noreply.github.com> Date: Tue, 14 Jan 2025 16:35:04 +0100 Subject: [PATCH 4/6] =?UTF-8?q?R=C3=A9organisation=20fichiers?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- menu_extension/manifest.json | 24 ------------------------ 1 file changed, 24 deletions(-) delete mode 100644 menu_extension/manifest.json diff --git a/menu_extension/manifest.json b/menu_extension/manifest.json deleted file mode 100644 index 1f8ec33..0000000 --- a/menu_extension/manifest.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "manifest_version": 2, - "name": "ff2BaLex", - "version": "1.0", - "description": "Extension Firefox avec paramètres personnalisés.", - "permissions": ["storage", "activeTab"], - "background": { - "scripts": ["background.js"], - "persistent": true - }, - "options_ui": { - "page": "options.html", - "open_in_tab": false - }, - "browser_action": { - "default_popup": "popup.html", - "default_icon": { - "16": "icon-16.png", - "48": "icon-48.png", - "128": "icon-128.png" - }, - "default_title": "ff2BaLex" - } -} -- GitLab From d14f255f8e901e677190703cdc0303e055a626ec Mon Sep 17 00:00:00 2001 From: Lucie Bader <167515375+Lucie-Bdr@users.noreply.github.com> Date: Tue, 14 Jan 2025 18:27:00 +0100 Subject: [PATCH 5/6] =?UTF-8?q?Maquette=20lexiques=20et=20mot=20s=C3=A9lec?= =?UTF-8?q?tionn=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "barre_lat\303\251rale/content.js" | 13 +++- "barre_lat\303\251rale/sidebar.html" | 108 +++++++++++++++++++++++---- "barre_lat\303\251rale/sidebar.js" | 50 ++++++------- 3 files changed, 129 insertions(+), 42 deletions(-) diff --git "a/barre_lat\303\251rale/content.js" "b/barre_lat\303\251rale/content.js" index 78e6ed0..da428ce 100644 --- "a/barre_lat\303\251rale/content.js" +++ "b/barre_lat\303\251rale/content.js" @@ -1,8 +1,19 @@ +// É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); - browser.runtime.sendMessage({ action: "mot_selectionne", mot: 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: selection // Le texte sélectionné + }); } }); \ No newline at end of file diff --git "a/barre_lat\303\251rale/sidebar.html" "b/barre_lat\303\251rale/sidebar.html" index 1a1084a..5c3949b 100644 --- "a/barre_lat\303\251rale/sidebar.html" +++ "b/barre_lat\303\251rale/sidebar.html" @@ -5,50 +5,126 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BaLex - Barre Latérale</title> <style> + /* Style global */ body { - font-family: Arial, sans-serif; + font-family: Helvetica, sans-serif; + font-size: medium; margin: 0; padding: 10px; - background-color: #323046; - color: white; + background-color: #525877; + color: #323046; } + + /* Conteneurs */ #menu, #etat { padding: 10px; margin-bottom: 10px; border-radius: 5px; + background-color: #a08e9f; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } - #menu { - background-color: #3e383c; - } - #etat { - background-color: #3e383c; + + /* Titre */ + h3 { + color: #fff; + text-align: center; + font-weight: bold; } + + /* Boutons */ button { width: 100%; - margin-bottom: 5px; - padding: 8px; + margin-top: 5px; + padding: 10px; border: none; - background-color: #94608a; - color: white; + background-color: #8d5c70; + color: #fbfcfc; + font-weight: bold; cursor: pointer; text-align: center; + border-radius: 5px; } + button:hover { - background-color: #b478a3; + background-color: #dddedd; + color: #8d5c70; + } + + /* Mot sélectionné */ + #motSelectionne { + font-style: italic; + text-align: center; + margin-top: 5px; + } + + /* Style des lexiques */ + .lexique-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px; + margin-bottom: 5px; + border-radius: 5px; + background-color: #dcdde1; + width: 100%; + } + + .lexique-item:hover { + background-color: #c4c7ce; + } + + .lexique-label { + font-weight: bold; + color: #323046; + flex-grow: 1; + text-align: center; + } + + .lexique-checkbox { + transform: scale(1.2); + cursor: pointer; + flex-shrink: 0; + margin-left: 10px; + } + + /* Espace pour les pictogrammes */ + .lexique-icon { + width: 25px; + height: 25px; + border-radius: 50%; + background-color: #ccc; + margin-right: 10px; + flex-shrink: 0; + } + + /* Définition */ + #definition { + margin-top: 10px; + background-color: #444; + padding: 10px; + border-radius: 5px; + color: white; } </style> </head> <body> + + <!-- Menu des lexiques --> <div id="menu"> - <h3>Mes Lexiques</h3> + <h3>Lexiques</h3> <div id="lexiques">Chargement...</div> </div> + + <!-- État de la sélection --> <div id="etat"> <h3>Mot sélectionné</h3> <p id="motSelectionne">Aucun mot sélectionné</p> - <button id="chercherDef">Chercher la définition</button> + <button id="chercherDef">Chercher la/les définition(s)</button> </div> + + <!-- Définition affichée --> + <div id="definition"></div> <script src="sidebar.js"></script> + </body> -<div id="definition" style="margin-top: 10px; background-color: #444; padding: 10px; border-radius: 5px;"></div> </html> diff --git "a/barre_lat\303\251rale/sidebar.js" "b/barre_lat\303\251rale/sidebar.js" index 5d77479..dbb8788 100644 --- "a/barre_lat\303\251rale/sidebar.js" +++ "b/barre_lat\303\251rale/sidebar.js" @@ -1,25 +1,28 @@ -// Affiche un message dans la console pour confirmer le chargement du script +// Confirme le chargement du script dans la console console.log("sidebar.js chargé avec succès !"); -// Écoute les messages venant du script de contenu pour afficher la sélection dans la barre latérale +// Écoute les messages envoyés par le script de contenu pour afficher le mot sélectionné dans la barre latérale browser.runtime.onMessage.addListener((message) => { if (message.action === "mot_selectionne") { + // Met à jour l'affichage du mot sélectionné document.getElementById('motSelectionne').textContent = message.mot; console.log("Mot reçu dans la barre latérale :", message.mot); } }); -// Fonction pour rechercher la définition d'un mot sur le Wiktionnaire +// Recherche la définition d'un mot sur le Wiktionnaire async function chercherDefinition(mot) { const url = `https://fr.wiktionary.org/api/rest_v1/page/summary/${encodeURIComponent(mot)}`; console.log("URL de la requête :", url); try { + // Effectue la requête API vers le Wiktionnaire const response = await fetch(url); if (!response.ok) { throw new Error(`Erreur HTTP : ${response.status}`); } + // Récupère et affiche la définition si elle existe const data = await response.json(); const definitionDiv = document.getElementById('definition'); @@ -34,7 +37,7 @@ async function chercherDefinition(mot) { } } -// Déclenche la recherche de définition au clic du bouton +// Lance la recherche de la définition lorsque le bouton est cliqué document.getElementById('chercherDef').addEventListener('click', () => { const mot = document.getElementById('motSelectionne').textContent; if (mot && mot !== "Aucun mot sélectionné") { @@ -44,7 +47,7 @@ document.getElementById('chercherDef').addEventListener('click', () => { } }); -// Simulation du chargement des lexiques de l'utilisateur avec des cases à cocher alignées à droite +// Charge dynamiquement les lexiques de l'utilisateur avec des cases à cocher async function chargerLexiques() { const lexiques = ["Lexique 1", "Lexique 2", "Lexique 3"]; const container = document.getElementById('lexiques'); @@ -52,35 +55,32 @@ async function chargerLexiques() { lexiques.forEach(lexique => { const div = document.createElement('div'); - div.style.display = 'flex'; - div.style.alignItems = 'center'; - div.style.justifyContent = 'space-between'; - div.style.marginBottom = '5px'; - + div.className = 'lexique-item'; + + // Pictogramme + const icon = document.createElement('div'); + icon.className = 'lexique-icon'; + icon.id = `icon_${lexique.replace(/\s/g, '_')}`; + + // Nom du lexique const label = document.createElement('label'); label.htmlFor = `chk_${lexique}`; + label.className = 'lexique-label'; label.textContent = lexique; - label.style.cursor = 'pointer'; - + + // Case à cocher const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.id = `chk_${lexique}`; - - checkbox.addEventListener('change', (e) => { - if (e.target.checked) { - // Charger les mots liés au lexique sélectionné ici - console.log(`Lexique sélectionné : ${lexique}`); - } else { - // Masquer les mots liés au lexique sélectionné ici - console.log(`Lexique désélectionné : ${lexique}`); - } - }); - + checkbox.className = 'lexique-checkbox'; + + // Ordre : Pictogramme → Nom → Case à cocher + div.appendChild(icon); div.appendChild(label); div.appendChild(checkbox); container.appendChild(div); - }); + }); } -// Chargement des lexiques au démarrage de la barre latérale +// Chargement des lexiques dès l'ouverture de la barre latérale chargerLexiques(); -- GitLab From e0228970ef303fa382cc8a976e3433a11bf639ad Mon Sep 17 00:00:00 2001 From: Lucie Bader <167515375+Lucie-Bdr@users.noreply.github.com> Date: Fri, 17 Jan 2025 17:01:29 +0100 Subject: [PATCH 6/6] Modif chemin --- manifest.json => menu_extension/manifest.json | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename manifest.json => menu_extension/manifest.json (100%) diff --git a/manifest.json b/menu_extension/manifest.json similarity index 100% rename from manifest.json rename to menu_extension/manifest.json -- GitLab