Safari扩展问题：为何无法调用页面函数？控制台调用正常

这问题我之前帮不少开发者排查过——核心原因是Safari扩展的内容脚本和页面的JavaScript运行在完全隔离的上下文环境里：

• 你在浏览器控制台直接调用reorganizeData()能成功，是因为控制台默认在页面的全局上下文执行代码；
• 而扩展按钮的点击逻辑是在内容脚本的独立沙箱上下文里运行，这个上下文无法直接访问页面全局作用域里的函数、变量，哪怕等页面完全加载（甚至延迟10秒）也没用，因为隔离机制是底层设计。

下面给你两种靠谱的解决方案：

方案1：直接向页面上下文注入执行脚本 #

通过创建<script>标签并插入页面的方式，让调用reorganizeData()的代码在页面全局上下文里执行：

// 假设你的扩展按钮已经添加到页面左上角，这里绑定点击事件
const yourExtensionBtn = document.querySelector('#你的扩展按钮ID');
yourExtensionBtn.addEventListener('click', () => {
  // 创建临时script标签
  const injectScript = document.createElement('script');
  // 写入要执行的代码（直接调用页面的全局函数）
  injectScript.textContent = `
    if (typeof reorganizeData === 'function') {
      reorganizeData();
    } else {
      console.error('页面中未找到reorganizeData函数');
    }
  `;
  // 插入到页面head中执行
  document.head.appendChild(injectScript);
  // 执行完成后移除临时脚本，避免页面冗余
  injectScript.remove();
});

方案2：通过postMessage跨上下文通信 #

这种方式更规范，适合需要传递参数或更复杂交互的场景：

第一步：在页面上下文添加消息监听（可通过扩展注入） #

如果页面本身没有监听代码，你可以先通过扩展注入这段监听逻辑：

// 注入监听脚本到页面上下文
const listenerScript = document.createElement('script');
listenerScript.textContent = `
  window.addEventListener('message', (event) => {
    // 验证消息来源，避免恶意消息（可选但推荐）
    if (event.source !== window) return;
    if (event.data?.action === 'triggerReorganize') {
      if (typeof reorganizeData === 'function') {
        reorganizeData();
      }
    }
  });
`;
document.head.appendChild(listenerScript);
listenerScript.remove();

第二步：扩展内容脚本发送消息触发函数 #

在按钮点击事件中发送消息：

const yourExtensionBtn = document.querySelector('#你的扩展按钮ID');
yourExtensionBtn.addEventListener('click', () => {
  // 向页面全局上下文发送消息
  window.postMessage({ action: 'triggerReorganize' }, '*');
});

两种方案都能解决你的问题，方案1更简单直接，方案2更灵活安全，你可以根据需求选择。

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