I am creating sidepanel based extension for browsers(Chrome & Edge). I am able to create multiple instance sidepanel for chrome (Different contents populated for different tabs). But unlike chrome, In Edge same content getting populated to all tabs.
I am able to create multiple instance sidepanel for chrome (Different contents populated for different tabs). Like in chrome, In Edge browser based on tab I need to populate content into sidepanel.
Steps I followed for creating sidepanel:
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
});
});```
Note: Same code will work for both browsers(Chrome & Edge) for opening sidepanel. But unlike chrome,Edge Browser creating single instance of sidepanel for all tabs. So same data is populating for all tabs sidepanel.