Edge extension side panel populating same data to all tabs

Vignesh kumar Ayyappan 0

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:

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

});

});

2 answers

Q&A Assist

2024-04-04T03:56:44.8133333+00:00

AI generated content. This question contains an answer created with AI from Q&A Assist. Learn more
The issue you are experiencing with your Edge extension's side panel showing the same data for all tabs can be resolved by setting the tabId property in the chrome.sidePanel.setOptions() method to the tabId of the current tab. This will ensure that the side panel is specific to the current tab and does not show the same data for all tabs. Here is an example code snippet that demonstrates this:

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 }); });

Make sure to also include the "tabs" permission in your extension's manifest file to allow access to the chrome.tabs API.

References:

Extensions in the Microsoft Edge sidebar - Use cases for the Sidebar API
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Yu Zhou-MSFT 12,071 Microsoft Vendor

Hi @Vignesh kumar Ayyappan

Do you mean you want to show the current tab URL in your sidebar extension? I don't see the code to get and show current tab URL in your sample. You could refer to the code below:

sidepanel.html

<!DOCTYPE html>
<html>
  <head>
    <title>My Sidebar Extension</title>
  </head>
  <body>
    <h3>Click the button to get the page URL</h3><br>
    <button id="btn1">click me</button>
    <p id="txt1">
    <script src="sidebar.js"></script>
  </body>
</html>

sidebar.js

Listen to onActivated event (fires when the active tab in a window changes) and onUpdated event (fired when a tab is updated) so that different URLs getting populated to different tabs that containing sidepanel.

chrome.tabs.onActivated.addListener(getTabUrl);

chrome.tabs.onUpdated.addListener(getTabUrl)

var btn = document.getElementById("btn1");
btn.addEventListener("click", getTabUrl);

function getTabUrl() {
  chrome.tabs.query({ active: true, lastFocusedWindow: true }, function(tabs) {
    var tab = tabs[0];
    document.getElementById("txt1").innerText = tab.url;
  });
}

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Regards,

Yu Zhou

Vignesh kumar Ayyappan 0 Reputation points

2024-04-05T06:45:15.5366667+00:00

Hi @Yu Zhou-MSFT ,

I can show current page URL, but the issue is current page URL getting populated to all the sidepanels that is opened in other tabs.

Please check the below samples.

Sample 1

Sample 2

If you see the above samples, Sidepanel Sample 1 populating same URL to the Sidepanel Sample 2.

Issue: Edge sidePanel creating single instance for all the tabs. So that whenever data changes in any sidePanel in the browser window is reflecting to all the sidePanels in the browser window.

Expected: I need to show Tab specific data. So, Whenever the data changed in one sidepanel should not reflect in other tab sidepanel.
Yu Zhou-MSFT 12,071 Reputation points Microsoft Vendor

2024-04-05T09:06:43.01+00:00

Hi @Vignesh kumar Ayyappan

I get your point. If you want the URL to change according to different tabs, you need to listen to onActivated event (fires when the active tab in a window changes) and onUpdated event (fired when a tab is updated).

I have edited sidebar.js code in my answer. Please check it. With the new code, you only need to click the button at the first time and the URL will change accordingly in extension page afterwords.
Vignesh kumar Ayyappan 0 Reputation points

2024-04-08T04:47:08.7233333+00:00

Hi @Yu Zhou-MSFT ,

My issue is different like same data getting populated to all the tabs that containing sidepanel. The Sample images shows clearly, like if i try to show the current page URL by clicking the Button in sidepanel it will show current page URL and populate same URL in other tabs sidepanels.

In Sample 1 page URL is "https://angular.io" and same URL is getting populated to other tabs in Sample 2. But Sample 2 page is "https://jquery.com"
Yu Zhou-MSFT 12,071 Reputation points Microsoft Vendor

2024-04-08T05:39:12.7566667+00:00

Hi @Vignesh kumar Ayyappan

Have you tried my edited code sample? It fixes your problem. It will show "https://angular.io" in sample 1 page sidepanel and "https://jquery.com" in sample 2 page sidepanel.

If there's still some misunderstanding, please provide a minimal code snippet which can reproduce your issue. You can provide code of manifest.json, sidepanel.html and your sidepanel js file.

Vignesh kumar Ayyappan 0

Hi @Yu Zhou-MSFT ,

I tried above sample code still facing the issue. I have added my code for your reference.
Please check this Link : https://github.com/w3c/webextensions/issues/588

manifest.json

{
    "manifest_version": 3,
    "name": "Sample Extension ",
    "version": "1.0",
    "description": "Show Page URL of current Page",
    "background": {
      "service_worker": "service-worker.js"
    },
    "action": {
      "default_title": "Click to open panel"
    },
    "permissions": ["sidePanel", "tabs"],
    "commands": {
      "_execute_action": {
        "suggested_key": {
          "default": "Ctrl+B",
          "mac": "Command+B"
        }
      }
    }
  }

service-worker.js

// 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
  });
});

sidepanel.html

<!doctype html>
<html>
  <head>
    <title>Side panel extension</title>
</head>
<body>
    <h1>URL</h1>
    <div>
        <h3 id="pageURL"></h3>
        <p>
            <button type="button" id="clickBtn">Click</button>
        </p>
    </div>
</body>
<script src="./sidepanel.js"></script>
</html>

sidepanel.js


var clickBtn = document.getElementById("clickBtn")
if(clickBtn){
    clickBtn.addEventListener("click", function(e){

        getPageUrl(function(url) {
            if (url) {
                document.getElementById("pageURL").innerText = url;
            } else {
                document.getElementById("pageURL").innerText = "Unable to get page URL";
            }
        });
    })
}

// panel.js

// Function to get the URL of the active tab
function getPageUrl(callback) {
    // Query for the active tab
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
        if (tabs && tabs.length > 0) {
            // Get the URL of the active tab
            const url = tabs[0].url;
            // Invoke the callback function with the URL
            callback(url);
        }
    });
}


var clickBtn = document.getElementById("clickBtn")
if(clickBtn){
    clickBtn.addEventListener("click", function(e){

        getPageUrl(function(url) {
            if (url) {
                document.getElementById("uniqId").innerText = url;
            } else {
                document.getElementById("uniqId").innerText = "Unable to get page URL";
            }
        });
    })
}

// panel.js

// Function to get the URL of the active tab
function getPageUrl(callback) {
    // Query for the active tab
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
        if (tabs && tabs.length > 0) {
            // Get the URL of the active tab
            const url = tabs[0].url;
            // Invoke the callback function with the URL
            callback(url);
        }
    });
}

Yu Zhou-MSFT 12,071 Microsoft Vendor

Hi @Vignesh kumar Ayyappan

You didn't listen to onActivated event and onUpdated event in your sidepanel.js. That's why the URL in sidepanel doesn't change when you switch tabs. Please edit your sidepanel.js code to below:

chrome.tabs.onActivated.addListener(getPageUrl);

chrome.tabs.onUpdated.addListener(getPageUrl);

var clickBtn = document.getElementById("clickBtn")
if (clickBtn) {
  clickBtn.addEventListener("click", getPageUrl);
}

function getPageUrl() {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    if (tabs && tabs.length > 0) {
      const url = tabs[0].url;
      if (url) {
        document.getElementById("pageURL").innerText = url;
      } else {
        document.getElementById("pageURL").innerText = "Unable to get page URL";
      }
    }
  });
}