从 0 到 1：亲测 Doubao-Seed-Code 极速构建 Chrome ‘专注’插件全流程

扑克中的黑桃A2025-11-23 10:54

引

最近 Doubao-Seed-Code 模型的热度很高，为了真实检验它在编码和项目协作上的""实战""能力，我决定跳出常规的算法问答，直接给它上了一个""项目大考""：我将扮演产品经理，让它扮演开发者，从零开始帮我完整构建一个"专注模式"的 Chrome 插件，以此来评测它在理解需求、构建框架乃至解决问题的全流程表现。

它不只是"又一个"编码模型，更像是一场"蓄谋已久"的闪电战

我有几点非常主观的看法：

1. "原生视觉"是技术上的"王牌"，终于等到一个"真·VLM"

它强调自己是"国内首个"自带视觉理解的编码模型。这一点真的戳到我了。作为一个开发者，我太清楚现在的痛点了。我们经常需要模型"看"懂我们的UI设计图、流程图甚至是随手画的白板草图。但老实说，像Kimi或DeepSeek那些模型，它们很多时候是靠"图片转文字"（MCP）这种"曲线救国"的方式在猜。

这个过程信息折损得一塌糊涂，效果自然远不如原生的VLM。Doubao-Seed-Code如果真如它所说，是"非工具调用"的原生视觉，那意味着它能真正"看懂"我的需求。

这在体验上是天差地别的，是真正意义上的"多模态编码"，而不仅仅是一个"能聊天的代码编辑器"。我个人认为，这才是编码AI该有的样子。

  • 这个基本就是完全复刻啊～

2. 兼容Claude API 是"最聪明"的市场策略

如果说原生视觉是技术上的"肌肉"，那"原生兼容Anthropic API"就是商业上"最聪明的大脑"。

它没有逼着开发者去学习一套全新的API，而是直接瞄准了Claude Code的现有用户群。它这等于是在对所有Claude开发者喊话："嘿，想不想用上更强的原生视觉能力？想不想让成本瞬间降低？你什么都不用改，代码里换个API地址就行。"

"丝滑接入"、"零成本切换"------这招真的太狠了。这大大降低了我们的迁移门槛和心理防线，简直是在"抢人"，而且是光明正大地抢。

3. 极致的低价，这是"掀桌子"的打法

最后，就是这个价格。

"综合使用成本相比业界平均水平降低62.7%"，"国内最低价"，"最低9.9元"......

这已经不是"性价比高"了，这根本就是"价格屠杀"。它在用绝对的低价，试图把所有潜在用户都"拉"进它的生态里。对于我们这些开发者，尤其是初创团队和个人开发者来说，成本是极其敏感的。当技术（原生视觉）和迁移成本（兼容API）都替你考虑好了之后，再给你一个无法拒绝的价格，这套组合拳下来，你很难不动心。

详细解析：claude-code 环境安装与配置

1: 更新系统

bash 复制代码 
sudo apt update
sudo apt upgrade -y
  • sudo apt update
    • 目的：同步您系统中的"可用软件包列表"。
    • 详细说明 ：这个命令会连接到 Ubuntu/Debian 的软件源（服务器），获取一份最新的软件包信息（比如哪些软件有新版本，依赖关系是什么）。它并不会实际安装或升级任何软件，只是让系统"知道"最新情况。
  • sudo apt upgrade -y
    • 目的：将您系统上所有已安装的软件包升级到最新版本。
    • 详细说明 ：在 update 获取了最新信息后，upgrade 会根据这份信息，下载并安装所有已安装软件的新版本。
    • -y 标志：这是一个自动应答。没有它，升级过程中系统会反复询问您"是否确定要安装 (Y/n)?"，-y 会自动回答"是(Yes)"，使升级过程无需人工干预。
    • 为什么需要？ 确保系统处于最新状态，有助于提高安全性（安装了最新的安全补丁）和兼容性（避免旧的库文件导致新软件无法运行）。

2: 安装 Git

bash 复制代码 
sudo apt install git -y
# 验证安装
git --version
  • sudo apt install git -y
    • 目的 ：安装 Git 版本控制系统。
    • 详细说明 ：Git 是目前全球最主流的代码版本管理工具。
    • 为什么需要？ 虽然 claude-code 工具本身运行可能不直接 依赖 Git，但在一个"编码" (Coding) 相关的AI工具使用场景中，您几乎肯定需要 Git 来克隆（clone）代码仓库、管理您自己的代码变更等。因此，这通常是开发环境设置的标准第一步。

3: 安装 Node.js (18+ 版本)

bash 复制代码 
# 安装 curl (若尚未安装)
sudo apt install curl -y

# 添加 NodeSource 18.x 源
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -

# 安装 Node.js
sudo apt-get install -y nodejs

# 验证版本
node -v && npm -v
  • curl ... | sudo -E bash -
    • 目的：添加 Node.js 18.x 版本的官方（NodeSource）软件源。
    • 详细说明 ：Ubuntu 默认的软件源中的 Node.js 版本可能很旧。claude-code 要求 18+ 版本。这个命令做了两件事：
      1. curl -fsSL ...：使用 curl 工具从指定 URL 下载一个脚本。
      2. | sudo -E bash -：将下载的脚本内容通过管道（|）直接传递给 bash shell，并使用 sudo（管理员权限）来执行它。这个脚本会自动配置您的系统，使其能够从 NodeSource 的服务器下载 Node.js 18。
  • sudo apt-get install -y nodejs
    • 目的 ：在添加了新源之后，正式安装 nodejs 软件包。
    • 为什么需要？ claude-code 是一个用 JavaScript 编写的工具，它需要在 Node.js 这个 JavaScript 运行时环境中才能执行。同时安装的 npm（Node Package Manager）是 Node.js 的包管理器，下一步我们将用它来安装 claude-code 本身。
  • node -v && npm -v
    • 目的 ：验证 Node.js 和 npm 是否安装成功，并显示它们的版本号，确保 node 版本符合 18+ 的要求。

4: 全局安装 Claude Code

Bash 复制代码 
sudo npm install -g @anthropic-ai/claude-code

# 验证安装
claude --version
  • sudo npm install -g @anthropic-ai/claude-code
    • 目的 ：安装 claude-code 工具本体。
    • 详细说明 ：
      • npm install：使用 Node.js 包管理器来安装一个包。
      • -g (global)：这是"全局安装"的标志。意味着这个工具将被安装在系统的公共区域，而不是仅限于某个特定项目目录。
      • 为什么需要全局？ 这样您就可以在系统的任何路径下，直接在命令行中输入 claude（如第 4 行所示）来运行它，就像运行 git 或 curl 一样。
      • @anthropic-ai/claude-code：这是 claude-code 在 npm 仓库上的官方包名。
  • claude 唤醒一下，是可以应用的

5: 配置 API 环境变量

bash 复制代码 
# 设置临时变量
export ANTHROPIC_BASE_URL="https://ark.cr-beijing.volces.com/api/coding"
export ANTHROPIC_AUTH_TOKEN="WmpBME5ETTBaVFJoWkRjNU5ERmpPR0ZtWTJNellqZG1ORGcyTVRVeFlUTQ=="
export ANTHROPIC_MODEL="doubao-seed-code-preview-latest"

# 使配置立即生效
source ~/.bashrc

# 验证（可选）
echo $ANTHROPIC_BASE_URL
echo $ANTHROPIC_AUTH_TOKEN
echo $ANTHROPIC_MODEL

简单来说：

  1. export ...
    • 作用： 在当前 的终端窗口"临时"设置 API 地址（BASE_URL）、密钥（AUTH_TOKEN）和模型（MODEL）。
    • 特点： 这些设置只在当前窗口有效，关掉窗口就没了。
  2. **source ~/.bashrc **
    • 作用： 重新加载 ~/.bashrc（终端的"永久"配置文件）里的设置。
    • 问题： 如果你只执行了第 2-4 行，那第 7 行其实是多余的 ，因为你并没有把配置写入那个文件。这个命令通常是配合永久 设置（即把 export 写入文件）使用的。
  3. echo $...
    • 作用： 检查一下，看看终端是否成功记住了你刚才设置的变量值。

可选: 配置文件方式 (~/.claude/settings.json)

bash 复制代码 
1  # 创建或编辑文件
2  vim ~/.claude/settings.json
3  
4  # 写入以下 JSON 内容
5  {
6    "env": {
7      "ANTHROPIC_AUTH_TOKEN": "ARK_API_KEY",
8      "ANTHROPIC_BASE_URL": "https://ark.cr-beijing.volces.com/api/coding",
9      "EARE_KEEPOUT_FILE_PATH": "ea-bdp.json"
10   },
11   "ANTHROPIC_MODEL": "doubao-seed-code-preview-latest"
12 }
  • 目的：提供一种替代环境变量的配置方法。
  • 详细说明 ：claude-code 工具被设计为：
    1. 首先，检查是否存在 ~/.claude/settings.json 这个文件。
    2. 如果存在，就从这个 JSON 文件中读取 API 密钥（AUTH_TOKEN）、URL 和模型（MODEL）等配置。
    3. 如果这个文件不 存在（或者文件里缺少某些项），它才会去查找步骤 5 中设置的环境变量（如 process.env.ANTHROPIC_AUTH_TOKEN）。
  • 为什么用它？
    • 灵活性 ：有些人不喜欢把密钥"污染"到全局的 .bashrc 文件中，更倾向于使用专门的配置文件。
    • 多账户/多项目：如果您有多个 API 密钥或需要连接到不同的服务商，使用配置文件管理可能比切换环境变量更方便。
  • 注意 ：图片中的 EARE_KEEPOUT_FILE_PATH 似乎是该特定服务商版本所需的额外配置项。

项目启动：我把"专注插件"的需求文档丢给了 AI

项目概述

这是一个名为"专注模式"的 Chrome 浏览器扩展，主要功能是通过一键开关来屏蔽干扰性网站，帮助用户保持专注的工作和学习环境。

  • 因为我（和很多人一样）深受"时间黑洞"的困扰。B站、微博、知乎，这些平台在带给我们信息的同时，也无情地吞噬着我们的专注力。

  • 所以，我决定用这个"最真实的需求"来"拷打"AI。我把一个"专注模式"插件的完整需求（如下方文档所示）丢给了 Doubao-Seed-Code。

我写了一个需求文档，放在了"cll.md"里面了

markdown 复制代码 
# 专注模式 (Focus Mode) Chrome 插件 需求文档

## 1. 项目概述

本项目旨在开发一个 Chrome 浏览器插件，帮助用户在需要专注工作或学习时，一键屏蔽预设的、容易分散注意力的网站。

## 2. 核心功能 

### 2.1. 用户故事 (User Stories)

* **作为用户**，我希望能在浏览器工具栏上点击插件图标，看到一个简洁的控制面板。
* **作为用户**，我希望这个面板上有一个清晰的按钮，可以让我"开启专注"或"关闭专注"。
* **作为用户**，当我"开启专注"时，我希望无法访问微博、B站和知乎。
* **作为用户**，当我"关闭专注"时，我希望可以恢复对这些网站的正常访问。
* **作为用户**，我希望插件能记住我上次的选择，即使我关闭了浏览器。

### 2.2. 功能需求 (Functional Requirements)

1.  **插件界面 (Popup UI)：**
    * 点击浏览器工具栏的插件图标 (`action`) 时，弹出一个 `popup.html` 窗口。
    * 窗口内包含一个主按钮，用于切换专注模式的开/关状态。
    * 按钮的文本和样式应根据当前状态（开启/关闭）发生变化，以提供清晰的视觉反馈。
        * **关闭状态 (默认)：** 按钮显示 "开启专注" (例如，绿色)。
        * **开启状态：** 按钮显示 "关闭专注" (例如，红色)。

2.  **屏蔽功能 (Blocking)：**
    * 当插件处于"开启专注"状态时，必须阻止用户访问 V1.0 屏蔽列表中的所有网站。
    * 被阻止时，浏览器应显示一个错误页面 (例如 `ERR_BLOCKED_BY_CLIENT`)。

3.  **状态持久化 (Persistence)：**
    * 插件必须使用 `chrome.storage.local` 来存储当前是否处于专注模式 (`isFocusModeEnabled: true/false`)。
    * 当浏览器重新启动时，插件应读取此状态，并自动应用（如果上次是开启的，则重启后依然是开启状态）。

## 3. 屏蔽列表

* 新浪微博 (`weibo.com` 及其所有子域名)
* 哔哩哔哩 (`bilibili.com` 及其所有子域名)
* 知乎 (`zhihu.com` 及其所有子域名)

## 4. 技术选型 

* **平台：** Chrome 浏览器插件
* **规范：** **Manifest V3 (MV3)**
* **核心 API：**
    * `declarativeNetRequest`: (MV3 核心) 用于声明式地定义屏蔽规则 (`rules.json`)，实现高效屏蔽。
    * `storage`: 用于持久化存储开关状态。
    * `action`: 用于定义工具栏图标和 `popup.html`。
    * `runtime`: 用于 `background.js` (Service Worker) 和 `popup.js` 之间的消息传递。

## 5. (可选)迭代方向

* **自定义屏蔽列表：** 允许用户在设置页面自行添加、删除需要屏蔽的网站。
* **番茄钟模式：** 允许用户设置一个定时器（如 25 分钟），在此期间强制开启专注模式，时间到了自动解除。
* **白名单模式：** 切换到"白名单"逻辑，即屏蔽*所有*网站，*除了*用户指定的几个学习/工作网站。
  • 提示claude执行～～～～

目录结构

bash 复制代码 
/root/my_project/
├── manifest.json       # 扩展配置文件
├── background.js       # 后台服务工作线程
├── popup.html          # 扩展弹出界面
├── popup.js            # 弹出界面交互逻辑
├── rules.json          # 网络请求拦截规则
├── icons/              # 图标资源目录
│   ├── icon16.svg      # 16x16 图标
│   ├── icon32.svg      # 32x32 图标
│   ├── icon48.svg      # 48x48 图标
│   └── icon128.svg     # 128x128 图标
├── README.md           # 项目说明文档
└── claude.md           # Claude 相关文档

核心功能模块

1. 扩展配置 (manifest.json)

定义了扩展的基本信息和权限：

  • manifest_version: 3 - 使用最新的 Chrome 扩展 API v3
  • 权限设置 - 包含 declarativeNetRequest（网络请求拦截）、storage（本地存储）和 action（扩展按钮）
  • 后台脚本 - 通过 service_worker 运行 background.js
  • 弹出界面 - 点击扩展图标时显示 popup.html
  • 网络请求规则 - 配置了名为 "ruleset_1" 的规则集，默认禁用状态

2. 后台服务 (background.js)

是扩展的核心逻辑层：

  • 初始化机制 - 在扩展安装/更新和浏览器启动时自动初始化
  • 状态管理 - 使用 chrome.storage.local 存储专注模式的启用状态
  • 规则控制 - 通过 declarativeNetRequest API 动态启用/禁用网站拦截规则
  • 消息通信 - 提供消息监听机制，处理来自弹出界面的请求
  • 核心功能函数 :
    • initializeExtension() - 初始化扩展状态
    • toggleFocusMode() - 切换专注模式开关
    • getCurrentStatus() - 获取当前状态

3. 用户界面 (popup.html & popup.js)

和 组成了用户交互界面：

  • 界面设计 - 简洁的开关按钮设计，根据状态显示不同的颜色和文字
  • 交互逻辑 - 点击按钮时向后台发送消息以切换状态
  • 状态同步 - 页面加载时获取并显示当前状态，同时监听状态更新

4. 网络拦截规则 (rules.json)

定义了需要拦截的网站规则：

  • 规则格式 - 遵循 Chrome declarativeNetRequest API 的规则格式
  • 拦截目标 - 默认配置了微博、哔哩哔哩和知乎等常见社交媒体网站
  • 拦截类型 - 针对主框架、子框架、脚本、图片等所有资源类型进行拦截

安装插件

打开扩展管理页面 ：

  • 在Chrome浏览器中输入： chrome://extensions/
  • 或者点击右上角三个点图标 → 更多工具 → 扩展程序

加载扩展 ：

  • 点击「加载已解压的扩展程序」按钮
  • 浏览并选择你的扩展文件夹（如 /root/my_project/ ）
  • 点击确定

UI 完美复现：截图右上方的小窗口，无论是标题"专注模式"还是那个绿色的"开启专注"按钮，都100% 还原了 我们之前在 popup.html 和 popup.js 中设计的需求。

加载流程正确： 截图上半部分的文字（"加载已解压的扩展程序"等）表明您已经掌握了 MV3 插件的正确测试流程。

项目进展迅速： 从一个 cll.md 需求文档到能跑起来的 插件界面，这个执行力非常强。

总结：它不是"玩具"，而是可靠的"工具"

回到我们最初的问题：AI 编码，究竟是"玩具"还是"工具"？

经过这次从 0 到 1 构建"专注模式"Chrome 插件的实战评测，我的答案已经非常明确。

当我把一份专业的 PRD 文档（claude.md）交给 Doubao-Seed-Code 时，它不仅"读懂"了需求，还迅速提供了基于 Manifest V3 的完整技术架构。从 popup.js 的前端交互逻辑，到 background.js 的消息传递，再到 declarativeNetRequest 的核心屏蔽规则，它生成的代码精准且高效。

它不再是一个只能写出零散代码片段的"玩具"，而是一个能够理解项目上下文、处理多文件协作的"初级开发者 "和"高效能工具"。这次的成功开发，让我看到了 AI 辅助编程的真实战力。

相关推荐
却尘2 小时前
当你的 MCP 服务器上云后崩了：深度解析 Transport 限制与高级特性
aigc·ai编程·mcp
三天不学习3 小时前
谷歌Gemini 3正式发布：AI从“回答问题”迈向“完成工作”的新纪元
人工智能·ai·ai编程·gemini 3
Jooolin14 小时前
当你在进行碎片化学习时，有没有想过更高效的方法？
ai编程
小溪彼岸18 小时前
对新手小白友好的Codex官方可视化编程插件
aigc·ai编程
石云升20 小时前
AI编程：每个人的开始，最强的生产力工具
ai编程
倔强的石头_1 天前
深入实战 Doubao-Seed-Code：从 API 到游戏的端到端双项目指南
ai编程
倔强青铜三2 天前
AI编程革命：React + shadcn/ui 将终结前端框架之战
前端·人工智能·ai编程
天外飞雨道沧桑2 天前
前端开发 Cursor MCP 提效工具配置
前端·vscode·ai编程·开发工具·cursor
严老湿2 天前
Spec Kit 实践：从 Prompt 工程到规范驱动开发
ai编程·vibecoding
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连04Google Antigravity：无法登录？早期错误、登录修复和用户反馈指南05UV安装并设置国内源06安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）07Linux下V2Ray安装配置指南08今天 Cloudflare 全球事故，连 GPT 和你的网站都一起“掉线”了09全球最强模型Grok4，国内已可免费使用！（附教程）1046个Nano-banana 精选提示词，持续更新中