Safari扩展content.js中window.alert偶发失效，求无需清缓存的解决方案

1. 先修复代码中的语法错误 #

你的代码存在两处语法问题，可能导致脚本在某些场景下解析失败：

• try块缺少对应的catch语句
• 事件监听器的闭合括号不完整

修正后的代码：

window.addEventListener("load", async (event) => {
  console.log("loading");
  try {
    window.alert("alert");
  } catch (error) {
    console.error("Alert执行失败:", error);
  }
});

添加catch可以捕获alert执行时的异常，方便排查具体原因。

2. 强制Safari加载最新的content.js脚本 #

Safari对扩展脚本的缓存机制可能导致修改后的代码无法及时生效，你可以通过以下方式避免缓存：

• 在manifest.json的content_scripts配置中，给脚本文件添加版本号参数，每次修改代码后更新版本号：

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js?v=1.0.1"]
    }
  ]
  

• 开发阶段，通过Safari开发菜单手动刷新扩展：打开「开发>扩展>你的扩展名称>重新加载扩展」，无需清除整个浏览器缓存。
• 开启Safari的禁用缓存功能：打开开发者工具后，勾选「开发>禁用缓存」，确保每次加载页面时获取最新脚本。

3. 调整脚本注入时机 #

window.load事件需要等待所有资源（图片、样式等）加载完成才触发，可能导致脚本执行时机过晚。可以改用更早的事件或配置manifest的注入时机：

• 改用DOMContentLoaded事件，DOM构建完成后立即执行：

  document.addEventListener("DOMContentLoaded", async (event) => {
    console.log("DOM loaded");
    try {
      window.alert("alert");
    } catch (error) {
      console.error("Alert执行失败:", error);
    }
  });
  

• 在manifest.json中设置run_at参数，指定脚本注入时机：

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_end"
    }
  ]
  

  document_end表示DOM构建完成后立即注入，比window.load更早触发。

4. 兼容页面对alert的重写 #

部分网站可能会重写window.alert函数，导致原生alert失效。可以先检查alert的可用性：

try {
  if (typeof window.alert === 'function') {
    window.alert("alert");
  } else {
    console.warn("页面重写了alert函数，无法执行原生弹窗");
    // 可选：使用自定义弹窗替代
    const customAlert = document.createElement('div');
    customAlert.textContent = "alert";
    customAlert.style.cssText = "position:fixed;top:20px;left:50%;transform:translateX(-50%);padding:10px;background:#fff;border:1px solid #ccc;z-index:9999";
    document.body.appendChild(customAlert);
    setTimeout(() => customAlert.remove(), 3000);
  }
} catch (error) {
  console.error("Alert执行失败:", error);
}

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