Untitled

// manifest
{
  "manifest_version": 3,
  "name": "Site-specific side panel",
  "version": "1.0",
  "description": "Shows how to display the side panel only on google.com using the Side Panel API.",
  "background": {
    "service_worker": "service-worker.js"
  },
  "action": {
    "default_title": "Click to open panel"
  },
  "permissions": ["sidePanel", "tabs", "scripting"],
  "host_permissions": ["<all_urls>"]
}

// service-worker.js
const ORIGIN1 = 'site1';
const ORIGIN2 = 'site2';

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);
  if (url.origin.includes(OTVET_ORIGIN) || url.origin.includes(NMO_ORIGIN)) {
    await chrome.sidePanel.setOptions({
      tabId,
      path: 'sidepanel.html',
      enabled: true
    });
  } else {
    await chrome.sidePanel.setOptions({
      tabId,
      enabled: false
    });
  }
});

// sidepanel.js
const getTitle1 = () => {
  let test = document.getElementsByClassName('myClass1')[0];
  console.log(test);
  return test.innerHTML;
}

const getTitle2 = () => {
  let test = document.getElementsByClassName('myClass2')[0];
  console.log(test);
  return test.innerHTML;
}

chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  chrome.scripting.executeScript({
    target: { tabId: tabs[0].id },
    func: getTitle1
  }, (result) => {
    document.getElementById("tab1_title").innerText = result[0].result;
  });

  chrome.scripting.executeScript({
    target: { tabId: tabs[1].id },
    func: getTitle2
  }, (result) => {
    document.getElementById("tab2_title").innerText = result[0].result;
  });
});

// sidepanel.html
<!doctype html>
<html>
  <head>
    <title>Test side panel extension</title>
  </head>
  <body>
    <h1 id="tab1_title"></h1>
    <h1 id="tab2_title"></h1>
    <script src="./sidepanel.js"></script>
  </body>
</html>