Sidebars and Sidepanels
Someone asked me about sidebar-related features for Control Panel for Twitter, so I had a quick look and found a bit of a cross-browser mess.
The sideBarnel API
Firefox and Opera implement a sidebarAction API for extensions, whereas Chrome has a completely different (and relatively-new?) sidePanel API. sidePanel was also present in Edge, but the browser hard-crashed when I tried to call it from an extension’s service worker.
They also differ in terms of how restrictive they are (browser versions at the time of writing in parentheses):
- Chrome (114) just shows you a blank box if you try to use the
sidePanelAPI to display a website in it - Firefox (115) already has some extensions which let you load any website into the sidebar, so I’m assuming that’s supposed to be allowed
- Edge (114) has made the side panel a more significant feature than Chrome, including the ability to add a shortcut for any website
Busting Out of Chrome’s Side Panel Jail
Chrome’s documentation for side panels seems to indicate that they should only ever have content from their extension:
The path to the side panel HTML file to use. This must be a local resource within the extension package.
…and sure enough, if you try to use the chrome.sidePanel API to display a site:
await chrome.sidePanel.setOptions({path: 'https://twitter.com'})
…you just get nothing in the side panel.
However, I noticed Google had carved out a little bit of privileged access for itself. If you click on a Google search result, you get a little G icon in the address bar and a “google.com” item in the menu, using either of which will put the search you did in the side panel:
That’s not happening via an extension, it’s just putting a website in the side panel, which is exactly I wanted to do!
Installing an MV3 extension to use the chrome.sidePanel API directly in the developer console via its service worker, I discovered you can take advantage of the privilege Google gives itself. If you display Google in the side panel first, you can subsequently put any URL you want in there and it’ll work:
await chrome.sidePanel.setOptions({path: 'https://google.com'})
await chrome.sidePanel.setOptions({path: 'https://twitter.com'})