feat: refactored and optimized code + icon

3 files changed, 86 insertions, 46 deletions

diff --git a/README.md b/README.md
index ae2964d..bf6f14b 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,37 @@
 # Discord Emoji without Nitro
 ---
 
-Send animated or not emoji everywhere without using discord nitro.
-Why paying for just using some links ....
+Send animated or not emoji everywhere without using discord nitro.  
+Why paying for just using some links ....  
+  
+## Using
+  
+To use this extension, just click on the emojis you want in the chat or discord
+emojis menu and paste the link in the chat.  
 
-# Version
+**Be careful, discord only render the picture if the link is lonely in a
+message**
 
-v1: copy emoji from emoji menu into the clipboard
-v1.1: copy emoji from chat into the clipboard
+## Installing
+
+The addons can be installed from the page
+`about:debugging#/runtime/this-firefox`, then click on the button `Load
+Temporary Add-On`, and choose the discord-no-nitro-emoji zip file.  
+  
+The zip file can be obtained from github packages or by packaging the extensions
+directly from the source code.
+
+## Packaging
+
+For packaging the project, use this command:
+
+```bash
+export VERSION=1.2
+zip -r -FS ../discord-no-nitro-emoji-$VERSION.zip icons/ manifest.json main.jsA
+```
+
+## Version
+  
+v1: copy emoji from emoji menu into the clipboard  
+v1.1: copy emoji from chat into the clipboard  
+v1.2: code refactored + optimized  
diff --git a/main.js b/main.js
index 1382cde..1b53218 100644
--- a/main.js
+++ b/main.js
@@ -1,55 +1,58 @@
-setInterval(function () {
-	// Delete lockicon on nitro emote
-	document.querySelector('#emoji-picker-grid ul li button [class^="emojiLockIconContainer"]')?.remove();
+/* Remove nitro things from discord emojis menu */
+const emojiPickerObserver = new MutationObserver(() => {
 
-    //Remove annoying nitro banner that appears when emote is clicked
-    document.querySelector("div[class*='emojiPicker'] div[class*='hasTabParentContainer']")?.remove();
-    document.querySelector("div[class*='emojiPicker'] div[class*='backdrop']")?.remove();
-    document.querySelector("[class^='upsellContainer']")?.remove();
-    // Discord crash if bellow removed
-    //document.querySelector("[class^='nitroTopDividerContainer']")?.remove();
-    // Remove class categorySectionNitroLocked sur ceux ayant la classe les div categorySection*/
-}, 100);
+    // Select objects to remove
+    const selectors = [
+        '#emoji-picker-grid ul li button [class^="emojiLockIconContainer"]',
+        "div[class*='emojiPicker'] div[class*='hasTabParentContainer']",
+        "div[class*='emojiPicker'] div[class*='backdrop']",
+        "[class^='upsellContainer']"
+    ];
 
-setInterval(function () {
-	// Add event listener on emote to copy them
-    document.querySelectorAll("div[class*='listItems'] div[class*='categorySection'] ul li button").forEach((btn) => {
-        if (btn.getAttribute("affected") !== "true") {
-            btn.setAttribute("affected", "true");
-
-            btn.addEventListener("click", (e) => {
-                let source = e.currentTarget.querySelector("img").getAttribute('src');
-                copyTextToClipboard(source)
-            });
-        }
+    // Search and delete objects
+    selectors.forEach(selector => {
+        document.querySelectorAll(selector).forEach(element => element.remove());
     });
-}, 1000);
+});
 
+/* Function to copy emojis link into the clipboard */
 async function copyTextToClipboard(textToCopy) {
     try {
-        if (navigator?.clipboard?.writeText) {
-            await navigator.clipboard.writeText(textToCopy);
-        }
+        await navigator.clipboard.writeText(textToCopy);
     } catch (err) {
-        console.error(err);
+        console.error("Error while copy in the clipboard : ", err);
     }
 }
 
-// Ajoute un écouteur d'événement de clic au document pour capturer les clics sur les images emoji
-document.addEventListener("click", function(event) {
-    // Vérifie si l'élément cliqué est une image avec la classe 'emoji'
-    if (event.target.classList.contains("emoji")) {
-        // Sélectionne le parent (ou ancêtre) ayant un id commençant par 'message-content'
-        const parentDiv = event.target.closest("div[id^='message-content']");
+/* Add event on each emoji on emojis menu to copy them into the clipboard */
+const emojisObserver = new MutationObserver(() => {
+    document.querySelectorAll("div[class*='listItems'] div[class*='categorySection'] ul li button:not([affected])")
+        .forEach(btn => {
+            btn.setAttribute("affected", "true");
+
+            btn.addEventListener("click", (e) => {
+                let source = e.currentTarget.querySelector("img").getAttribute('src');
+                copyTextToClipboard(source);
+            });
+        });
+});
 
-        // Vérifie que l'image est bien dans une div dont l'id commence par 'message-content'
+/* Copy emojis from chat when clicked on */
+document.addEventListener("click", function(event) {
+    const emojiImage = event.target;
+    
+    if (emojiImage.classList.contains("emoji")) {
+        const parentDiv = emojiImage.closest("div[id^='message-content']");
+        
         if (parentDiv) {
-          	let source = event.target.getAttribute('src');
-          	let parsedUrl = new URL(source);
-          	parsedUrl.searchParams.set("size", "48");
-          	copyTextToClipboard(parsedUrl.toString());
+            let source = emojiImage.getAttribute('src');
+            let parsedUrl = new URL(source);
+            parsedUrl.searchParams.set("size", "48");
+            copyTextToClipboard(parsedUrl.toString());
         }
     }
 });
 
-// copier le lien dans [class^='markup'] div span span span.text
+/* Check change in DOM to run functions if needed */
+emojisObserver.observe(document.body, { childList: true, subtree: true });
+emojiPickerObserver.observe(document.body, { childList: true, subtree: true });
diff --git a/manifest.json b/manifest.json
index 0e64e27..a086ad6 100644
--- a/manifest.json
+++ b/manifest.json
@@ -5,8 +5,13 @@
 		"name": "Oxbian",
 		"url": "https://arka.rocks"
 	},
-	"version": "1.1",
+	"version": "1.2",
 	"name": "Discord No Nitro Emoji",
+	"description": "Send any emojis everywhere on discord without having Nitro",
+	"icons": {
+		"48": "icons/no-nitro-48.png",
+		"96": "icons/no-nitro-96.png"
+	},
 	"permissions": [
 		"clipboardWrite"
 	],
@@ -19,5 +24,10 @@
 				"main.js"
 			]
 		}
-	]
+	],
+	"browser_specific_settings": {
+		"gecko": {
+			"id": "discordnonitro@oxbian.com"
+		}
+	}
 }