My iframe extension cannot be opened or closed after being placed on the web page for a while

[Clancy Lin]

My extension function changed from the original default_popup to injecting an iframe. However, I found a problem. When the web page remains open for an extended period, my action icon fails to respond, regardless of how I press it, and there is no other error message I can monitor. This error has been bothering me for a week or so, please help me!

I checked that it's not a web discard and also tried the heartbeat mechanism.

I hope it can be turned on and off robustly.

injectIframe and removeIframe in <background.js> below will send message to contentScript.js

<background.js>
    let activeTabId = null;
    // When the icon is clicked, inject or remove the iframe
    chrome.action.onClicked.addListener(async (tab) => {
      if (tab.url && tab.url.startsWith("http")) {
        const iframeStatus = await getIframeStatus(tab.id);
        if (iframeStatus?.injected || iframeStatus === undefined) {
          chrome.tabs.sendMessage(tab.id, { action: "removeIframe" });
        } else {
          tryInjectIframe(tab.id);
        }
      } else {
        console.error("Cannot execute extension on non-HTTP URL.");
      }
    });

    // Retry mechanism for injecting iframe
    async function tryInjectIframe(tabId, retries = 10) {
      while (retries > 0) {
        try {
          await chrome.tabs.sendMessage(tabId, { action: "injectIframe" });
          return;
        } catch (error) {
          if (error.message.includes("Receiving end does not exist")) {
            await new Promise(resolve => setTimeout(resolve, 1000)); // Wait 1 second before retrying
            retries--;
          } else {
            throw error;
          }
        }
      }
      chrome.runtime.pendingAction = { tabId: tabId };
    }

    // Update iframe status
    chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
      if (sender.tab.id === activeTabId) {
        if (message.type === "iframeLoaded") {
          await setIframeStatus(activeTabId, true);
          chrome.tabs.sendMessage(activeTabId, { action: "adjustIframeX" });
        } else if (message.type === "iframeRemoved") {
          await setIframeStatus(activeTabId, false);
        }

        // updateIcon(activeTabId);
      }
    });

    async function getIframeStatus(tabId) {
      const result = await chrome.storage.session.get(`iframeStatus_${tabId}`);
      return result[`iframeStatus_${tabId}`] || { injected: false };
    }

    async function setIframeStatus(tabId, injected) {
      await chrome.storage.session.set({ [`iframeStatus_${tabId}`]: { injected: injected } });
    }

    async function removeIframeStatus(tabId) {
      await chrome.storage.session.remove(`iframeStatus_${tabId}`);
    }

<manifest/json>
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["dist/contentScript.js"],
      "css": ["dist/iframe.css"]
    }
  ],
  "web_accessible_resources": [
    {
      "matches": ["<all_urls>"],
      "resources": ["popup.html", "dist/iframe.css"]
    }
  ]