firefox add-ons

README.md

@@ -1,4 +1,4 @@
-# NoteMarker - ![Static Badge](https://img.shields.io/badge/release-v1.0.1-beta)
+# NoteMarker - ![Static Badge](https://img.shields.io/badge/release-v2.0.2-beta)
 
 ## Overview
 

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "NoteMarker",
-  "version": "2.0.3",
+  "version": "2.0.6",
   "description": "Effortlessly highlight text and jot down notes on any webpage. Enjoy vibrant colors, intuitive interface, and customizable sticky notes.",
   "permissions": [
     "storage",
@@ -23,7 +23,7 @@
     }
   },
   "background": {
-    "service_worker": "scripts/background.js"
+    "scripts": ["scripts/background.js"]
   },
   "content_scripts": [
     {
@@ -44,5 +44,16 @@
   ],
   "host_permissions": [
     "<all_urls>"
-  ]
+  ],
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self';"
+  },
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "{97757c2e-1328-4d1c-a840-e81a56c33328}",
+      "strict_min_version": "109.0"
+    }
+  },
+  "keywords": ["notes", "highlight", "sticky notes", "annotation"],
+  "category": "Productivity"
 }

popup.js

@@ -1,93 +1,84 @@
 document.getElementById("highlight").addEventListener("click", () => {
-  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-      chrome.scripting.executeScript({
-          target: { tabId: tabs[0].id },
-          function: showColorBoxAboveSelection
-      });
-  });
+    browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+        browser.scripting.executeScript({
+            target: { tabId: tabs[0].id },
+            func: showColorBoxAboveSelection
+        });
+    });
 });
 
 document.getElementById("clear").addEventListener("click", () => {
-  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-      chrome.scripting.executeScript({
-          target: { tabId: tabs[0].id },
-          function: clearAnnotations
-      });
-  });
+    browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+        browser.scripting.executeScript({
+            target: { tabId: tabs[0].id },
+            func: clearAnnotations
+        });
+    });
 });
 
-function showColorBoxAboveSelection() {
-  const selection = window.getSelection();
-  if (selection.rangeCount > 0) {
-      const range = selection.getRangeAt(0);
-      const rect = range.getBoundingClientRect();
-
-      const colorBox = document.createElement("div");
-      colorBox.id = 'highlight-toolbar';
-      colorBox.style.position = "absolute";
-      colorBox.style.top = `${window.scrollY + rect.top - 40}px`;
-      colorBox.style.left = `${window.scrollX + rect.left}px`;
-      colorBox.style.display = "flex";
-      colorBox.style.border = "1px solid #ccc";
-      colorBox.style.borderRadius = "10px";
-      colorBox.style.backgroundColor = "white";
-      colorBox.style.padding = "5px";
-      colorBox.style.zIndex = "10000";
-
-      const colors = ["yellow", "lightblue", "lightgreen", "pink", "orange"];
-      colors.forEach(color => {
-          const colorButton = document.createElement("div");
-          colorButton.style.backgroundColor = color;
-          colorButton.style.width = "20px";
-          colorButton.style.height = "20px";
-          colorButton.style.borderRadius = "50%";
-          colorButton.style.margin = "2px";
-          colorButton.style.cursor = "pointer";
-          colorButton.addEventListener("click", () => {
-              chrome.scripting.executeScript({
-                  target: { tabId: chrome.tabs.TAB_ID },
-                  function: highlightSelectedText,
-                  args: [color]
-              });
-              document.body.removeChild(colorBox);
-          });
-          colorBox.appendChild(colorButton);
-      });
-
-      document.body.appendChild(colorBox);
-  }
-
-  function highlightSelectedText(color) {
-      const selection = window.getSelection();
-      if (selection.toString().length > 0) {
-          const span = document.createElement("span");
-          span.style.backgroundColor = color;
-          span.textContent = selection.toString();
-
-          const range = selection.getRangeAt(0);
-          range.deleteContents();
-          range.insertNode(span);
-      }
-  }
-}
-
-function clearAnnotations() {
-  const highlights = document.querySelectorAll("span[style*='background-color:']");
-  highlights.forEach(highlight => highlight.remove());
-
-  const notes = document.querySelectorAll("div[contentEditable='true']");
-  notes.forEach(note => note.remove());
-}
-
 document.getElementById("sticky-note").addEventListener("click", () => {
-    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-        chrome.scripting.executeScript({
+    browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+        browser.scripting.executeScript({
             target: { tabId: tabs[0].id },
-            function: createStickyNote
+            func: createStickyNote
         });
     });
 });
 
+
+function showColorBoxAboveSelection() {
+    const selection = window.getSelection();
+    if (selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        const rect = range.getBoundingClientRect();
+
+        const colorBox = document.createElement("div");
+        colorBox.id = 'highlight-toolbar';
+        colorBox.style.position = "absolute";
+        colorBox.style.top = `${window.scrollY + rect.top - 40}px`;
+        colorBox.style.left = `${window.scrollX + rect.left}px`;
+        colorBox.style.display = "flex";
+        colorBox.style.border = "1px solid #ccc";
+        colorBox.style.borderRadius = "10px";
+        colorBox.style.backgroundColor = "white";
+        colorBox.style.padding = "5px";
+        colorBox.style.zIndex = "10000";
+
+        const colors = ["yellow", "lightblue", "lightgreen", "pink", "orange"];
+        colors.forEach(color => {
+            const colorButton = document.createElement("div");
+            colorButton.style.backgroundColor = color;
+            colorButton.style.width = "20px";
+            colorButton.style.height = "20px";
+            colorButton.style.borderRadius = "50%";
+            colorButton.style.margin = "2px";
+            colorButton.style.cursor = "pointer";
+            colorButton.addEventListener("click", () => {
+                browser.scripting.executeScript({
+                    target: { tabId: tabs[0].id },
+                    func: highlightSelectedText,
+                    args: [color]
+                });
+                document.body.removeChild(colorBox);
+            });
+            colorBox.appendChild(colorButton);
+        });
+
+        document.body.appendChild(colorBox);
+    }
+}
+
+function clearAnnotations() {
+    const highlights = document.querySelectorAll("span[style*='background-color:']");
+    highlights.forEach(highlight => {
+        const parent = highlight.parentNode;
+        while (highlight.firstChild) {
+            parent.insertBefore(highlight.firstChild, highlight);
+        }
+        parent.removeChild(highlight);
+    });
+}
+
 function createStickyNote() {
     if (!document.querySelector("link[href='https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,250,0,0']")) {
         const link = document.createElement("link");

scripts/background.js

@@ -1,18 +1,18 @@
-chrome.runtime.onInstalled.addListener(() => {
+browser.runtime.onInstalled.addListener(() => {
   console.log("Webpage Annotator installed.");
 });
 
-chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
   if (message.action === "saveAnnotations") {
-      chrome.storage.local.set({ annotations: message.data }, () => {
+      browser.storage.local.set({ annotations: message.data }).then(() => {
           console.log("Annotations saved.");
           sendResponse({ status: "success" });
       });
       return true;
   }
 
   if (message.action === "getAnnotations") {
-      chrome.storage.local.get(["annotations"], (result) => {
+      browser.storage.local.get(["annotations"]).then(result => {
           sendResponse({ annotations: result.annotations || [] });
       });
       return true;