Tabs only reload if they are whitelisted to, fixes #23

src/popup.html

@@ -116,7 +116,7 @@
           <ul id="also"></ul>
 
           <div id="button-grid">
-            <button type="submit" id="save" title="Save options">
+            <button type="button" id="save" title="Save options">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/><path d="M7 3v4a1 1 0 0 0 1 1h7"/></svg>
               <p>Save</p>
             </button>

src/popup.js

@@ -6,7 +6,7 @@ function init() {
 
   restore();
   document.querySelector("#preset").addEventListener("change", showOther);
-  document.querySelector("#options").addEventListener("submit", save);
+  document.querySelector("#save").addEventListener("click", save);
   document.querySelector("#restore").addEventListener("click", restore);
 }
 
@@ -17,6 +17,11 @@ function loadDomain() {
     const hostname = new URL(tabs[0].url).hostname;
     document.querySelector("#domain").innerHTML = hostname;
 
+    if (!hostname) {
+      disableToggle();
+      return;
+    }
+
     let storage = browser.storage.local.get("domains");
     storage.then((storage) => {
       const hostname = document.querySelector("#domain").innerHTML;
@@ -43,10 +48,9 @@ function toggle() {
     } else {
       domains.push(hostname);
     }
-    browser.storage.local.set({"domains": domains});
+    browser.storage.local.set({"domains": domains}).then(reloadTabs, logError);
   }, logError);
   toggleButton();
-  browser.tabs.reload();
 }
 
 /* Toggles the displayed button state */
@@ -64,6 +68,32 @@ function toggleButton() {
   }
 }
 
+/* Disables the toggle if the site is invalid */
+function disableToggle() {
+  let state = document.querySelector("#site-state");
+  state.querySelector("#domain").innerHTML = "Not available";
+  state.querySelector("p").innerHTML = "This tab does not allow MetamorPOV to modify its contents!";
+  state.querySelector("#toggle").style.display = "none";
+}
+
+/* Reloads tabs belonging to saved domains */
+function reloadTabs() {
+  browser.tabs.query({ currentWindow: true }).then((tabs) => {
+    console.log("tabs now!");
+    browser.storage.local.get("domains").then((storage) => {
+      const domains = storage.domains;
+      console.log("storage now!");
+      tabs.forEach((tab) => {
+        const hostname = new URL(tab.url).hostname;
+        if (domains.includes(hostname)) {
+          browser.tabs.reload(tab.id);
+          console.log("reloading!");
+        }
+      });
+    }, logError);
+  }, logError);
+}
+
 /* Gets saved options and loads them */
 function restore() {
   let options = browser.storage.local.get();
@@ -131,8 +161,7 @@ function save() {
     "other": saveOther(),
     "pov": document.querySelector("#pov").value,
     "also": saveAlso()
-  });
-  browser.tabs.reload();
+  }).then(reloadTabs, logError);
 }
 
 /* Helper for save, gets contents of other */