service worker 无法直接向已加载页面注入脚本，但可拦截 html 请求并修改响应内容，在 或 前插入监控脚本；该方式仅对首次加载或刷新有效，spa 路由切换不触发；推荐结合页面主动加载与 sw 缓存协同实现。

Service Worker 本身无法直接向已加载的页面注入脚本（比如 <script></script> 标签），因为它运行在独立线程、无 DOM 访问权限，也不能操作当前页面的 window 或 document。所以“通过 Service Worker 拦截并动态注入全局异常监控脚本”这个说法存在常见误解——SW 不能主动往运行中的页面里塞 JS。

Service Worker 能做什么：拦截网络请求

SW 的核心能力是拦截 fetch 请求（包括 HTML 页面请求），并在响应返回前修改内容。因此，真正可行的方式是：

• 在 SW 中监听对 HTML 文件的请求（如 navigation 类型或 text/html 响应）
• 用 response.clone() 获取原始 HTML 流
• 解析并修改 HTML 字符串，在 或 前插入监控脚本的 <script></script> 标签
• 构造并返回修改后的新 Response

⚠️ 注意：该方式仅对通过 SW 控制的、首次加载或刷新的 HTML 有效；SPA 路由切换（如 Vue Router / React Router）不触发 HTML 请求，因此不会重复注入。

注入监控脚本需注意的关键点

动态注入不是简单拼字符串，否则容易破坏 HTML 结构或引发执行错误：

• 避免污染原始 HTML：优先使用流式解析（如 TextDecoder + 正则谨慎匹配 或