Add configurable lookup providers.

Users can choose a provider from the list, edit or create custom URLs,
or leave one/both fields blank to disable the feature.

Author: pmarks-net

src/background.js

@@ -647,26 +647,18 @@ function lookupOriginMap(origin) {
 
 // Dark mode detection. This can eventually be replaced by
 // https://github.com/w3c/webextensions/issues/229
-if (typeof window !== 'undefined' && window.matchMedia) {
-  // Firefox can detect dark mode from the background page.
-  (async () => {
+(async () => {
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    // Firefox can detect dark mode from the background page.
     await optionsReady;
     const query = window.matchMedia('(prefers-color-scheme: dark)');
     setColorIsDarkMode(REGULAR_COLOR, query.matches);
     query.addEventListener("change", (event) => {
       setColorIsDarkMode(REGULAR_COLOR, event.matches);
     });
-  })();
-} else {
-  // Chrome needs an offscreen document to detect dark mode.
-  chrome.runtime.onMessage.addListener((message) => {
-    console.log("onMessage", message);
-    if (message.hasOwnProperty("darkModeOffscreen")) {
-      setColorIsDarkMode(REGULAR_COLOR, message.darkModeOffscreen);
-    }
-  });
-
-  (async () => {
+  } else {
+    // Chrome needs an offscreen document to detect dark mode.
+    // See the onMessage handler below.
     await optionsReady;
     try {
       await chrome.offscreen.createDocument({
@@ -684,8 +676,51 @@ if (typeof window !== 'undefined' && window.matchMedia) {
     } catch {
       // ignore
     }
-  })();
+  }
+})();
+
+chrome.runtime.onMessage.addListener((message) => {
+  if (message.hasOwnProperty("darkModeOffscreen")) {
+    setColorIsDarkMode(REGULAR_COLOR, message.darkModeOffscreen);
+  }
+  if (message.hasOwnProperty("setStorageSyncDebounce")) {
+    storageSyncDebouncer.set(message.setStorageSyncDebounce);
+  }
+});
+
+// This class prevents writing to storage.sync more than once per second,
+// so the user can type in a text field without spamming the network.
+// It runs in background.js to avoid data loss if the user closes the
+// options window within 1 second of typing.
+class StorageSyncDebouncer {
+  latest = {};
+  pending = {};
+  writePromise = null;
+  set(items) {
+    for (let [key, value] of Object.entries(items)) {
+      if (this.latest[key] !== value) {
+        this.latest[key] = value;
+        this.pending[key] = value;
+      }
+    }
+    if (!this.writePromise && Object.keys(this.pending).length > 0) {
+      this.writePromise = this._writeWithDelay();
+    }
+  }
+  async _writeWithDelay() {
+    while (Object.keys(this.pending).length > 0) {
+      const toWrite = this.pending;
+      this.pending = {};
+      //console.log("writing", toWrite);
+      await Promise.all([
+        chrome.storage.sync.set(toWrite),
+        new Promise(resolve => setTimeout(resolve, 1000))
+      ]);
+    }
+    this.writePromise = null;
+  }
 }
+const storageSyncDebouncer = new StorageSyncDebouncer();
 
 // Must "await storageReady;" before reading maps.
 // You can force initStorage() from the console for debugging purposes.
@@ -1103,33 +1138,28 @@ chrome.webRequest.onErrorOccurred.addListener(forgetRequest, FILTER_ALL_URLS);
 
 // -- contextMenus --
 
-// When the user right-clicks an IP address in the popup window, add a menu
-// item to look up the address on bgp.he.net.  I don't like picking favorites,
-// so I'm open to making this a config option if someone recommends another
-// useful non-spammy service.
-//
-// Unless http://crbug.com/60758 gets resolved, the context menu's appearance
-// cannot vary based on content.
+// When the user right-clicks a domain or IP address in the popup window,
+// add a menu item that opens the requested lookup provider.
 const MENU_ID = "ipvfoo-lookup";
 
-chrome.contextMenus?.removeAll(() => {
-  chrome.contextMenus.create({
-    title: "Look up on bgp.he.net",
-    id: MENU_ID,
-    // Scope the menu to text selection in our popup windows.
-    contexts: ["selection"],
-    documentUrlPatterns: [chrome.runtime.getURL("popup.html")],
-  });
-});
-
 chrome.contextMenus?.onClicked.addListener((info, tab) => {
   if (info.menuItemId != MENU_ID) return;
-  const text = info.selectionText;
-  if (IP4_CHARS.test(text) || IP6_CHARS.test(text)) {
+  let selectionType = "";
+  let text = info.selectionText;
+  if (DNS_CHARS.test(text)) {
+    selectionType = "domain";
+  } else if (IP4_CHARS.test(text) || IP6_CHARS.test(text)) {
+    selectionType = "ip";
     // bgp.he.net doesn't support dotted IPv6 addresses.
-    chrome.tabs.create({url: `https://bgp.he.net/ip/${reformatForNAT64(text, false)}`});
-  } else if (DNS_CHARS.test(text)) {
-    chrome.tabs.create({url: `https://bgp.he.net/dns/${text}`});
+    text = reformatForNAT64(text, false);
+  }
+  const provider = options[LOOKUP_PROVIDER];
+  const pattern = (provider == "custom") ?
+      options[`${CUSTOM_PROVIDER}${selectionType}`] :
+      LOOKUP_PROVIDERS[provider]?.[selectionType];
+  const url = maybeLookupUrl(pattern, text)?.href;
+  if (url) {
+    chrome.tabs.create({url});
   } else {
     // Malformed selection; shake the popup content.
     const tabId = /#(\d+)$/.exec(info.pageUrl);
@@ -1158,4 +1188,29 @@ watchOptions(async (optionsChanged) => {
       tabInfo.refreshPageAction();
     }
   }
-});
+
+  if (optionsChanged.has(LOOKUP_PROVIDER) ||
+      optionsChanged.has(CUSTOM_PROVIDER_DOMAIN) ||
+      optionsChanged.has(CUSTOM_PROVIDER_IP)) {
+    let providerText = options[LOOKUP_PROVIDER];
+    if (providerText == "custom") {
+      // Show something sensible, even when domain/ip use different providers.
+      const hostnames = [
+        maybeLookupUrl(options[CUSTOM_PROVIDER_DOMAIN])?.hostname,
+        maybeLookupUrl(options[CUSTOM_PROVIDER_IP])?.hostname
+      ].filter(Boolean);
+      providerText = [...new Set(hostnames)].join(" | ");
+    }
+    chrome.contextMenus?.removeAll(() => {
+      if (providerText) {
+        chrome.contextMenus.create({
+          title: `Lookup on ${providerText}`,
+          id: MENU_ID,
+          // Scope the menu to text selection in our popup windows.
+          contexts: ["selection"],
+          documentUrlPatterns: [chrome.runtime.getURL("popup.html")],
+        });
+      }
+    });
+  }
+});

src/common.js

@@ -70,6 +70,45 @@ function iconPath(pattern, size, color) {
 const REGULAR_COLOR = "regularColorScheme";
 const INCOGNITO_COLOR = "incognitoColorScheme";
 
+const LOOKUP_PROVIDER = "lookupProvider";
+const CUSTOM_PROVIDER = "customProvider:";
+const CUSTOM_PROVIDER_DOMAIN = CUSTOM_PROVIDER + "domain";
+const CUSTOM_PROVIDER_IP = CUSTOM_PROVIDER + "ip";
+
+// "$" is a placeholder for the user's selected domain or IP address.
+const LOOKUP_PROVIDERS = {
+  "bgp.he.net": {
+    domain: "https://bgp.he.net/dns/$",
+    ip: "https://bgp.he.net/ip/$",
+  },
+  "info.addr.tools": {
+    domain: "https://info.addr.tools/$",
+    ip: "https://info.addr.tools/$",
+  },
+  "ipinfo.io": {
+    domain: "",
+    ip: "https://ipinfo.io/$",
+  },
+};
+
+function parseLookupUrl(pattern, placeholder="") {
+  pattern = pattern?.trim();
+  if (!pattern) {
+    return null;
+  }
+  if (!/^https:[/][/][^/$]+[/].*[$]/.test(pattern)) {
+    throw new Error("malformed");
+  }
+  return new URL(pattern.replaceAll("$", placeholder));  // may throw
+}
+function maybeLookupUrl(pattern, placeholder="") {
+  try {
+    return parseLookupUrl(pattern, placeholder);
+  } catch {
+    return null;
+  }
+}
+
 const NAT64_KEY = "nat64/";
 const NAT64_VALIDATE = /^nat64\/[0-9a-f]{24}$/;
 const NAT64_DEFAULTS = new Set([
@@ -79,23 +118,34 @@ const NAT64_DEFAULTS = new Set([
 ]);
 
 let _watchOptionsFunc = null;
-const options = {
-  ready: false,
+const DEFAULT_LOCAL_OPTIONS = {
   [REGULAR_COLOR]: "darkfg",  // default immediately replaced
   [INCOGNITO_COLOR]: "lightfg",
+};
+const DEFAULT_SYNC_OPTIONS = {
+  [LOOKUP_PROVIDER]: "bgp.he.net",
+  [CUSTOM_PROVIDER_DOMAIN]: "",
+  [CUSTOM_PROVIDER_IP]: "",
+};
+const options = {
+  ready: false,
   [NAT64_KEY]: new Set(NAT64_DEFAULTS),
+  ...DEFAULT_LOCAL_OPTIONS,
+  ...DEFAULT_SYNC_OPTIONS,
 };
 const optionsReady = (async function() {
   const [localItems, syncItems] = await Promise.all(
       [chrome.storage.local.get(), chrome.storage.sync.get()]);
   for (const [option, value] of Object.entries(localItems)) {
-    if (option == REGULAR_COLOR || option == INCOGNITO_COLOR) {
+    if (DEFAULT_LOCAL_OPTIONS.hasOwnProperty(option)) {
       options[option] = value;
     }
   }
   for (const [option, value] of Object.entries(syncItems)) {
     if (NAT64_VALIDATE.test(option)) {
       options[NAT64_KEY].add(option.slice(NAT64_KEY.length));
+    } else if (DEFAULT_SYNC_OPTIONS.hasOwnProperty(option)) {
+      options[option] = value;
     }
   }
   options.ready = true;
@@ -107,7 +157,7 @@ chrome.storage.local.onChanged.addListener(function(changes) {
   if (!options.ready) return;
   const optionsChanged = [];
   for (const [option, {oldValue, newValue}] of Object.entries(changes)) {
-    if (option == REGULAR_COLOR || option == INCOGNITO_COLOR) {
+    if (DEFAULT_LOCAL_OPTIONS.hasOwnProperty(option)) {
       if (options[option] != newValue) {
         options[option] = newValue;
         optionsChanged.push(option);
@@ -136,6 +186,11 @@ chrome.storage.sync.onChanged.addListener(function(changes) {
       if (!optionsChanged.includes(NAT64_KEY)) {
         optionsChanged.push(NAT64_KEY);
       }
+    } else if (DEFAULT_SYNC_OPTIONS.hasOwnProperty(option)) {
+      if (options[option] != newValue) {
+        options[option] = newValue;
+        optionsChanged.push(option);
+      }
     }
   }
   if (optionsChanged.length) {
@@ -206,4 +261,4 @@ function revertNAT64() {
     // our local Set is used for deduplication.
     _watchOptionsFunc?.([NAT64_KEY]);
   }
-}
+}

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "IPvFoo",
   "manifest_version": 3,
-  "version": "2.29",
+  "version": "2.30",
   "description": "Display the server IP address, with a realtime summary of IPv4, IPv6, and HTTPS information across all page elements.",
   "homepage_url": "https://github.com/pmarks-net/ipvfoo",
   "icons": {

src/manifest/chrome-manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "IPvFoo",
   "manifest_version": 3,
-  "version": "2.29",
+  "version": "2.30",
   "description": "Display the server IP address, with a realtime summary of IPv4, IPv6, and HTTPS information across all page elements.",
   "homepage_url": "https://github.com/pmarks-net/ipvfoo",
   "icons": {

src/manifest/firefox-manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "IPvFoo",
   "manifest_version": 3,
-  "version": "2.29",
+  "version": "2.30",
   "description": "Display the server IP address, with a realtime summary of IPv4, IPv6, and HTTPS information across all page elements.",
   "homepage_url": "https://github.com/pmarks-net/ipvfoo",
   "icons": {