Add "browser_action": {} to manifest if you want to use chrome.browserAction.onClicked in background.ts

[franciscohanna92]

I'm adding this here just because I think someone might find it useful (specially someone not experienced with chrome extensions as myself). Feel free to delete if you think is not necessary.

---

While trying to open a new tab after clicking the extension icon using the BGSW, I encountered an error:

TypeError: Cannot read properties of undefined (reading 'onClicked')
    at Object.<anonymous> (background.ts:9:17)
    at newRequire (index.js:72:24)
    at localRequire (index.js:85:35)
    at Object.<anonymous> (index.ts:1:1)
    at newRequire (index.js:72:24)
    at index.js:123:5
    at runtime-f23755b9837877eb.js:1:1
    at esmodule-helpers.js:31:1

My background.ts:

export {}

try {
  chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.create({ url: "https://example.com" })
  })
} catch (error) {
  console.error(error)
}

To solve it, I had to add "browser_action": {} to the manifest section in the package.json:

{
  // ...
  "manifest": {
    "permissions": [
      "activeTab",
      "scripting"
    ],
    "browser_action": {} // add this line
  }
}

Then, it just worked. I found the solution here.

[RobinLbt]

For some reason, even with "browser_action": {} in my package.json I still get the error

I don't have a background.js file at the root of the /src folder, but a index.ts at src/background/index.ts

Any idea why @franciscohanna92 ?

[louisgv]

You should use the action API instead, browser_action is deprecated.

[franciscohanna92]

@RobinLbt the problem ended up being that chrome.browserAction.onClicked is deprecated as @louisgv says. You should use chrome.action.onClicked.