browser.devtools is undefined in Chrome 144

[ferenc-a]

Describe the bug

I was using browser.devtools.panels... successfully in Firefox and in Chrome 143. However my code broke with Chrome 144, and according to error messages on the console, browser.devtools is undefined.
Here's what I get logging browser in Chrome 143 (couldn't manage to copy to clipboard, sorry):

And here's for Chrome 144:

Reproduction

As stated above.

Steps to reproduce

No response

System Info

System:
    OS: Windows 11 10.0.26200
  Binaries:
    Node: 22.15.1
    npm: 10.9.2
  Browsers:
    Chrome: 144.0.7559.60

Used Package Manager

npm

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[aklinker1]

Hmm, the browser import is just an alias for chrome. Not sure why 144 would effect this.

[thclaude]

Same here (with wxt 0.20.8 atm)

The strangest thing, given that browser is just an alias, is that when I replace browser.devtools.panels.create by chrome.devtools.panels.create, devtools tab is added

[ferenc-a]

There are some issues on the Chromium issue tracker about this, some mentioning the polyfill. The discussions there are a bit too dense for me, but here are ones are found that could be useful: https://issues.chromium.org/issues/475255714, https://issues.chromium.org/issues/474134785, https://issues.chromium.org/issues/470092691. The query I used: extension devtools 144.

[thclaude]

I just tested it with a Brave version running on Chromium 143.xxx.
And the problem seems to come from this:

wxt/packages/browser/src/index.mjs

Lines 2 to 4 in 606fd31

	export const browser = globalThis.browser?.runtime?.id
	? globalThis.browser
	: globalThis.chrome;

Prior to version 144, the browser was undefined in Chromium and this is no longer the case. This means that globalThis.browser?.runtime?.id is true, and so we retrieve globalThis.browser instead of globalThis.chrome, but globalThis.browser does not have all the properties, including devtools.

Debugging

Chromium v143

---

Chromium v144

Chromium v144 - globalThis.browser

[Igloczek]

if someone is looking for a temporary workaround

1. create browser.ts somewhere in the project

export const browser =
  import.meta.env.FIREFOX || import.meta.env.SAFARI
    ? globalThis.browser
    : globalThis.chrome

2. alias this new file in wxt.config.ts - remember to replace <adjustThis> with correct path to the file from 1.

export default defineConfig({
  vite: () => ({
    resolve: {
      alias: {
        "wxt/browser": new URL("./<adjustThis>/browser.ts", import.meta.url)
          .pathname,
      },
    },
  })
})

[thcl-odoo]

thanks for the workaround @Igloczek !

[ferenc-a]

Seems fixes in the latest Chrome 144.0.7559.97.
I'll close this in a couple of days, if there's no further activity.