AddFox
  • 简体中文

      • 浏览器启动

      Addfox 可以在开发时自动启动浏览器并加载扩展，提升开发效率。

      快速开始

      运行开发命令：

      pnpm
      npm
      yarn
      bun
      pnpm dev

      首次启动开发服务器会自动：

      1. 构建扩展
      2. 打开浏览器
      3. 加载开发中的扩展

      Chromium 系浏览器

      Addfox 原生支持以下基于 Chromium 的浏览器：

      浏览器CLI 参数说明
      Google Chrome-b chrome默认浏览器
      Chromium-b chromium开源版本
      Microsoft Edge-b edgeWindows 自带
      Brave-b brave隐私浏览器
      Vivaldi-b vivaldi自定义浏览器
      Opera-b opera欧朋浏览器
      Arc-b arc新形态浏览器

      启动 Chromium 浏览器

      pnpm
      npm
      yarn
      bun
      # Chrome（默认）
pnpm dev -- -b chrome

# Edge
pnpm dev -- -b edge

# Brave
pnpm dev -- -b brave

      Chromium 浏览器路径配置

      如果浏览器不在默认位置，可在配置中指定 browserPath：

      // addfox.config.ts
export default defineConfig({
  browserPath: {
    chrome: "/path/to/chrome",
    edge: "/path/to/edge",
    brave: "/path/to/brave",
  },
});

      各平台示例

      macOS：

      export default defineConfig({
  browserPath: {
    chrome: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
    edge: "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
  },
});

      Windows：

      export default defineConfig({
  browserPath: {
    chrome: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
    edge: "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe",
  },
});

      Linux：

      export default defineConfig({
  browserPath: {
    chrome: "/usr/bin/google-chrome",
    chromium: "/usr/bin/chromium-browser",
  },
});

      Chromium 缓存用户数据

      默认每次启动使用新的用户数据目录。如需保留（如保持登录状态）：

      pnpm
      npm
      yarn
      bun
      pnpm dev -- -c
# 或
pnpm dev -- --cache

      或在配置中启用：

      export default defineConfig({
  cache: true,
});

      用户数据保存在 .addfox/cache/ 目录。

      Firefox

      Firefox 开发模式使用 web-ext 工具管理扩展生命周期。

      启动 Firefox

      pnpm
      npm
      yarn
      bun
      pnpm dev -- -b firefox

      Firefox 特性

      • 扩展重载由 web-ext 处理，而非 Addfox 的 WebSocket
      • 自动打开 Firefox 并加载扩展
      • 支持文件变更时自动重新加载

      Firefox 路径配置

      export default defineConfig({
  browserPath: {
    firefox: "/Applications/Firefox.app/Contents/MacOS/firefox",
  },
});
      Info

      Firefox 配置文件由 web-ext 自动管理，无需手动配置缓存选项。

      调试技巧

      查看 Service Worker

      1. 打开 chrome://extensions/
      2. 找到开发中的扩展
      3. 点击 "Service Worker" 查看后台脚本控制台

      查看 Content Script

      1. 在网页上右键 → 检查
      2. 切换到 Console 面板
      3. 选择对应扩展的上下文

      使用错误监控

      启用监控面板捕获所有入口的错误：

      pnpm
      npm
      yarn
      bun
      pnpm dev -- --debug

      相关配置