How to close the Chrome SidePanel?

520 views
Skip to first unread message

Hello World

unread,
Mar 6, 2024, 4:23:54 AMMar 6
to Chromium Extensions
Open SidePanel:
chrome.runtime.onInstalled.addListener(() => {
  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 });
  }
});
------------------------------------------
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') {
     // how to close it, there is no close method
    chrome.sidePanel.close({ windowId: tab.windowId });

  }
});

wOxxOm

unread,
Mar 6, 2024, 7:37:04 AMMar 6
to Chromium Extensions, Hello World
Move the second onClicked listener into sidepanel.js and call the built-in window.close()

woxxom

unread,
Jun 14, 2024, 1: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

unread,
Jun 14, 2024, 4: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?



On Wednesday, March 6, 2024 at 6:37:04 AM UTC-6 wOxxOm wrote:

Mahdi Mallaee

unread,
Jun 14, 2024, 6:27:30 AMJun 14
to Chromium Extensions, Mani Lingolu, wOxxOm, Hello World
You could try something like this

    // opening side panel
    await chrome.sidePanel.setOptions({ enabled: true, tabId: tab.id, path: "sidepanel.html" })
    await chrome.sidePanel.open({ tabId: tab.id })

    // 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