diff --git "a/barre_lat\303\251rale/content.js" "b/barre_lat\303\251rale/content.js"
new file mode 100644
index 0000000000000000000000000000000000000000..da428ce66fc6bc6ab1f6a4fb9930abf82d7e96d8
--- /dev/null
+++ "b/barre_lat\303\251rale/content.js"
@@ -0,0 +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);
+
+ // 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"
new file mode 100644
index 0000000000000000000000000000000000000000..5c3949b65166ede91b9bc0f5595f3dd24ef951d6
--- /dev/null
+++ "b/barre_lat\303\251rale/sidebar.html"
@@ -0,0 +1,130 @@
+<!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>
+ /* Style global */
+ body {
+ font-family: Helvetica, sans-serif;
+ font-size: medium;
+ margin: 0;
+ padding: 10px;
+ 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);
+ }
+
+ /* Titre */
+ h3 {
+ color: #fff;
+ text-align: center;
+ font-weight: bold;
+ }
+
+ /* Boutons */
+ button {
+ width: 100%;
+ margin-top: 5px;
+ padding: 10px;
+ border: none;
+ background-color: #8d5c70;
+ color: #fbfcfc;
+ font-weight: bold;
+ cursor: pointer;
+ text-align: center;
+ border-radius: 5px;
+ }
+
+ button:hover {
+ 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>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/les définition(s)</button>
+ </div>
+
+ <!-- Définition affichée -->
+ <div id="definition"></div>
+ <script src="sidebar.js"></script>
+
+</body>
+</html>
diff --git "a/barre_lat\303\251rale/sidebar.js" "b/barre_lat\303\251rale/sidebar.js"
new file mode 100644
index 0000000000000000000000000000000000000000..dbb8788c323e8cefc4dca9622a8b04b6c067914c
--- /dev/null
+++ "b/barre_lat\303\251rale/sidebar.js"
@@ -0,0 +1,86 @@
+// Confirme le chargement du script dans la console
+console.log("sidebar.js chargé avec succès !");
+
+// É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);
+ }
+});
+
+// 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');
+
+ 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>";
+ }
+}
+
+// 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é") {
+ chercherDefinition(mot);
+ } else {
+ alert("Veuillez sélectionner un mot avant de rechercher sa définition.");
+ }
+});
+
+// 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');
+ container.innerHTML = '';
+
+ lexiques.forEach(lexique => {
+ const div = document.createElement('div');
+ 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;
+
+ // Case à cocher
+ const checkbox = document.createElement('input');
+ checkbox.type = 'checkbox';
+ checkbox.id = `chk_${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 dès l'ouverture de la barre latérale
+chargerLexiques();
diff --git a/menu_extension/manifest.json b/menu_extension/manifest.json
index 02bfc7d08d08c90b2a5018a2f7b13bff88c747f3..b36ec6cbc65f6a2aa18394ccb1b7de2835223131 100644
--- a/menu_extension/manifest.json
+++ b/menu_extension/manifest.json
@@ -13,21 +13,34 @@
"*://babalex.lezinter.net/*",
"*://prisms.lezinter.net/*"],
"background": {
- "scripts": ["background.js"],
+ "scripts": ["menu_extension/background.js"],
"persistent": true
},
- "options_ui": {
- "page": "options.html",
- "open_in_tab": false
- },
"browser_action": {
- "default_popup": "popup.html",
+ "default_popup": "menu_extension/popup.html",
"default_icon": {
- "16": "icon-16.png",
- "48": "icon-48.png",
- "128": "icon-128.png"
+ "16": "icons/icon-16.png",
+ "48": "icons/icon-48.png",
+ "128": "icons/icon-128.png"
},
"default_title": "ff2BaLex"
},
- "web_accessible_resources": ["login.html"]
+ "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"]
+ }
+ ]
}