Safari扩展问题：切换标签/窗口时仅首个加载标签可向Global.html发消息

我之前开发Safari扩展时也碰到过一模一样的问题——只有第一个加载的标签页能和Global.html通信，切换标签页后完全没反应。折腾了好一阵才找到根源，给你分享下可行的解决方案：

一、先把激活状态的监听逻辑做可靠 #

你用的visibilitychange、activate这些事件方向是对的，但需要更精准的状态判断，避免误触发或者状态判断不准。可以把多个事件整合起来，确保只有当页面真正处于可见且获得焦点时才触发消息发送：

// Injected.js
let isCurrentActiveTab = false;

function setupActivationCheck() {
  // 监听页面可见性变化
  document.addEventListener('visibilitychange', updateActiveState);
  // Safari专属的标签页激活事件
  safari.self.addEventListener('activate', updateActiveState);
  // 窗口焦点变化事件
  window.addEventListener('focus', updateActiveState);
}

function updateActiveState() {
  const shouldBeActive = document.visibilityState === 'visible' && document.hasFocus();
  // 只有从非激活变为激活时，才发送消息
  if (shouldBeActive && !isCurrentActiveTab) {
    isCurrentActiveTab = true;
    sendActivationMessageToGlobal();
  } else if (!shouldBeActive && isCurrentActiveTab) {
    isCurrentActiveTab = false;
    // 可选：页面失活时可以做一些状态清理
  }
}

// 初始化监听
setupActivationCheck();

二、确保消息发送的上下文正确 #

这是核心问题！Safari扩展里每个标签页的Injected.js都是独立上下文，但Global.html是全局唯一的。之前只有首个标签页能发消息，大概率是你发送消息的方式没正确关联到Global.html的全局上下文：

// Injected.js - 消息发送核心函数
function sendActivationMessageToGlobal() {
  try {
    // 必须通过safari.extension.globalPage.contentWindow获取Global.html的上下文
    const globalPageContext = safari.extension.globalPage.contentWindow;
    
    // 方式1：直接调用Global.html中定义的处理函数（简单直接）
    globalPageContext.handleActiveTabUpdate({
      tabId: safari.self.tab.id,
      currentUrl: window.location.href
    });

    // 方式2：用postMessage通信（更符合现代扩展的通信规范）
    // globalPageContext.postMessage({
    //   type: 'TAB_ACTIVATED',
    //   payload: { tabId: safari.self.tab.id, url: window.location.href }
    // });
  } catch (err) {
    console.error('向Global.html发送消息失败:', err);
  }
}

三、Global.html端要做好接收处理 #

别忘检查Global.html的消息接收逻辑，确保它能接收来自任意标签页的消息，没有绑定限制：

<!-- Global.html -->
<script>
// 对应方式1的处理函数
function handleActiveTabUpdate(tabInfo) {
  console.log('当前激活的标签页:', tabInfo);
  // 这里写你的业务逻辑，比如更新popover内容、同步状态等
}

// 对应方式2的postMessage监听
window.addEventListener('message', (event) => {
  // 过滤掉自身发送的消息
  if (event.source === safari.extension.globalPage.contentWindow) return;
  if (event.data.type === 'TAB_ACTIVATED') {
    handleActiveTabUpdate(event.data.payload);
  }
});
</script>

四、几个关键注意点 #

• 权限配置：检查你的Info.plist，确保NSExtensionActivationRule配置正确，允许扩展访问所有需要的网站，没有权限限制。
• 避免重复绑定：确保setupActivationCheck在Injected.js中只执行一次，不要重复添加事件监听。
• 上下文隔离：永远不要尝试用其他方式访问Global.html，必须通过safari.extension.globalPage.contentWindow，这是Safari扩展规定的全局上下文访问方式。

这样调整后，切换标签页或窗口时，激活的页面就能正确触发消息发送，Global.html也能接收到来自任意标签页的消息了。

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