fix(firefox): calling non-existing browser.action

entrypoints/background.ts

@@ -41,11 +41,31 @@ export default defineBackground(() => {
     128: "icon/icon-128.png",
   } as const;
 
+  /**
+   * The toolbar button: `action` in MV3 (Chrome), `browserAction` in MV2
+   * (Firefox), where `browser.action` is undefined. WXT's `browser` is the
+   * native object and does not alias one to the other.
+   */
+  const toolbarAction = browser.action ?? browser.browserAction;
+
+  /**
+   * Cosmetic only, so it never throws: it runs in the middle of routing
+   * messages, which a failure here (e.g. the tab closed meanwhile) must not
+   * cut short.
+   */
   function updateIcon(tabId: number, variant: "colored" | "gray") {
-    void browser.action.setIcon({
-      tabId,
-      path: variant === "colored" ? COLORED_ICONS : GRAY_ICONS,
-    });
+    try {
+      toolbarAction
+        .setIcon({
+          tabId,
+          path: variant === "colored" ? COLORED_ICONS : GRAY_ICONS,
+        })
+        .catch(() => {
+          /* The tab is gone */
+        });
+    } catch (error: unknown) {
+      console.warn("[background] could not set the toolbar icon:", error);
+    }
   }
 
   // === Ephemeral routing state (rebuilt on reconnection) ===

entrypoints/popup/index.html

@@ -5,6 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>TanStack Query DevTools</title>
     <meta name="manifest.type" content="browser_action" />
+    <!-- Gray until the background finds a QueryClient on the tab. Set here
+         rather than in wxt.config.ts: WXT drops `action.default_icon` from
+         the config when it builds the MV2 (Firefox) browser_action. -->
+    <meta
+      name="manifest.default_icon"
+      content='{"16": "icon/icon-16-gray.png", "48": "icon/icon-48-gray.png", "128": "icon/icon-128-gray.png"}'
+    />
     <link rel="stylesheet" href="~/assets/tailwind.css" />
     <link rel="stylesheet" href="~/assets/hljs-theme.css" />
   </head>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tanstack-query-chrome-devtools",
   "private": true,
-  "version": "1.1.0",
+  "version": "1.1.1",
   "type": "module",
   "packageManager": "pnpm@11.20.0",
   "description": "TanStack Query DevTools",

wxt.config.ts

@@ -9,7 +9,10 @@ export default defineConfig({
     browser_specific_settings: {
       gecko: {
         id: "tanstack-query-devtools@borysov.dev",
-        strict_min_version: "112.0",
+        // First version that honors `world: "MAIN"` on manifest content
+        // scripts; older ones run sync.content.ts isolated, where it cannot
+        // see the page's __TANSTACK_QUERY_CLIENT__
+        strict_min_version: "128.0",
       },
     },
     version: "1.1.0",
@@ -22,14 +25,9 @@ export default defineConfig({
       "48": "icon/icon-48.png",
       "128": "icon/icon-128.png",
     },
-    action: {
-      default_icon: {
-        "16": "icon/icon-16-gray.png",
-        "48": "icon/icon-48-gray.png",
-        "128": "icon/icon-128-gray.png",
-      },
-      default_title: "TanStack Query DevTools",
-    },
+    // The toolbar button's default icon and title are set on the popup
+    // entrypoint (entrypoints/popup/index.html), which WXT applies to both
+    // `action` (MV3) and `browser_action` (MV2).
   },
   vite: () => ({
     plugins: [tailwindcss()],