如何检测Chrome SidePanel是否打开？求侧栏关闭触发事件方案

Chrome官方没给SidePanel直接的onClose事件，但有两个靠谱的办法能实现你要的“关闭侧栏就移除高亮”的需求：

办法一：用SidePanel页面的beforeunload事件（兼容绝大多数Chrome版本） #

这个思路是在侧栏页面即将关闭时，主动给当前标签页的content script发消息，让它去清掉高亮：

1. 在你的SidePanel对应的JS文件（比如sidepanel.js）里加这段代码：

// 监听侧面板页面关闭前的事件
window.addEventListener('beforeunload', () => {
  // 找到当前激活的标签页
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    // 给这个标签页的content script发移除高亮的指令
    chrome.tabs.sendMessage(tabs[0].id, {action: 'removeHighlight'});
  });
});

2. 然后在你的content script里监听这个消息，收到就处理高亮：

// content.js里的消息监听
chrome.runtime.onMessage.addListener((message) => {
  if (message.action === 'removeHighlight') {
    // 这里替换成你实际加高亮的逻辑，比如移除类名
    const highlightedEl = document.querySelector('.your-highlight-class');
    if (highlightedEl) {
      highlightedEl.classList.remove('your-highlight-class');
    }
  }
});

办法二：用chrome.sidePanel的状态监听（仅Chrome 114及以上可用） #

如果你的用户都用新版本Chrome，可以直接在后台脚本里监听侧面板的状态变化：

// background.js里的监听
chrome.sidePanel.onPanelStateChanged.addListener(({tabId, panelState}) => {
  // 当侧面板状态变为关闭时
  if (panelState === 'closed') {
    chrome.tabs.sendMessage(tabId, {action: 'removeHighlight'});
  }
});

同样在content script里处理消息就行，和办法一的第二步一样。

为啥chrome.runtime.onSuspend没用？ #

那玩意是给后台脚本用的，只有当扩展进程要被Chrome杀掉的时候才会触发，和SidePanel关闭完全不搭边，而且content script里根本访问不到这个事件，当然没用。

内容的提问来源于stack exchange，提问作者Kate R