how to open a chrome extension in new window

40 Views Asked by At

I am having trouble opening my Chrome extension in a new window when I click the icon. I have tried multiple solutions, but none have worked so far. I have checked various forums and websites for answers, but none of the suggested solutions seem to be helpful. Additionally, I have encountered an error and a warning, which may be related to the problem.

Error:Uncaught TypeError: Cannot read properties of undefined (reading 'onClicked') Warning: Service worker registration failed. Status code: 15

manifest.json

{
    "manifest_version": 3,
    "name": "TimeTracker Pomodoro",
    "description": "Boost productivity with a Pomodoro timer and task manager in one Chrome Extension",
    "version": "1.0",
    "icons": {
      "16": "images/icon-16.png",
      "32": "images/icon-32.png",
      "64": "images/icon-64.png",
      "128": "images/icon-128.png"
    },
    "permissions": ["tabs", "activeTab", "scripting",],
    "background": {
      "service_worker": "background.js"
    },
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["script/content.js"]
      }
    ],
    "options_ui": {
      "page": "options.html"
    }
        }
        

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.windows.getAll({ populate: true }, function(windows) {
    var existingWindow = null;
    for (var i = 0; i < windows.length; i++) {
      var tabs = windows[i].tabs;
      for (var j = 0; j < tabs.length; j++) {
        if (tabs[j].url == chrome.runtime.getURL("popup/popup.html")) {
          existingWindow = windows[i];
          break;
        }
      }
      if (existingWindow) {
        break;
      }
    }
    if (existingWindow) {
      chrome.windows.update(existingWindow.id, { focused: true });
    } else {
      chrome.windows.create({
        url: chrome.runtime.getURL("popup/popup.html"),
        type: "popup",
        width: 900,
        height: 600
      });
    }
  });
});

I've defined an event listener in my background.js to handle the extension icon click event. When you click the icon, the code checks if a window with a specific URL is open. If it's open, the code focuses on that window. If not, it creates a new window with the specified URL and dimensions. This code follows the requirements of Manifest V3 and seems correctly structured to me but I get an error and none of any existing answer helps.

0

There are 0 best solutions below