Sidebar API for extensions is now live!

[Gurjeet-msft]

Hello GitHub Fam!

Microsoft Edge Add-Ons has now introduced a Sidebar API for extensions.

By using the Sidebar API for extensions, you can enhance the browsing experience by enabling users to view additional information alongside the main content of a webpage.

The sidebar is a persistent pane located on the side of the browser, which coexists with the primary content of the browser. The sidebar reduces the need to constantly switch between tabs, resulting in a more productive browsing experience.

To learn more about this API, please refer to the documentation below:

Extensions in the Microsoft Edge sidebar - Microsoft Edge Development | Microsoft Learn

Your feedback and suggestions are always welcome here.

[stefanvd]

Hi there,

On what Microsoft Edge version is this live?
I do see not this API support in the Microsoft Edge stable v115.0.1901.183.

Thanks,
Stefan

[Bhuvana-Priya]

Hi @stefanvd , Sidebar is now live on Edge Canary and in stable for a small percentage. It will be available in Stable for all in the coming weeks

[stefanvd]

@Bhuvana-Priya I am testing the Edge Canary Version 117.0.2002.0 (Official build) Canary(arm64). My SidePanel browser extension API still does not work in Edge Canary.

Thanks,
Stefan

[stefanvd]

@Bhuvana-Priya Any updates? I still see it not in Edge Canary 118.0.2060.0
Or is it a flag?

Thanks,
Stefan

[Bhuvana-Priya]

Hi @stefanvd,

We will look into this and let you know as soon as possible.

Thank you

[scottkuhl]

I am trying to get Plasmo side panels working in Edge but so far I am not seeing this feature available in any version of Edge. The extension is working in Chrome and Firefox.

Any update on when this will be available? Or how to force support through a flag?

[Gurjeet-msft]

@scottkuhl We are looking into this and will let you know as soon as possible.

[empedia]

Any update on this? Which versions should I expect to have sidebar extensions enabled? It is far from clear to me.

[scottkuhl]

It seems it is far from clear to the team as well. Two promises to let us know what is going on with no update.

[Bhuvana-Priya]

Hi All,

Sidebar should work for Edge Canary version 115+ and this has bug has been reported to our team. We will let you know any update as soon as possible.

[scottkuhl]

I can confirm that this does work in Canary. Thank you for the update.

[stefanvd]

Finally, I can confirm it too in Canary version 119.0.2124.0.

See my Note Sidebar for Microsoft Edge extension
https://microsoftedge.microsoft.com/addons/detail/note-sidebar-for-microsof/ohmdkgilimiajhamfpkejiileccnmhap

[ali-kamalizade]

Hey everyone, we have noticed two issues with the sidePanel functionality in Edge (MacOS; version 119) which are not present in Google Chrome:

• The side panel is reloaded when you switch browser tabs. This disturbs the user flow as users use our extension on multiple pages (e.g. they lose their search query).
• Minor issue: keyboard shortcuts such as copy & paste don’t seem to work inside the side panel. Pasting with the right click menu works as well, though.

[Xheldon]

My extension has the same problem. After using the official example code, once the user switches to another tab, the sidebar disappears and it does not automatically open again when switching back.

So when I tried to reopen it using this interface, I got the following error（only in Edge):

Uncaught (in promise) Error: `sidePanel.open()` may only be called in response to a user gesture.

Here is my code in background.js:

chrome.tabs.onActivated.addListener(async (activeInfo) => {
    const tabId = activeInfo.tabId;
    const tab = await chrome.tabs.get(tabId);
    if (!tab.url) return;
    const url = new URL(tab.url);
    if (url.origin === 'https://www.notion.so') {
        await chrome.sidePanel.setOptions({
            tabId,
            path: 'sidepanel.html',
            enabled: true
        });
        // EDGE-ONLY: just edge browser has this problem, so I add this code blow, but I got the error and it's not work
        await chrome.sidePanel.open({
            tabId,
        });
    } else {
        // Disables the side panel on all other sites
        await chrome.sidePanel.setOptions({
            tabId,
            enabled: false
        });
    }
});

Please note, on Chrome, even without that piece of EDGE-ONLY code, it still works as expected: the sidebar automatically closes when switching to non-notion.so tabs, and the sidebar remains in its pre-switch open state when switching back to a notion.so tab.
However, on Edge, the sidebar will close when switching to a non-notion.so tab (as expected), but when switching back to a notion.so tab, the sidebar will not remain open, and it has to be manually reopened at this point.
Even if I add that EDGE-ONLY code, it still doesn't work and also throws an error.

@Gurjeet-msft Any idea？

[Xheldon]

In addition to what has been mentioned, as @ali-kamalizade said, the shortcut for paste on the keyboard is still not working.
My Edge version is 123.0.2420.53，Mac with x84_64 and M1 have same problem（I test two computer）

[vigneshayyappan-dev]

I have created edge extension with side panel to show tab specific data but same data getting reflected to all the tabs containing side panel.

Expected : Side panel should show tab specific data.

Example: I have created Sample Extension that displays URL of the page in side panel.

Issue: Seeing same URL in all the tabs side panel.

Expected Samples:

Current Samples:

Code samples

Steps, I followed to implement side panel follows below,

Step 1: "permissions": ["sidePanel", "tabs"]

Step 2: Allows users to open the side panel by clicking on the action toolbar icon

chrome.sidePanel

.setPanelBehavior({ openPanelOnActionClick: true })

.catch((error) => console.error(error));

chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => {

if (!tab.url) return;

const url = new URL(tab.url);

await chrome.sidePanel.setOptions({

tabId, 

path: 'sidepanel.html', 

enabled: true 

});

});

[prithamkasiMSFT]

Hi Vignesh,

Thank you for bringing this to our attention. We are currently looking into this and will get back to you as soon as we.

[vigneshayyappan-dev]

Note: This is working as expected in Chrome.

[prithamkasiMSFT]

Hi Vignesh,

Could you please send the code for the sidepanel.html used to get the URL of the page? You can email the same to our email at, [email protected]

[vigneshayyappan-dev]

Hi prithamkasiMSFT,

I have sent sample code for your reference to the above-mentioned email. Please verify it once.

[twschiller]

I've added a ticket in the w3c webextensions working group to clarify intended per-tab sidePanel behavior on creating a new tab/navigating: w3c/webextensions#588

Could someone from the MS Edge team clarify if the difference with Chrome is an expected difference or a bug?