背景

在为 Chrome 开发了一个扩展程序之后，接下来就是移植到其他浏览器中了，而 Firefox 一般认为是首要选择，它们都使用类似的 Browser Extension API 接口，所以这应该非常简单，对吧？
不，Firefox 有很多微妙的长期问题，如果你遇到了，可能会变得非常棘手，下面是一些吾辈在移植扩展到 Firefox 中已经发现的问题。

CSP 问题

CSP 在 Firefox 扩展中很奇怪，与 Chrome 甚至 Safari 都非常不同，例如

Firefox Extension 不支持访问 localhost

Firefox Extension 不支持访问 localhost 导致 wxt 这种扩展开发框架无法支持 dev mode 热更新 ^[1]，在 bugzilla 中提出的 issue 也已经有 2 年了 ^[2]。目前唯一的解决方法就是在 Chrome 中进行开发，然后构建在 Firefox 进行验证和测试。

Firefox 会根据网站本身的 CSP 来限制扩展注入的 Content Script

Firefox 会根据网站本身的 CSP 来限制扩展注入的 Content Script（使用前朝的剑来斩本朝的官）^[3]。这也涉及到一些已经存在 9 年的 bug ^[4]，预计短期内不可能得到解决，幸运的是，可以使用 declarativeNetRequest 来禁用网站的 CSP 来绕过这个问题。

下面是一个基本的 rules.json 规则配置文件来删除特定网站的 Content-Security-Policy，当然，这会导致一些安全问题，但这也是对于业务层侵入最小的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

[
  {
    "id": 1,
    "condition": {
      "urlFilter": "https://example.com/**",
      "excludedResourceTypes": []
    },
    "action": {
      "type": "modifyHeaders",
      "responseHeaders": [
        {
          "header": "content-security-policy",
          "operation": "remove"
        }
      ]
    }
  }
]

Firefox Extension Page 中使用 wasm 会出现错误

Firefox Extension Page 中使用 webworker 会出现错误，例如使用 esbuild-wasm 会出现以下 CSP 错误

1

Content-Security-Policy: The page’s settings blocked a worker script (worker-src) at blob:moz-extension://708674c8-9b11-450a-9552-c0e679d39d8e/0dff485f-4f32-4d1a-a109-8ca61a3037a2 from being executed because it violates the following directive: “script-src 'self' 'wasm-unsafe-eval'”

即便已经在 manifest 中设置了 CSP

1
2
3
4
5

{
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
  }
}

这同样与一个存在 9 年的 bug 有关，即便它已经被开发者关闭，但通过 blob URI 使用 webworker 仍然无法工作 ^[5]。
对于 esbuild-wasm 而言，它提供一个选项可以禁用 webworker，这可以解决该问题。

1
2
3
4
5

await initialize({
  wasmURL: wasmUrl,
  // Firefox Extension Page CSP disable blob worker
  worker: import.meta.env.CHROME,
})

无法安装未签名扩展

基本上 Firefox 就像 Apple 一样，要求所有扩展都必须进行公证和签名 ^[6]，即使不打算发布给其他人使用，也必须提交到 AMO ^[7] 进行审核。如果你直接拖拽一个构建好的 zip 到 Firefox，就会出现 This add-on could not be installed because it is not been verified 的错误。

AMO 审核问题

当你的扩展使用人数达到一定数量，AMO 每次审核都会变得异常缓慢，因为总是需要人工审核。并且审核人员并不总是优秀的浏览器扩展开发者，他们甚至可能不是 Web 开发者，糟糕的审核流程惹恼了一些非常知名的扩展开发者，让他们放弃了在 Firefox 发布扩展，例如

• uBlock Origin Lite，Chrome 版本用户超过 11M ^[11]
• Enhancer for YouTube，Chrome 版本用户超过 1M ^[12]

AMO 限制 JavaScript 代码尺寸

例如在使用 monaco-editor 时，ts 的 LSP 代码很大，直接导致了扩展被自动拒绝，而在 Chrome 中根本不会发生。

AMO 审查制度

是的，我知道这很荒谬，Firefox 标榜自己 “We are committed to an internet that includes all the peoples of the earth — where a person’s demographic characteristics do not determine their online access, opportunities, or quality of experience.”。但这毫无意义，因为它们确实会在特定地区屏蔽特定扩展 ^[13]，例如，在中国无法使用 uBlock Origin 扩展，这让 Firefox 毫无意义，就连 Chrome 都没有这样做。

结语

Firefox 曾经是一个优秀的浏览器，但这几年除了“碰瓷” Chrome 的名声与 Vue 类似之外，似乎没什么值得大惊小怪的。而且最近开始往浏览器中塞 AI 相关的功能，似乎总是在追逐闪闪发光的东西而不是真的去正视现有的问题。