How to close the Chrome SidePanel?
429 views
Skip to first unread message
Hello World
Mar 6, 2024, 10:23:54 AMMar 6
to Chromium Extensions
Open SidePanel:
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: 'openSidePanel',
title: 'Open SidePanel',
chrome.contextMenus.create({
id: 'openSidePanel',
title: 'Open SidePanel',
contexts: ['all']
});
});
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === 'openSidePanel') {
// This will open the panel in all the pages on the current window.
chrome.sidePanel.open({ windowId: tab.windowId });
}
});
});
});
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === 'openSidePanel') {
// This will open the panel in all the pages on the current window.
chrome.sidePanel.open({ windowId: tab.windowId });
}
});
------------------------------------------
Close SidePanel:
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: 'closeSidePanel',
title: 'Close SidePanel',
contexts: ['all']
});
});
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === 'closeSidePanel') {
chrome.contextMenus.create({
id: 'closeSidePanel',
title: 'Close SidePanel',
contexts: ['all']
});
});
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === 'closeSidePanel') {
// how to close it, there is no close method
chrome.sidePanel.close({ windowId: tab.windowId });
}
});
chrome.sidePanel.close({ windowId: tab.windowId });
}
});
wOxxOm
Mar 6, 2024, 1:37:04 PMMar 6
to Chromium Extensions, Hello World
Move the second onClicked listener into sidepanel.js and call the built-in window.close()
woxxom
Jun 14, 2024, 7:58:48 AMJun 14
to Mani Lingolu, Chromium Extensions, Hello World
> I was trying to do window.close, but it also closing other sidepanels which are opened in other tabs
Since the same code runs in all side panels, you need to add a
condition to close the one you want. For example, if it's tabId of
the associated tab, you can pass it as a parameter when creating
the panel:
chrome.sidePanel.setOptions({tabId, enabled: true, path:
'sidepanel.html?tabId=' + tabId});
Then it'll be available inside the panel:
const myTabId = +new URLSearchParams(location.search).get('tabId');
Then in your message listener you'll compare this myTabId to the tabId in the message.
On 14-Jun-24 03:28, Mani Lingolu wrote:
I am trying implement sidebar close for our extension and I noticed that as close api doesn't exist on sidepanel feature yet, trying for other approaches to close it.
For me, I want to open SidePanel for each tab independently which is working now (based on url/domain check), but during closing the side planel, I was using message bus to listen for close event in sidepanel.js
and I was trying to do window.close, but it also closing other sidepanels which are opened in other tabs
any suggestions?
Mani Lingolu
Jun 14, 2024, 10:46:53 AMJun 14
to Chromium Extensions, wOxxOm, Hello World
I am trying implement sidebar close for our extension and I noticed that as close api doesn't exist on sidepanel feature yet, trying for other approaches to close it.
For me, I want to open SidePanel for each tab independently which is working now (based on url/domain check), but during closing the side planel, I was using message bus to listen for close event in sidepanel.js
and I was trying to do window.close, but it also closing other sidepanels which are opened in other tabs
any suggestions?
For me, I want to open SidePanel for each tab independently which is working now (based on url/domain check), but during closing the side planel, I was using message bus to listen for close event in sidepanel.js
and I was trying to do window.close, but it also closing other sidepanels which are opened in other tabs
any suggestions?
On Wednesday, March 6, 2024 at 6:37:04 AM UTC-6 wOxxOm wrote:
Mahdi Mallaee
Jun 14, 2024, 12:27:30 PMJun 14
to Chromium Extensions, Mani Lingolu, wOxxOm, Hello World
You could try something like this
// opening side panel
// closing side panel
await chrome.sidePanel.setOptions({ enabled: false, tabId:tab.id })
I tested this with a default path for sidepanel and could not get it to work so it seems if you want to do it individually you should remove the default path in manifest file
Reply all
Reply to author
Forward
0 new messages