sidePanel API: sidePanel.close() and sidePanel.toggle()

[fregante]

The sidePanel can be opened via chrome.sidePanel.open() but the API isn't symmetrical, there is no .close() API.

It would also be useful (maybe even more so) to just .toggle() the sidebar instead, using any trigger other than the action click, for example:

• menus.onClick
• any <button> added on the page
• keyboard shortcuts
• command palettes in the content script

Alternative to chrome.sidePanel.close() (✅ it works)

As @dotproto pointed out, the sidebar can close itself via window.close(), so in other contexts you would have to set up messaging.

// background.js
function open () {
  chrome.sidePanel.open()
}
function close() {
  chrome.runtime.sendMessage('closeSidePanel');
}

// sidepanel.js
chrome.runtime.onMessage.addListener(message => {
  // Might not be as easy if there are multiple side panels open
  if (message === 'closeSidePanel') {
    window.close();
  }
})

You can also use chrome.sidePanel.setOptions({enabled: false}) but that has undesired side effects (it removes it from the side panels list)

Alternative to chrome.sidePanel.toggle() (⛔️ it doesn't work)

This is more complicated because there's no easy way to determine whether the sidebar is open, so you'd have to add another listener and hope that this delay won't cause you to lose the user gesture permission:

Warning

I just tested this and it doesn't work: Error: sidePanel.open() may only be called in response to a user gesture

function isSidePanelOpen() {
  try {
    return await chrome.runtime.sendMessage('isSidePanelOpen');
  } catch {
    return false
  }
}
async function toggle() {
  if (await isSidePanelOpen()) {
    chrome.runtime.sendMessage('closeSidePanel');
  } else {
    chrome.sidePanel.open()
  }
}

// sidepanel.js
chrome.runtime.onMessage.addListener(message => {
  // Might not be as easy if there are multiple side panels open
  if (message === 'isSidePanelOpen') {
    return true
  }

  if (message === 'closeSidePanel') {
    window.close();
  }
})

[sublimator]

The sidePanel api is a bit weird really!
It's actually complicated to even react to the damn action icon on-click handler to toggle the sidebar. I've switched to using openPanelOnContextMenuClick, but it's not as versatile.
But you can trigger it on ANY keyboard event??
What's the point

[Mr-haili]

Hello @fregante, thank you for your solution.

Based on your solution, I think I've found a simpler way to implement the side panel toggle control.
Here's a simple trick. 😁

type OpenOptions = {
  tabId: number;
  windowId?: number;
};

const openSidePanel = async (payload: OpenOptions): Promise<void> => {
  await chrome.sidePanel.open(payload);
};

const closeSidePanel = async () => {
  // NOTE:  don't pass the tabId, or this call may not work.
  await chrome.sidePanel.setOptions({ enabled: false });
  await chrome.sidePanel.setOptions({ enabled: true });
};

[fregante]

@Mr-haili Note that if you do use tabId when opening, closeSidePanel will close the sidePanel in every tab.

---

My toggle function currently looks something like this:

function toggle () {
  chrome.sidePanel.open()
  chrome.runtime.sendMessage('closeSidePanel')
}

• if the sidebar is open:
  • chrome.sidePanel.open will do nothing
  • the "close" message will reach it to close it
• if the sidebar is closed
  • chrome.sidePanel.open will open it
  • the message will fail to reach the sidebar because it does not open that quickly

This is not ideal because it's the definition of a race condition.