chrome.action.onClick handler being called multiple times

[Cadec]

I've been stuck on this for a few days. We are upgrading our chrome extension to manifest v3 and getting some unwanted behavior, presumably due to using a service worker. Hoping for some help.

We don't use the standard "popup". Instead, we open a new window (of type "popup") upon the user clicking the browser's icon. This works great, except, when the icon is clicked more than once without closing the other newly created windows, we get a sort of exponential number of windows created. For example, the first time, we get one window created (as expected). The second time, we get two windows created (for a total of 3), etc.

Background.js (our service worker)

chrome.action.onClicked.addListener((tab) => {

   chrome.windows.create({

      url: chrome.runtime.getURL(`index.html?       currentTabId=${tab.id}`),

      type: 'popup'

   })

})

App.js , which we load into our newly created window from Background.js

const port = chrome.runtime.connect(chrome.runtime.id)

port.onMessage.addListener(onMessageListener) // etc etc

We tried this in Background.js (saw it mentioned somewhere 🤷🏼‍♀️)

chrome.action.onClicked.removeListener(handler)

chrome.action.onClicked.addListener(handler)

We tried checking to see if we already had a window open before registering the listener:

async function getOpenWindow() {

const openPopupWindows = await chrome.windows.getAll({

populate: true,

windowTypes: ['popup'],

})

return openPopupWindows.find((openWindow) =>

openWindow.tabs?.some((tab) => tab.url?.includes(chrome.runtime.id))

)

}

getOpenWindow().then((openWindow) => {

if (!openWindow) {

chrome.action.onClicked.addListener(actionOnClickedListener)

}

})

This seemed to be promising, but when the service worker is inactive, clicking on the icon doesn't open the window on the first try, but does on the second try (not ideal).

Obviously it seems like we are adding more chrome.action.onClicked listeners each time we open the extension. But how can we prevent this? 

Any suggestions would be great 🙏🏼 We just want a single window to open up each time the icon is clicked.

Thanks in advance!

[wOxxOm]

Usually there's no need to unregister or check the listeners, you just need to register a chrome event properly i.e. when the background script starts at the first turn of the JS event loop. The problem may easily be yet another bug in ManifestV3, but it sounds similar to one of these common mistakes:

1. loading background.js (or any script that registers a chrome event listener) inside another page/file e.g. in index.html
2. using chrome.runtime.onMessage (or chrome.runtime.onConnect) to launch the logic (e.g. open a window) in your currently open pages and then calling chrome.runtime.sendMessage or chrome.runtime.connect without properly skipping the work (e.g. by introducing a state variable/storage).

Maybe you can upload the entire extension for us to test?

[Cadec]

Thank you for you response, wOxxOm! I can't upload the entire extension, but I've created a small/similar version which experiences the exact same issue. I would love it if you could take a look. 

https://drive.google.com/drive/folders/1IJIxnIpM9IumIZmvXqRmTrZXw5CsW0jg?usp=sharing

[Pavel Aronovich]

chrome.action.onClicked.addListener(actionOnClickedListener)

This code should be specified in the root of the background script.

You have it called every time you call getOpenWindow.

понедельник, 27 марта 2023 г. в 21:02:47 UTC+3, Cadec:

[Cadec]

Thanks so much for your input, Pavel! Not sure if you had a chance to check out my extension files that I added a link to, but in that case, chrome.action.onClicked.addListener(listener) is indeed specified in the root of the background script. And I am experiencing the same problem.

My code with getOpenWindow() was a workaround to the issue, but obviously it was not a great one.

Thank you! 🙏🏼

Carey

[Cadec]

You know what, I misspoke. Huge apologies. This doesn't seem to be specific to MV3. I just tested moving back to MV2 using similar code and also getting the same unwanted behavior of multiple windows.

Here is a link to the files for V2.

And here is a link to the files for V3.

Again, when clicking the extension icon, it first opens one window as expected. Upon clicking the icon again, it opens two new windows for a total of three. And so on.

What am I doing wrong? I'd like to just open a single window on each click. 

[Pavel Aronovich]

Why don't you use the popup window described in the manifest in the action section? It will open automatically.

среда, 29 марта 2023 г. в 03:33:01 UTC+3, Cadec:

[Carey Cade]

Thanks Pavel! We want a separate window to open so that it can be moved around the screen and resized by the user. 

[Cadec]

Well I have good news! I figured out what was wrong. During the production build, my /static/js/background.js script was being injected into my index.html, which was creating the double listeners. 🤦🏼‍♀️ Of course it was injected. Should have caught that one.

After running the build, I can manually remove that line in index.html and things work as expected. Ideally, I would not have that chunk injected into index.html at all, but can't figure out how to update my craco.config.js file to prevent that successfully. 

Anyway, happy that it's mostly resolved! ✅ Thanks everyone for their input!