Background script being fired twice chrome extension manifest v3

The error occurs when I open a page from my background script because I would prefer a full popup page rather than a tiny one.

chrome.action.onClicked.addListener(() => {
  const uri = chrome.runtime.getURL("index.html");

  chrome.tabs.query({}, async (tabs) => {
    const existingTab = tabs.find((tab) => tab.url === uri);

    if (existingTab && existingTab.id) {
      await chrome.tabs.update(existingTab.id, {
        active: true,
      });

      return;
    }

    chrome.tabs.create({ url: uri });
  });
});

Everything is fine until I open that index.html page. Now listeners are being fired twice.

I am using chrome.runtime.create({}) to create a port from my content scripts. I have tried many things but none have solved it.

If it matters I am using webpack to build the extension.