From 77627e56026cf5aea83476a81502e172bb5ffec2 Mon Sep 17 00:00:00 2001
From: qsniyg <qsniyg@mail.com>
Date: Fri, 8 Dec 2023 08:43:34 +0000
Subject: [PATCH] Add framework for extension popup buttons

---
 extension/popup.html |  8 -----
 extension/popup.js   | 70 +++++++++++++++++++++++++++++++-------------
 2 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/extension/popup.html b/extension/popup.html
index ae089413..9fd4c506 100644
--- a/extension/popup.html
+++ b/extension/popup.html
@@ -18,14 +18,6 @@
                     <li>
                         <a href="options.html" class="button" target="_blank">Options</a>
                     </li>
-
-                    <li>
-                        <button id="replaceimages">Replace images</button>
-                    </li>
-
-                    <li id="highlightimages_container" style="display:none">
-                        <button id="highlightimages">Highlight images</button>
-                    </li>
                 </ul>
                 <div id="footer">
                     <a href="https://github.com/qsniyg/maxurl" target="_blank">Github</a> <span class="line">|</span>
diff --git a/extension/popup.js b/extension/popup.js
index 3352ce37..b76a58d5 100644
--- a/extension/popup.js
+++ b/extension/popup.js
@@ -15,23 +15,41 @@ function updateheight() {
     }, 1);
 }
 
-document.getElementById("replaceimages").onclick = function() {
-    chrome.runtime.sendMessage({
-        type: "popupaction",
-        data: {
-            action: "replace_images"
-        }
-    });
-};
-
-document.getElementById("highlightimages").onclick = function() {
-    chrome.runtime.sendMessage({
-        type: "popupaction",
-        data: {
-            action: "highlight_images"
+function addactionbtn(info) {
+    var buttons_el = document.getElementById("buttons");
+
+    var button_container_el = document.createElement("li");
+    button_container_el.id = info.id + "_container";
+
+    var button_el = document.createElement("button");
+    button_el.id = info.id;
+    button_el.innerText = info.name;
+    button_el.onclick = function() {
+        chrome.runtime.sendMessage({
+            type: "popupaction",
+            data: {
+                action: info.action
+            }
+        });
+    };
+    button_container_el.appendChild(button_el);
+
+    return new Promise(function(resolve) {
+        if (!info.toggle_setting) {
+            buttons_el.appendChild(button_container_el);
+            resolve();
+        } else {
+            get_option(info.toggle_setting, function(value) {
+                if (value) {
+                    buttons_el.appendChild(button_container_el);
+                }
+
+                resolve();
+            }, info.toggle_default || false)
         }
-    });
-};
+        resolve();
+    })
+}
 
 function get_option(name, cb, _default) {
     chrome.runtime.sendMessage({
@@ -125,8 +143,20 @@ get_option("imu_enabled", function(value) {
     update_logo(value);
 }, true);
 
-get_option("highlightimgs_enable", function(value) {
-    update_highlightimages(value);
-}, false);
+var promises = [];
+
+promises.push(addactionbtn({
+    id: "replaceimages",
+    action: "replace_images",
+    name: "Replace images"
+}));
+
+promises.push(addactionbtn({
+    id: "highlightimgs",
+    action: "highlight_images",
+    name: "Highlight images",
+    toggle_setting: "highlightimgs_enable",
+    toggle_default: false
+}));
 
-updateheight();
+Promise.all(promises).then(updateheight);