Rebuild whitelist menu onShown instead of navigation or tab activation

ext/src/main.ts

@@ -124,9 +124,9 @@ async function createMenus () {
     });
 
     whitelistMenuId = await browser.menus.create({
-        contexts: [ "browser_action", "tools_menu" ]
+        contexts: [ "browser_action" ]
       , title: _("contextAddToWhitelist")
-      , visible: false
+      , enabled: false
     });
 
     whitelistRecommendedMenuId = await browser.menus.create({
@@ -141,33 +141,42 @@ async function createMenus () {
 }
 
 
-browser.webNavigation.onCommitted.addListener(
+browser.menus.onShown.addListener(info => {
-        details => {
+    // Only rebuild menus if whitelist menu present
-            // Only track navigation in top level contexts
+    // Workaround type issues
-            if (details.frameId === 0) {
+    const menuIds = info.menuIds as unknown as number[];
-                rebuildWhitelistMenus(details.url);
+    if (!menuIds.includes(whitelistMenuId as number)) {
+        return;
     }
-        }
+
-      , { url: [
+    if (!info.pageUrl) {
-            { schemes: [ "http", "https" ]}]
+        browser.menus.update(whitelistMenuId, {
+            enabled: false
         });
 
-browser.tabs.onActivated.addListener(async () => {
+        browser.menus.refresh();
-    const { url } = (await browser.tabs.query({
+        return;
-        active: true
+    }
-      , currentWindow: true
-    }))[0];
 
-    rebuildWhitelistMenus(url);
+    const url = new URL(info.pageUrl);
-});
+    const hasOrigin = url.origin !== "null";
 
-async function rebuildWhitelistMenus (urlString: string) {
-    const url = new URL(urlString);
 
-    await browser.menus.update(whitelistMenuId, {
+    /**
-        visible: url.origin !== "null"
+     * If .origin is "null", hide top-level menu and don't
+     * bother re-building submenus, since we're probably not on
+     * a remote page.
+     */
+    browser.menus.update(whitelistMenuId, {
+        enabled: hasOrigin
     });
 
+    if (!hasOrigin) {
+        browser.menus.refresh();
+        return;
+    }
+
+
     function addWhitelistMenuItem (pattern: string) {
         const menuId = browser.menus.create({
             title: _("contextAddToWhitelistAdvancedAdd", pattern)
@@ -177,6 +186,7 @@ async function rebuildWhitelistMenus (urlString: string) {
         whitelistMenuMap.set(menuId, pattern);
     }
 
+
     for (const [ menuId ] of whitelistMenuMap) {
         // Remove all temporary menus
         if (menuId !== whitelistRecommendedMenuId) {
@@ -188,20 +198,35 @@ async function rebuildWhitelistMenus (urlString: string) {
     }
 
 
-    const recommendedPattern = `${url.origin}/*`;
+    const baseHost = (url.host.match(/\./g) || []).length > 1
+        ? url.host.substring(url.host.indexOf(".") + 1)
+        : url.host;
 
+
+    const patternRecommended = `${url.origin}/*`;
+    const patternSearch = `${url.origin}${url.pathname}${url.search}`;
+    const patternWildcardProtocol = `*://${url.host}/*`;
+    const patternWildcardSubdomain = `${url.protocol}//*.${baseHost}/*`;
+    const patternWildcardProtocolAndSubdomain = `*://*.${baseHost}/*`;
+
+
+    // Update recommended menu item
     browser.menus.update(whitelistRecommendedMenuId, {
-        title: _("contextAddToWhitelistRecommended", recommendedPattern)
+        title: _("contextAddToWhitelistRecommended", patternRecommended)
     });
-
+    whitelistMenuMap.set(whitelistRecommendedMenuId, patternRecommended);
-    whitelistMenuMap.set(whitelistRecommendedMenuId, recommendedPattern);
 
 
     if (url.search) {
-        addWhitelistMenuItem(`${url.origin}${url.pathname}${url.search}`);
+        addWhitelistMenuItem(patternSearch);
     }
 
 
+    /**
+     * Split url path into segments and add menu items for each
+     * partial path as the segments are removed.
+     */
+     {
         const pathTrimmed = url.pathname.endsWith("/")
             ? url.pathname.substring(0, url.pathname.length - 1)
             : url.pathname;
@@ -223,19 +248,16 @@ async function rebuildWhitelistMenus (urlString: string) {
                 index++;
             }
         }
+    }
 
 
-    const baseHost = (url.host.match(/\./g) || []).length > 1
+    // Add remaining menu items
-        ? url.host.substring(url.host.indexOf(".") + 1)
+    addWhitelistMenuItem(patternWildcardProtocol);
-        : url.host;
+    addWhitelistMenuItem(patternWildcardSubdomain);
+    addWhitelistMenuItem(patternWildcardProtocolAndSubdomain);
 
-    // Wildcard protocol
+    browser.menus.refresh();
-    addWhitelistMenuItem(`*://${url.host}/*`);
+});
-    // Wildcard subdomain
-    addWhitelistMenuItem(`${url.protocol}//*.${baseHost}/*`);
-    // Wildcard protocol and subdomain
-    addWhitelistMenuItem(`*://*.${baseHost}/*`);
-}
 
 
 // Google-hosted API loader script