Firefox Project Nova 深度实战：当二十五年老牌浏览器决心重做——从界面架构到隐私工程、Multi-Account 容器原生集成与生产级定制开发的完全指南（2026）

一、背景：为什么 Firefox 需要一次彻底的改版？

2026 年 6 月，Mozilla 正式发布了 Firefox 152 稳定版，同时公开了浏览器发展路线图，其中最核心的项目代号是 Project Nova——这是 Firefox 自 Quantum（2017）以来最大规模的视觉与功能重塑。

二十五年了。Firefox 从 Netscape 的遗志中诞生，经历了 IE 时代的围剿、Chrome 时代的份额断崖、再到如今 AI 浏览器浪潮下的重新定位。作为一个每天都会打开十几个标签页的程序员，我对 Firefox 的感情很复杂：它的隐私理念无可挑剔，它的扩展生态依然健康，但老实说，过去几年 Firefox 的 UI 设计确实有些"原地踏步"的感觉。

Project Nova 不是简单的换皮。Mozilla 这次瞄准了五个核心维度：

1. 隐私防护的视觉化与可感知化
2. 操作便捷度的系统性重构
3. 运行性能与资源效率的持续优化
4. 无障碍适配与跨平台体验统一
5. 个性化定制与开发者友好度的提升

本文将从技术架构、代码实战、性能优化等多个角度，深入剖析 Project Nova 的设计理念、Firefox 152 的具体改进，以及作为开发者如何利用这些新特性构建更好的 Web 体验。

二、Firefox 152 的核心更新：从细节看到架构演进

2.1 设置页面的重构：信息架构的重新设计

Firefox 152 最直观的变化是设置页面（Settings/Preferences）的全面重构。别小看这个改动——设置页面是浏览器中最复杂的信息架构之一，包含数百个配置项，涉及隐私、安全、外观、同步、语言等十几个大类。

Mozilla 的做法不是简单的视觉美化，而是重新梳理了信息分类逻辑：

旧版设置结构：
General → Home → Search → Privacy & Security → etc.

新版设置结构（Project Nova）：
├── 常规（General）
│   ├── 启动行为（Startup）
│   ├── 标签页（Tabs）
│   └── 外观（Appearance）
├── 隐私与安全（Privacy & Security）
│   ├── 增强型追踪防护（ETP）
│   ├── 密码管理（Passwords）
│   └── 追踪器可视化面板（Tracker Dashboard）
├── 同步（Sync）
│   ├── 账户管理（Account）
│   └── 设备管理（Devices）
├── 搜索（Search）
│   ├── 默认搜索引擎
│   ├── 搜索建议
│   └── 地址栏行为
└── 扩展与主题（Add-ons & Themes）

从开发者的角度来看，这种重构的本质是将扁平的选项列表变成了层次化的信息树。用户不再需要在单个页面上滚动寻找某个特定的开关，而是通过清晰的分类导航快速定位。

2.2 媒体控制的增强：右键菜单的进化

Firefox 152 对媒体控制做了一件看似微小但影响深远的事——在视频元素上右键可以直接访问播放、暂停、全屏、静音、循环等控制项。

从 Web 开发的角度看，这个特性背后涉及 Firefox 对 <video> 和 <audio> 元素 contextmenu 行为的重新设计：

<!-- 传统做法：需要自定义右键菜单 -->
<video id="player" src="movie.mp4" controls></video>

<script>
  // 自定义右键菜单
  const video = document.getElementById('player');
  video.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    // 创建自定义菜单
    showCustomMenu(e.clientX, e.clientY);
  });
</script>

<!-- Firefox 152 之后：原生支持丰富的媒体右键菜单 -->
<!-- 无需额外 JavaScript，浏览器自动处理 -->
<video src="movie.mp4" controls>
  您的浏览器不支持 video 标签。
</video>

更重要的是，Firefox 152 在地址栏增加了一个隐藏但非常实用的快捷操作：

输入 "mute" / "shush" / "sssh" → 一键静音所有标签页

这是一个典型的"程序员思维"设计——用三个不同的命令词指向同一个功能，既降低了记忆门槛，又保持了趣味性。

2.3 标签页链接复制：多标签管理的效率提升

Firefox 152 在 Windows 和 Linux 上新增了"复制标签页链接"功能。可以通过右键菜单的 Share → Copy Link 复制当前标签页的 URL。选中多个标签页时，还能批量复制。

对于经常需要分享多个链接的开发者来说，这个小功能可以省下不少手动复制粘贴的时间。

2.4 安卓端标签分组

桌面端广受欢迎的标签分组功能终于登陆安卓平台（iOS 端将在今年晚些时候上线）。用户可以为标签分组命名、添加颜色标识。

三、Project Nova：2026 年 Firefox 最大规模的改版计划

3.1 五大改版维度的技术解读

Project Nova 的核心目标是让 Firefox 在快速迭代的互联网环境中保持竞争力。Mozilla 将改版重点聚焦在五个维度：

维度一：隐私防护的可感知化

过去 Firefox 的隐私保护"做得很深，但看得不够"。Project Nova 改变了这一点——新增的追踪拦截可视化小组件（Tracker Dashboard Widget）让用户直观地看到：

• 指定时段内拦截的追踪器数量
• 被拦截的追踪器类型分类（社交追踪器、跨站追踪器、加密货币矿工等）
• Firefox 在后台的防护运行机制

// 从开发者工具中观察 ETP（Enhanced Tracking Protection）的拦截日志
// 在 Firefox 中打开 about:protections 可以看到可视化面板

// 使用 Web API 检查当前页面的跟踪保护状态
navigator.permissions.query({ name: 'tracking-protection' })
  .then(result => {
    console.log('Tracking Protection:', result.state);
  });

维度二：操作便捷度

Project Nova 对浏览器操作流程进行了系统性优化。从设置页面的信息架构重组，到标签页管理的效率提升，核心思想是减少认知负担。

维度三：运行性能

虽然 Firefox Quantum 已经大幅提升了 JavaScript 引擎的性能，但 Project Nova 在此基础上更进一步，引入了省电模式（Power Saver Mode），自动识别高资源占用的标签页并降低其对系统资源的影响。

维度四：无障碍适配

Project Nova 提升了键盘导航、屏幕阅读器支持等无障碍特性。特别是自定义快捷键功能即将上线，允许用户根据自己的工作流绑定和修改浏览器快捷键。

维度五：个性化定制

Firefox 一直以高度可定制著称，Project Nova 进一步强化了这一点。从主题系统到布局调整，用户将获得更精细的控制权。

3.2 未来路线图中的关键功能

根据 Mozilla 公开的路线图，以下功能正在开发中：

四、Multi-Account Containers：从扩展到原生集成的架构演进

4.1 什么是 Multi-Account Containers？

Multi-Account Containers 是 Firefox 最独特的功能之一——它允许你在同一浏览器窗口中创建多个独立的"容器"，每个容器拥有独立的 Cookie、缓存、登录状态，就像运行了多个独立的浏览器实例。

这意味着你可以：

• 在一个容器中登录公司 GitHub
• 在另一个容器中登录个人 GitHub
• 在第三个容器中以未登录状态浏览

不需要切换浏览器、不需要退出登录、不需要隐身模式。

4.2 当前实现：扩展架构

目前 Multi-Account Containers 是作为扩展实现的。它利用了 Firefox 的 contextualIdentity API：

// 创建一个新的容器
const container = await browser.contextualIdentities.create({
  name: "Work",
  color: "blue",
  icon: "briefcase"
});

// 在特定容器中打开标签页
const tab = await browser.tabs.create({
  url: "https://github.com",
  cookieStoreId: container.cookieStoreId
});

// 列出所有容器
const containers = await browser.contextualIdentities.query({});

// 获取特定容器中的所有 Cookie
const cookies = await browser.cookies.getAll({
  storeId: container.cookieStoreId
});

4.3 原生集成的技术挑战

将 Multi-Account Containers 从扩展移入浏览器核心，面临几个关键技术挑战：

1. Cookie 隔离的性能开销

每个容器维护独立的 Cookie 存储。当容器数量增加时，Cookie 查询的性能开销会线性增长。Mozilla 需要优化底层的 Cookie 存储引擎，可能采用索引优化或懒加载策略。

// Firefox 内部 Cookie 存储的简化模型（伪代码）
// 每个容器对应一个独立的 nsICookieManager 实例

class CookieStore {
  std::map<std::string, std::vector<Cookie>> storeMap; // containerId -> cookies
  
  // 优化：使用 LRU 缓存减少磁盘 I/O
  LRUCache<std::string, Cookie> cache;
  size_t maxCacheSize = 1000;
  
  std::vector<Cookie> getCookiesForURI(const URI& uri, const std::string& containerId) {
    std::string cacheKey = containerId + ":" + uri.host();
    if (cache.contains(cacheKey)) {
      return cache.get(cacheKey);
    }
    auto cookies = loadFromDisk(uri, containerId);
    cache.put(cacheKey, cookies);
    return cookies;
  }
};

2. 扩展 API 的向后兼容

原生集成后，现有的 browser.contextualIdentities API 需要保持兼容。Mozilla 计划保留 WebExtension API 接口，但底层实现切换为原生代码。

3. 跨容器通信的安全模型

原生集成需要明确定义容器之间的隔离边界：

• 同源策略在容器间如何适用？
• Service Worker 是否共享？
• postMessage 跨容器通信是否允许？

// 容器隔离的安全边界示例

// Container A (work) 中打开的页面
// https://app.example.com → cookieStoreId: container-work

// Container B (personal) 中打开的同一个域名
// https://app.example.com → cookieStoreId: container-personal

// 两者完全隔离：不同的 Cookie、不同的 localStorage、不同的 IndexedDB
// 但共享相同的网络栈和 DNS 缓存

// Service Worker 隔离策略（Firefox 当前实现）：
// - 每个 cookieStoreId 有独立的 Service Worker 注册表
// - 同一域名在不同容器中可以有独立的 Service Worker
// - Push API 事件按容器隔离

4.4 开发者实战：利用 Containers API 构建多账号工具

以下是一个实用的多账号管理工具，自动为不同的网站分配不同的容器：

// manifest.json
{
  "manifest_version": 3,
  "name": "Auto Container Assigner",
  "version": "1.0",
  "permissions": ["contextualIdentities", "tabs", "cookies"],
  "background": {
    "service_worker": "background.js"
  }
}

// background.js
const RULES = {
  "github.com": { name: "GitHub Work", color: "blue", icon: "briefcase" },
  "gmail.com": { name: "Google Personal", color: "green", icon: "fingerprint" },
  "stackoverflow.com": { name: "Dev Resources", color: "purple", icon: "circle" },
};

// 为特定域名创建或获取容器
async function getOrCreateContainer(domain, config) {
  const existing = await browser.contextualIdentities.query({ name: config.name });
  if (existing.length > 0) {
    return existing[0];
  }
  return await browser.contextualIdentities.create({
    name: config.name,
    color: config.color,
    icon: config.icon
  });
}

// 监听标签页创建，自动分配容器
browser.tabs.onCreated.addListener(async (tab) => {
  if (tab.url) {
    const url = new URL(tab.url);
    const config = RULES[url.hostname.replace("www.", "")];
    if (config) {
      const container = await getOrCreateContainer(url.hostname, config);
      
      // 检查当前标签页是否已在正确容器中
      const currentCookies = await browser.cookies.getAll({ url: tab.url });
      // 如果需要，在新容器中打开
      if (tab.cookieStoreId !== container.cookieStoreId) {
        await browser.tabs.create({
          url: tab.url,
          cookieStoreId: container.cookieStoreId,
          active: true
        });
        await browser.tabs.remove(tab.id);
      }
    }
  }
});

五、Firefox 的 PDF 编辑能力升级：浏览器内的文档工作流

5.1 新增的 PDF 操作功能

Project Nova 路线图中包含了对 PDF 编辑工具的重大升级。Firefox 将支持：

• PDF 拆分：将多页 PDF 拆分为单页或自定义范围
• PDF 合并：将多个 PDF 文件合并为一个
• 页面重排序：拖拽调整 PDF 页面顺序
• 页面删除：移除不需要的页面

5.2 技术实现分析

Firefox 的 PDF 渲染引擎基于 pdf.js——一个由 Mozilla 开源的纯 JavaScript PDF 阅读器。PDF 编辑功能的实现主要依赖 pdf-lib（另一个开源库）来完成 PDF 文档的修改操作。

// 使用 pdf-lib 实现 PDF 拆分
const { PDFDocument } = PDFLib;

async function splitPDF(sourceBuffer, ranges) {
  const sourceDoc = await PDFDocument.load(sourceBuffer);
  const totalPages = sourceDoc.getPageCount();
  
  const results = [];
  
  for (const [start, end] of ranges) {
    const newDoc = await PDFDocument.create();
    const pageIndexes = [];
    
    for (let i = start - 1; i < Math.min(end, totalPages); i++) {
      pageIndexes.push(i);
    }
    
    const copiedPages = await newDoc.copyPages(sourceDoc, pageIndexes);
    copiedPages.forEach(page => newDoc.addPage(page));
    
    const pdfBytes = await newDoc.save();
    results.push(pdfBytes);
  }
  
  return results;
}

// 使用示例：将一个 20 页的 PDF 拆分为 1-5 页和 6-20 页
const buffer = await fetch('document.pdf').then(r => r.arrayBuffer());
const [part1, part2] = await splitPDF(buffer, [[1, 5], [6, 20]]);

// 使用 pdf-lib 实现 PDF 合并
async function mergePDFs(pdfsBuffers) {
  const mergedDoc = await PDFDocument.create();
  
  for (const buffer of pdfsBuffers) {
    const sourceDoc = await PDFDocument.load(buffer);
    const copiedPages = await mergedDoc.copyPages(
      sourceDoc,
      sourceDoc.getPageIndices()
    );
    copiedPages.forEach(page => mergedDoc.addPage(page));
  }
  
  return await mergedDoc.save();
}

// 使用示例
const buffers = await Promise.all([
  fetch('doc1.pdf').then(r => r.arrayBuffer()),
  fetch('doc2.pdf').then(r => r.arrayBuffer()),
  fetch('doc3.pdf').then(r => r.arrayBuffer()),
]);

const merged = await mergePDFs(buffers);

5.3 对开发者的影响

PDF 编辑功能的原生集成意味着：

• 不再需要安装额外的扩展或桌面应用
• Web 应用可以直接利用浏览器的 PDF 处理能力
• 文档处理工作流可以完全在浏览器中完成

六、Firefox 的 AI 功能策略：可选、可控、可关闭

6.1 Mozilla 的 AI 哲学

与 Chrome 和 Edge 积极将 AI 嵌入浏览器的每个角落不同，Mozilla 采取了截然不同的策略——所有 AI 功能都是可选的，且用户可以一键关闭全部内置 AI 功能。

这包括：

• Quick Answers（快速问答）：针对语音提问给出简短回复
• Smart Window（智能窗口）：可选的 AI 浏览助手，帮助用户对比信息、理解阅读内容

6.2 开发者如何集成

Firefox 的 AI 功能通过内部 API 暴露给扩展开发者：

// 利用 Firefox 的内置翻译 API（已原生集成）
const translation = await browser.translation.translate({
  text: "Hello, world!",
  from: "en",
  to: "zh-CN"
});
console.log(translation); // "你好，世界！"

// Quick Answers 功能的使用场景（概念代码）
// 用户选中文本 → 右键 → Quick Answer
document.addEventListener('mouseup', async (e) => {
  const selection = window.getSelection().toString().trim();
  if (selection.length > 0) {
    // Firefox 内置的 Quick Answers 会处理选中文本的查询
    // 扩展可以通过 sidebar API 与之集成
    browser.sidebarAction.open();
    browser.runtime.sendMessage({
      type: "quick-answer",
      query: selection,
      context: {
        url: window.location.href,
        title: document.title
      }
    });
  }
});

6.3 与竞品的对比

七、Firefox 引擎性能：Quantum 之后的持续进化

7.1 SpiderMonkey 的 JIT 编译优化

Firefox 的 JavaScript 引擎 SpiderMonkey 在过去几年持续优化。Project Nova 虽然主要聚焦于 UI 层面的改版，但底层引擎的性能提升也在同步进行：

// SpiderMonkey 的 WarpMonkey JIT 编译器优化了以下场景

// 1. 内联缓存（Inline Cache）命中率的提升
// 常见的对象属性访问模式会被 JIT 快速编译

const user = { name: "Alice", age: 30 };
// 多次访问相同属性 → WarpMonkey 会将这段代码标记为"热路径"
for (let i = 0; i < 100000; i++) {
  const x = user.name; // JIT 优化：直接偏移量访问，无需字典查找
}

// 2. 数组操作的 SIMD 优化
const a = new Float64Array(1000);
const b = new Float64Array(1000);
const c = new Float64Array(1000);

for (let i = 0; i < 1000; i++) {
  c[i] = a[i] + b[i]; // WarpMonkey 自动向量化
}

// 3. WebAssembly 的持续优化
// Firefox 对 WASM 支持一直走在前列
// 包括：WASI 支持、SIMD128、GC 提案、Component Model

7.2 标签页性能管理

Firefox 的标签页进程模型基于一个多进程架构：

Firefox 进程模型：
├── 主进程（Parent Process）
│   ├── UI 渲染
│   ├── 扩展管理
│   └── 网络调度
├── 内容进程（Content Processes，最多 8 个）
│   ├── Web 内容渲染
│   ├── JavaScript 执行
│   └── 插件运行
├── GPU 进程
│   └── 图形渲染合成
├── 网络进程
│   └── DNS / TCP / TLS
└── RDD 进程
    └── 音视频解码

Project Nova 引入的省电模式会针对高占用标签页进行资源降级：

// 开发者可以通过 Page Visibility API 优化标签页资源使用
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // 标签页不可见时减少资源消耗
    // 暂停动画、降低定时器频率、释放内存
    pauseExpensiveOperations();
    reduceTimerFrequency();
    releaseUnusedMemory();
  } else {
    // 标签页可见时恢复正常
    resumeExpensiveOperations();
    restoreTimerFrequency();
  }
});

// Firefox 特有的 Tab Priority API（实验性）
// 允许开发者标记高优先级标签页
if ('requestTabPriority' in navigator) {
  navigator.requestTabPriority('high');
}

7.3 JPEG XL 的实验性支持

Firefox 152 开始实验性支持 JPEG XL（.jxl）格式。JPEG XL 是 JPEG 的继任者，提供了：

• 比 JPEG 更好的压缩率（约 30% 体积减少）
• 比 PNG 更好的有损压缩
• 支持无损压缩
• 渐进式解码

<!-- 在 Firefox 152+ 中可以直接使用 JPEG XL -->
<picture>
  <source type="image/jxl" srcset="photo.jxl">
  <source type="image/webp" srcset="photo.webp">
  <source type="image/jpeg" srcset="photo.jpg">
  <img src="photo.jpg" alt="Photo">
</picture>

<!-- JavaScript 中检测 JPEG XL 支持 -->
<script>
  function supportsJXL() {
    return new Promise((resolve) => {
      const img = new Image();
      img.onload = () => resolve(true);
      img.onerror = () => resolve(false);
      // 使用一个 1x1 的最小 JXL 测试图
      img.src = 'data:image/jxl;base64,...';
    });
  }
  
  supportsJXL().then(supported => {
    console.log('JPEG XL supported:', supported);
  });
</script>

八、Firefox 扩展开发：在 Nova 时代的最佳实践

8.1 Manifest V3 的适配

Firefox 对 Manifest V3 的实现保持了与 Chrome 最大的兼容性，同时保留了 Firefox 特有的 API：

// manifest.json - Firefox 专用配置
{
  "manifest_version": 3,
  "name": "Nova Enhanced",
  "version": "1.0",
  "browser_specific_settings": {
    "gecko": {
      "id": "nova-enhanced@example.com",
      "strict_min_version": "128.0"
    }
  },
  "permissions": [
    "activeTab",
    "scripting",
    "contextualIdentities",
    "privacy"
  ],
  "background": {
    "scripts": ["background.js"],
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["content.css"]
    }
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon-16.png",
      "48": "icons/icon-48.png",
      "128": "icons/icon-128.png"
    }
  }
}

8.2 利用 Nova 的隐私可视化 API

// 读取 Firefox 的追踪保护统计信息
async function getTrackingStats() {
  const stats = await browser.privacy.trackingProtection.getSettings({});
  return {
    enabled: stats.value,
    fingerprintingProtection: await browser.privacy.fingerprintingProtection.getSettings({}),
  };
}

// 在扩展中展示隐私统计
browser.action.setBadgeText({ text: '🛡️' });
browser.action.setBadgeBackgroundColor({ color: '#2ea043' });

8.3 利用 Firefox 独有的 browser.tabs.captureTab API 截图

// Firefox 支持直接截取任意标签页（不仅是当前活动标签页）
// 这在 Chrome 中需要 activeTab 权限且只能截取当前标签页

async function captureAllTabs() {
  const tabs = await browser.tabs.query({});
  const screenshots = [];
  
  for (const tab of tabs) {
    try {
      const dataUrl = await browser.tabs.captureTab(tab.windowId, {
        tabId: tab.id,
        format: 'png',
        quality: 80
      });
      screenshots.push({
        tabId: tab.id,
        title: tab.title,
        url: tab.url,
        screenshot: dataUrl
      });
    } catch (e) {
      // 某些页面（如 about:blank、about:config）无法截图
      console.warn(`Cannot capture tab ${tab.id}:`, e.message);
    }
  }
  
  return screenshots;
}

九、隐私工程：Firefox 的安全架构深度解析

9.1 增强型追踪防护（ETP）的分级策略

Firefox 的 ETP 采用了三级防护策略：

// 检查并修改 ETP 级别
async function setETPMode(mode) {
  // mode: 'standard', 'strict', 'custom'
  const tp = await browser.privacy.trackingProtection.getSettings({});
  console.log('Current ETP:', tp);
  
  // 标准 → 严格（更安全但可能影响部分网站功能）
  await browser.privacy.trackingProtection.setSettings({
    value: mode === 'strict'
  });
}

// 列出被拦截的追踪器（通过 WebRequest API）
let blockedCount = 0;

browser.webRequest.onBeforeRequest.addListener(
  (details) => {
    if (details.type === 'third-party') {
      blockedCount++;
      console.log(`Blocked: ${details.url} (${details.type})`);
      updateBadge(blockedCount);
    }
  },
  { urls: ['<all_urls>'] },
  ['blocking']
);

function updateBadge(count) {
  const text = count > 999 ? '999+' : String(count);
  browser.action.setBadgeText({ text });
}

9.2 Total Cookie Protection（TCP）的分区模型

Firefox 独有的 Total Cookie Protection 机制为每个网站创建独立的 Cookie "jar"，防止跨站 Cookie 追踪：

传统 Cookie 模型：
tracker.com → Set-Cookie: id=abc123
  └── any-site.com 读取 → ✅ 追踪成功

Firefox TCP 模型：
tracker.com → Set-Cookie: id=abc123
  ├── site-a.com/tracker.com → jar: {site-a, tracker.com} → id=abc123
  ├── site-b.com/tracker.com → jar: {site-b, tracker.com} → id=xyz789
  └── site-c.com/tracker.com → jar: {site-c, tracker.com} → id=def456
  
  → 同一个追踪器在不同网站上的 Cookie 完全不同
  → 跨站追踪被从根本上阻止

// 检查当前站点的 TCP 状态
// 在 Firefox 的开发者工具 → 存储 → Cookie 中可以看到分区信息

// 通过 Partition API 检查
async function checkPartitionKey() {
  if (navigator.storage && navigator.storage.getPartition) {
    const partition = await navigator.storage.getPartition();
    console.log('Current partition:', partition);
  }
}

9.3 DNS-over-HTTPS（DoH）的配置与优化

Firefox 内置了对 DNS-over-HTTPS 的支持，防止 DNS 查询被 ISP 或中间人窥探：

// 通过扩展 API 检查 DoH 状态
async function checkDoH() {
  const dnsSettings = await browser.privacy.network.networkPredictionEnabled.getSettings({});
  console.log('Network prediction:', dnsSettings);
  
  // Firefox 的 DoH 配置在 about:preferences#privacy 中
  // 可选的 DoH 提供商包括：
  // - Cloudflare (https://cloudflare-dns.com/dns-query)
  // - NextDNS (https://dns.nextdns.io)
  // - 自定义提供商
}

// 检查当前的网络请求是否通过安全 DNS
browser.webRequest.onResponseStarted.addListener(
  (details) => {
    // 检查响应头中是否有 DNS 相关信息
    console.log(`Request to ${details.url} completed`);
  },
  { urls: ['<all_urls>'] }
);

十、跨平台同步：Firefox Sync 的架构与开发实践

10.1 Firefox Sync 的端到端加密

Firefox Sync 是少数实现端到端加密的浏览器同步服务——Mozilla 的服务器只能看到加密后的数据，无法读取用户信息。

Firefox Sync 架构：

设备 A                          Mozilla 服务器                    设备 B
┌──────────┐                   ┌──────────────┐               ┌──────────┐
│ 本地数据  │──加密(BrowserID)──→│  加密数据存储  │──加密数据──→  │ 本地数据  │
│ 书签      │                   │  (不可读)     │              │ 书签      │
│ 密码      │                   │              │              │ 密码      │
│ 历史      │                   │              │              │ 历史      │
│ 偏好设置   │                   │              │              │ 偏好设置   │
└──────────┘                   └──────────────┘               └──────────┘

加密密钥由用户的 Firefox 账户密码派生，
Mozilla 服务器不持有解密密钥。

10.2 利用 Sync API 构建跨设备工具

// 通过扩展访问 Firefox Sync 的书签数据
async function getAllBookmarks() {
  const bookmarkTree = await browser.bookmarks.getTree();
  
  function flattenTree(nodes, depth = 0) {
    const result = [];
    for (const node of nodes) {
      if (node.url) {
        result.push({
          title: node.title,
          url: node.url,
          depth,
          dateAdded: new Date(node.dateAdded)
        });
      }
      if (node.children) {
        result.push(...flattenTree(node.children, depth + 1));
      }
    }
    return result;
  }
  
  return flattenTree(bookmarkTree);
}

// 搜索书签
async function searchBookmarks(query) {
  const results = await browser.bookmarks.search(query);
  return results.map(b => ({
    title: b.title,
    url: b.url,
    type: b.type
  }));
}

十一、实战：为 Firefox Nova 构建一个隐私仪表盘扩展

11.1 项目概述

我们将构建一个 Firefox 扩展，在侧边栏中展示用户的隐私保护统计数据，包括被拦截的追踪器数量、加密连接比例、Cookie 隔离状态等。

11.2 popup.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 320px;
      padding: 16px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: #1a1a2e;
      color: #eee;
    }
    h1 { font-size: 16px; margin-bottom: 16px; color: #00d4aa; }
    .stat-card {
      background: #16213e;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .stat-value { font-size: 24px; font-weight: bold; color: #00d4aa; }
    .stat-label { font-size: 12px; color: #888; }
    .badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: bold;
    }
    .badge-safe { background: #2ea043; color: white; }
    .badge-warn { background: #d29922; color: white; }
    .badge-danger { background: #f85149; color: white; }
    .progress-bar {
      height: 4px;
      background: #333;
      border-radius: 2px;
      margin-top: 4px;
      overflow: hidden;
    }
    .progress-fill {
      height: 100%;
      border-radius: 2px;
      transition: width 0.5s ease;
    }
  </style>
</head>
<body>
  <h1>🛡️ Privacy Dashboard</h1>
  <div id="stats"></div>
  <script src="popup.js"></script>
</body>
</html>

11.3 popup.js

async function loadStats() {
  const container = document.getElementById('stats');
  
  // 获取追踪保护统计
  const tabs = await browser.tabs.query({ currentWindow: true, active: true });
  const currentTab = tabs[0];
  
  let isSecure = false;
  let trackerCount = 0;
  
  if (currentTab && currentTab.url) {
    isSecure = currentTab.url.startsWith('https://');
    trackerCount = Math.floor(Math.random() * 50) + 10; // 模拟数据
  }
  
  const stats = [
    {
      label: '当前连接安全性',
      value: isSecure ? 'HTTPS' : 'HTTP',
      badge: isSecure ? 'badge-safe' : 'badge-danger',
      progress: isSecure ? 100 : 0
    },
    {
      label: '本次会话拦截追踪器',
      value: trackerCount,
      badge: trackerCount > 30 ? 'badge-warn' : 'badge-safe',
      progress: Math.min(trackerCount * 2, 100)
    },
    {
      label: 'Cookie 隔离状态',
      value: '已启用',
      badge: 'badge-safe',
      progress: 100
    },
    {
      label: 'DNS-over-HTTPS',
      value: '已启用',
      badge: 'badge-safe',
      progress: 100
    }
  ];
  
  container.innerHTML = stats.map(s => `
    <div class="stat-card">
      <div>
        <div class="stat-label">${s.label}</div>
        <div class="stat-value">${s.value}</div>
        <div class="progress-bar">
          <div class="progress-fill" style="width:${s.progress}%;background:${s.badge === 'badge-safe' ? '#2ea043' : s.badge === 'badge-warn' ? '#d29922' : '#f85149'}"></div>
        </div>
      </div>
      <span class="badge ${s.badge}">${s.badge === 'badge-safe' ? '安全' : s.badge === 'badge-warn' ? '注意' : '风险'}</span>
    </div>
  `).join('');
}

loadStats();

十二、Firefox DevTools 的新特性与开发者工作流

12.1 Project Nova 对开发者工具的影响

随着 Project Nova 的推进，Firefox DevTools 也在持续改进：

// Firefox 独有的调试特性：CSS Grid Inspector
// 在 DevTools 中检查 CSS Grid 布局时，
// Firefox 提供了最直观的 Grid 可视化工具

// 在页面中编写 Grid 布局
<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-template-rows: auto;
    gap: 16px;
    padding: 16px;
  }
  
  .grid-item {
    background: #16213e;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 24px;
    color: #eee;
  }
</style>

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

// 在 Firefox DevTools 中右键点击 .grid-container → Inspect
// 然后在 Layout 面板中可以直观看到 Grid 线条、区域划分

12.2 Console 的新功能

// Firefox Console 独有的功能：

// 1. CSS 消息分组
console.groupCollapsed('CSS Warnings');
console.warn('Some CSS property is deprecated');
console.groupEnd();

// 2. 更好的 async/await 调用栈
// Firefox Console 会完整显示 async 函数的调用链
async function fetchData() {
  const response = await fetch('/api/data');
  const data = await response.json();
  console.log('Data:', data); // 调用栈会显示完整的 async 链
}

// 3. 多行编辑模式
// Firefox Console 支持多行代码输入（Shift+Enter）
// 可以直接编写和执行复杂的代码片段

const data = [1, 2, 3, 4, 5];
const result = data
  .filter(x => x % 2 === 0)
  .map(x => x * 2)
  .reduce((acc, x) => acc + x, 0);
// result = 12

十三、总结与展望

13.1 Project Nova 的核心价值

Project Nova 的核心价值可以总结为三个关键词：隐私、可控、实用。

在一个 AI 功能被强制塞进每个角落、隐私边界越来越模糊的时代，Firefox 选择了一条不同的路：

• 隐私不是功能，而是基础。从 Total Cookie Protection 到 DNS-over-HTTPS，从 ETP 分级策略到容器隔离，Firefox 在架构层面就将隐私保护融入了浏览器的每一个环节。

• AI 可以有用，但必须是可选的。Quick Answers 和 Smart Window 提供了 AI 的便利性，但用户可以一键关闭所有 AI 功能——这在 2026 年的主流浏览器中是独一无二的。

• 开发者是第一优先级。从 contextualIdentities API 到 browser.tabs.captureTab，从 Manifest V3 的兼容到 DevTools 的持续改进，Firefox 始终在为 Web 开发者提供最好的工具和 API。

13.2 对前端开发者的建议

1. 尽早适配 JPEG XL。Firefox 152 已经开始实验性支持，WebP 的优势正在被 JXL 取代。

2. 利用 Page Visibility API 优化多标签场景。省电模式即将上线，你的应用需要在标签页不可见时减少资源消耗。

3. 考虑 Container API 的多账号场景。如果产品涉及多账号切换，Firefox 的容器隔离提供了最优雅的解决方案。

4. 关注隐私保护对追踪脚本的影响。ETP 严格模式可能会拦截你的分析脚本，需要提前做好降级方案。

5. PDF 功能的 Web 替代方案。Firefox 的原生 PDF 编辑能力可能减少对第三方 PDF 服务的依赖。

13.3 未来的可能性

随着 Project Nova 的持续推进，Firefox 有可能在 2026 年底或 2027 年初完成 Nova 的全面落地。届时，Firefox 将以一个全新的面貌出现在用户面前——更现代的 UI、更强大的隐私保护、更灵活的 AI 集成、更完善的跨平台体验。

对于长期使用 Chrome 的开发者来说，这也许是一个重新审视 Firefox 的好时机。不是因为它更好或更差，而是因为浏览器的多样性对 Web 生态的健康至关重要。

一个只有 Chrome 的 Web，不是一个健康的 Web。