Problem: I'm currently facing a problem. which is that when I click the extension icon, a small popup appears below it in addition to the new window that opens. This small popup is unwanted and not part of my intended functionality.
The image shows a Chrome extension icon with a small popup below it. This undesired popup is not part of the intended behaviour and is causing issues.
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"
},
"action": {
"default_popup":"popup/popup.html",
"default_icon": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"64": "images/icon-64.png",
"128": "images/icon-128.png"
}
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["script/content.js"]
}
],
"options_ui": {
"page": "options.html"
}
}
popup.js
document.addEventListener("DOMContentLoaded", function () {
// Check if a window from your extension is already open
chrome.windows.getAll({ populate: true, windowTypes: ["popup"] }, function (windows) {
const extensionWindows = windows.filter((win) => {
return win.tabs.some((tab) => {
return tab.url.endsWith("popup.html");
});
});
if (extensionWindows.length > 0) {
// A window from your extension is already open, bring it to focus
chrome.windows.update(extensionWindows[0].id, { focused: true });
} else {
// Open a new Chrome window when the extension icon is clicked
chrome.windows.create({
url: "popup/popup.html",
type: "popup",
width: 800,
height: 400,
left: Math.round(screen.availWidth / 2 - 300),
top: Math.round(screen.availHeight / 2 - 200),
});
}
});
});
popup.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
welcome to Productivity
<div id="popup-container">
<!-- Your Pomodoro timer, to-do list, and other UI elements go here -->
</div>
<script src="popup.js"></script>
</body>
</html>
Note: background.js , options.html and content.js are empty.
I clicked on the Chrome extension icon, hoping to open a new window. However, along with the new window, a small popup appeared below the extension icon. This popup was not part of what I wanted to happen, and it's causing an issue because it's not the expected behavior.