Opening the sidePanel on the current active tab (not visible in the rest)

Question

I'm in a bit of a pickle, been wrestling with this for the past few hours... and can't seem to get it to work; so what am I trying to achieve?

When the action is clicked, I expect the sidePanel to open on the current active tab; and only on the current active tab, my code:

manifest

{
  "name": "xyz",
  "version": "0.1",
  "manifest_version": 3,
  "description": "xyz",
  "background": {
    "service_worker": "serviceworker.js"
  },
  "icons": {
    "64": "/static/img/favicon-xyz-black.png"
  },
  "side_panel": {
    "default_path": "sidebar.html"
  },
  "permissions": [
        "contextMenus",
        "storage",
        "sidePanel",
        "activeTab",
        "scripting",
        "tabs"
 ],
  "host_permissions": ["https://*/*"]
}

background - service worker

What has been tried:

chrome.action.onClicked.addListener(async (tab) => {
    chrome.sidePanel.setOptions({
      tab.id,
      path: 'sidebar.html',
      enabled: true,
    });

    chrome.sidePanel.open({
      tab.id,
    });
});

The above still opens the sidePanel for all tabs unfortunately, is there any way to pin the sidePanel to one tab?

Answer 1

I managed to get it to work with the below in the serviceworker (background):

let initialActiveTabId = null;

// Set the panel behavior to open on action click
chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true }).then(() => {
    // Listen for messages from the side panel when it is opened
    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
        if (request.action === 'sidePanelOpened') {
            // Set the initial active tab ID when the side panel is first opened
            if (initialActiveTabId === null) {
                chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
                    if (tabs.length > 0) {
                        initialActiveTabId = tabs[0].id;
                        openSidePanel(initialActiveTabId);
                    }
                });
            }
        }
    });
});

// Function to open the side panel for a specific tab
function openSidePanel(tabId) {
    chrome.sidePanel.setOptions({
        tabId: tabId,
        path: 'sidebar.html',
        enabled: true
    });
}

// Function to close the side panel for a specific tab
function closeSidePanel(tabId) {
    chrome.sidePanel.setOptions({
        tabId: tabId,
        enabled: false
    });
}

// Listen for tab activation events
chrome.tabs.onActivated.addListener(function(activeInfo) {
    if (initialActiveTabId !== null) {
        if (activeInfo.tabId === initialActiveTabId) {
            openSidePanel(activeInfo.tabId);
        } else {
            closeSidePanel(activeInfo.tabId);
        }
    }
});

and

chrome.runtime.sendMessage({ action: 'sidePanelOpened' });

In my side panel script

This works, but unfortunately closes certain things such as port connection etc..

Answer 2

i don't get your clear intention but this might help, I just add action to defualt the pop_up-html for the specific tab

   "action": {
  "default_popup": "sidebar.html"
},

and also i just added tabId parameter as they have built in broswers to get a specific tab of a browser

chrome.action.onClicked.addListener(async (tab) => {
await chrome.sidePanel.setOptions({
  tabId: tab.id,
    path: 'sidebar.html',
    enabled: true
});

await chrome.sidePanel.open({
    tabId: tab.id
  });

});