WXT项目中Firefox内容脚本无效化问题的分析与解决

问题背景

在WXT项目开发过程中，开发者发现了一个特定于Firefox浏览器的奇怪现象：内容脚本(Content Script)有时会在执行后几乎立即被标记为无效(invalidated)。这个问题在JavaScript较重的网页上尤为明显，如openweathermap.org等网站，而在简单的测试页面如example.com上则难以复现。

问题现象

当问题发生时，内容脚本的执行流程会呈现以下异常顺序：

1. 脚本开始执行
2. 短时间内触发ctx.onInvalidated回调
3. 脚本被标记为无效

正常情况下的执行顺序应该是：

1. 先通过window.postMessage发送wxt:content-script-started消息来停止旧脚本
2. 然后通过setTimeout延迟订阅该消息，以避免捕获自身发送的消息

技术分析

问题的核心在于消息传递和事件监听的时序问题。WXT项目中原本的实现逻辑是：

1. ContentScriptContext的#stopOldScripts方法会发送wxt:content-script-started消息
2. #listenForNewerScripts方法通过setTimeout延迟订阅同一消息

这种设计本意是让脚本先发送消息，再开始监听，从而避免捕获自己发送的消息。但在Firefox中，特别是在JS执行较重的页面上，由于浏览器事件循环的特性，有时会出现：

1. 监听器先被设置
2. 然后才收到自己发送的消息
3. 导致脚本错误地将自己标记为无效

解决方案

项目维护者提出了一个更可靠的解决方案：不再依赖setTimeout的时序，而是改为忽略第一个接收到的事件。这种方法不依赖于事件触发的具体时间，而是通过计数来确保不会错误地处理自身发送的消息。

具体实现要点：

1. 移除对setTimeout的依赖
2. 添加计数器，忽略首次事件
3. 从第二次事件开始才真正处理消息

影响范围

这个问题主要影响：

• Firefox浏览器用户（包括LibreWolf等衍生版本）
• 访问JavaScript较重的网站时
• 与Chrome浏览器相比表现不同（Chrome中未发现此问题）

技术启示

这个案例为我们提供了几个重要的技术启示：

1. 浏览器差异：不同浏览器对事件循环和消息传递的实现可能存在细微差别，跨浏览器开发时需要特别注意

2. 时序依赖：基于时间延迟（如setTimeout）的解决方案可能存在不可靠性，特别是在性能不同的环境中

3. 健壮性设计：采用不依赖具体时序的解决方案（如事件计数）通常更加可靠

4. 性能影响：网页的JavaScript执行性能可能影响扩展的行为，需要在各种环境下进行充分测试

该问题已在WXT项目的0.19.3版本中得到修复，开发者可以升级到最新版本来避免此问题。