Let popup.html run standalone, for UI testing.

Author: pmarks-net

src/common.js

@@ -219,7 +219,12 @@ function setColorIsDarkMode(option, isDarkMode) {
   const value = isDarkMode ? "lightfg" : "darkfg";
   if (options[option] != value) {
     options[option] = value;
-    chrome.storage.local.set({[option]: value});
+    try {
+      chrome.storage.local.set({[option]: value});
+    } catch (e) {
+      // This happens when testing popup.html standalone.
+      console.error(e)
+    }
     _watchOptionsFunc?.([option]);
   }
 }
@@ -261,4 +266,4 @@ function revertNAT64() {
     // our local Set is used for deduplication.
     _watchOptionsFunc?.([NAT64_KEY]);
   }
-}
+}

src/popup.js

@@ -24,20 +24,29 @@ const ALL_URLS = "<all_urls>";
 const LONG_DOMAIN = 50;
 
 const tabId = window.location.hash.substr(1);
-if (!isFinite(Number(tabId))) {
-  throw "Bad tabId";
-}
 
 let table = null;
 
 window.onload = async function() {
   table = document.getElementById("addr_table");
   table.onmousedown = handleMouseDown;
-  await beg();
   if (IS_MOBILE) {
     document.getElementById("mobile_footer").style.display = "flex";
   }
-  connectToExtension();
+  if (/^[0-9]+$/.test(tabId)) {
+    await beg();
+    connectToExtension();
+  } else if (tabId) {
+    throw new Error(`Bad tabId: ${tabId}`);
+  } else {
+    console.log("No tabId, using test table")
+    const TEST_TUPLES = [
+      ["ipv6.example.com", "2001:db8::f00", "6", DFLAG_SSL],
+      ["ipv4.example.com", "192.0.2.9", "4", DFLAG_NOSSL],
+      ["cached.example.com", "2001:db8::f00", "6", DFLAG_SSL | DFLAG_NOSSL | AFLAG_CACHE],
+    ];
+    pushAll(TEST_TUPLES, "646", REGULAR_COLOR, 0);
+  }
 };
 
 // Monitor for dark mode updates.