Chrome => Firefox 扩展移植的那些坑

背景

在为 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，当然，这会导致一些安全问题，但这也是对于业务层侵入最小的方法。

[
  {
    "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 错误

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

{
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src...剩余内容已隐藏
查看完整文章以阅读更多
查看完整文章
🍊
柑橘 RSS
订阅源浏览器信息
rxliuli blog
rxliuli blog
马上订阅 rxliuli blog RSS 更新: https://blog.rxliuli.com/atom.xml
Chrome => Firefox 扩展移植的那些坑
2025年9月18日 21:12
背景
在为 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...剩余内容已隐藏
查看完整文章以阅读更多
查看完整文章
🍊
柑橘 RSS
订阅源浏览器信息
rxliuli blog
rxliuli blog
马上订阅 rxliuli blog RSS 更新: https://blog.rxliuli.com/atom.xml
Chrome => Firefox 扩展移植的那些坑
2025年9月18日 21:12
背景
在为 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...剩余内容已隐藏
查看完整文章以阅读更多
查看完整文章