昨天小灶结束后，有位顾问老师说：
这是我今年第二次给他的“爽点”，堪比股票赚了 10 万块。
这当然是玩笑。
但它说出了昨天真正让人兴奋的地方。
不是又学了一个 AI 概念。
而是第一次用 AI Coding，把自己的专业能力做成了一个能在浏览器里运行的 AI 插件。
前几天大家刚写完 Skill，这很重要。
Skill 肯定要写，而且要认真写。
但我追问了一句：
你把 Skill 写完，发给别人，别人真的会用吗？
如果想让它进入真实工作流，就要再往前一步。
把 Skill 放进一个能打开、能读当前页面、能配置模型、能调用大模型的浏览器插件里。
背景到这里就够了。
下面直接手把手做。
一、我们这次到底要做什么
目标很明确：用 AI Coding 做一个浏览器 AI 插件，让它潜入你每天工作的页面旁边。
这里说的“潜入”，不是偷偷拿数据。
而是让 AI 出现在你的真实工作环境里。
你正在看流程文件，它就在旁边帮你做质量评估。
你正在看合同，它就在旁边帮你列风险点。
你正在看需求文档，它就在旁边帮你拆验收标准。
这个插件至少要有四个能力：
第一，能出现在 Chrome 浏览器里。
第二，能读取当前页面内容。
第三，能内置你写好的专业 Skill。
第四，能调用大模型生成结果。
做到这一步，它就不是一个静态 Skill 文件了。
它是一个最小可用的个人 AI 工作助手。
二、不要从零造，先拿一个能跑的插件来改
AI Coding 最适合的入门方式，不是白纸创造，而是拿一个成熟结构做替换。
昨天中途我就换了打法。
如果让大家从零描述插件，很多人会卡住。
因为他们不知道插件里应该有什么文件，也不知道 manifest、侧边栏、设置页、页面脚本分别负责什么。
所以最好的方式是先学会抄结构。
找一个已经能跑的插件包。
先解压。
再用 Qoder 这类 AI Coding 工具打开整个文件夹。
第一步只改名字。
第二步再把你的 Skill 塞进去。
第三步才去 Chrome 里加载和测试。
这个顺序很重要。
你不是在炫技。
你是在把一个旧助手，改造成带有你专业能力的新助手。
三、手把手实操：把 Skill 封进浏览器插件
真正的入门，不是写出最完整的插件，而是跑通第一条闭环。
下面这套步骤，适合第一次做的人照着走。
不要跳步。
很多问题不是模型不会，而是文件夹选错、设置没保存、插件没刷新。
第 0 步，先准备三样东西。
一个已经能跑的浏览器插件包。
一份你认真写好的 Skill，例如流程质量评估 Skill。
一个可用的大模型 API Key，例如 DeepSeek 的 API Key。
第 1 步，把插件包解压，不要直接在压缩包里改。
如果你拿到的是 zip 文件，先右键解压。
解压后应该得到一个普通文件夹。
打开文件夹，确认里面能看到 manifest.json。
Chrome 加载扩展时，要选的就是包含 manifest.json 的这个文件夹。
不要选它的上一层。
也不要直接选 zip。
第 2 步，用 AI Coding 工具打开整个插件目录。
我昨天演示的是 Qoder。
在 Qoder 里按 Command + O。
选择刚才解压出来的插件文件夹，不要只粘贴单个文件。
等左侧能看到文件树，再开始提要求。
因为 AI Coding 工具必须看到完整项目，才知道该改哪些文件。
第 3 步，先做一个最小改动：改插件名字。
先不要让它重构。
先让它改名字。
“请你先阅读这个插件项目结构。不要重写项目，只把插件名称、页面标题、按钮文案里出现的旧名称，统一改成‘金小华超级助理’。改完告诉我你改了哪些文件。”
这一步用来确认它真的读懂了项目结构。
正常情况下，它会改 manifest.json，也会改页面标题和按钮文案。
第 4 步，把你的 Skill 塞进去。
先不用追求动态加载和版本管理。
第一次教学，直接内置最容易跑通。
把 SKILL.md 里的完整内容复制出来。
如果有评估维度、输出模板、禁止事项、红黄绿标准，也一起贴进去。
“请把下面这份流程质量评估 Skill 内置到当前插件中。要求：1. 保留插件原来的页面读取能力；2. 用户点击分析时，把当前页面内容和这份 Skill 一起交给模型；3. 不要删除 API Key 设置功能；4. 如果 Skill 太长，请单独放到一个配置文件或常量文件里；5. 改完后告诉我入口按钮在哪里。”
第 5 步，让它先跑通“当前页面分析”，不要急着加十个功能。
一个插件最开始只需要完成一条链路：打开网页，点击插件，读取当前页面，按 Skill 输出结果。
“请检查当前插件是否能获取当前页面正文。如果不能，请补齐必要的 content script 或页面读取逻辑。先只做一个‘分析当前页面’按钮，点击后输出流程质量评估结果。”
第 6 步，安装 Chrome 浏览器，并进入扩展程序管理页。
打开 Chrome，右上角三个点，进入“扩展程序”，再进入“管理扩展程序”。
也可以在地址栏直接输入 chrome://extensions/。
进入后打开右上角“开发者模式”。
第 7 步，加载未打包的扩展程序。
页面左上角会出现“加载已解压的扩展程序”，有的版本叫“加载未打包的扩展程序”。
选择刚才那个插件文件夹。
再次提醒：一定要选包含 manifest.json 的文件夹。
选完后，扩展页面里应该会多出一个卡片，名字就是你刚改过的插件名。
如果页面报错，先点“错误”看提示。
常见问题通常是文件夹选错、manifest.json 格式错、代码引用了不存在的文件。
这时候把错误提示复制给 Qoder，让它按错误修。
第 8 步，把插件固定到浏览器右上角。
插件安装成功后，不一定会显示在工具栏。
随便打开一个网页，点 Chrome 右上角像拼图一样的扩展程序图标。
找到刚才安装的插件。
点击右侧图钉，把它固定到浏览器右上角。
以后你打开任何网页，都能从这里点开它。
第 9 步，打开插件设置，填入模型 API Key。
点开插件，找到右上角齿轮，进入设置页。
把 API Key 填进去。
如果你用 DeepSeek，可以搜索“DeepSeek 开发者平台”，登录后先少量充值。
然后找到 API Keys 或 API Key 管理，点击创建。
创建成功后，复制 key。
回到插件设置页，粘贴进去。
保存。
注意：API Key 不要发群里，不要截图外传，最好放到自己的密码管理工具里。
第 10 步，用一份真实材料测试，不要只测空白页面。
找一份真实但可以测试的材料，比如流程制度页面、合同样例、需求文档。
打开页面，点击插件，再点“分析当前页面”。
如果它只说“请提供材料”，说明页面读取没通。
如果它泛泛而谈，说明 Skill 没有真正进入提示词。
如果它提示未配置 key，说明设置没保存，或者代码没有正确读取配置。
第 11 步，把问题一个一个丢回给 Qoder 修。
把 Chrome 扩展页面的错误提示复制下来。
把插件界面的异常提示复制下来。
页面读取不到，就告诉它：“当前页面内容没有传入模型”。
API Key 不生效，就告诉它：“设置页保存后，分析请求仍然提示未配置 key”。
每次只修一个问题。
修完后，在 chrome://extensions/ 找到插件卡片，点刷新图标。
然后回到网页重新测试。
四、跑通的标准：不是能打开，而是能嵌进工作流
一个插件有没有做成，看它能不能在真实工作页面里完成一次专业判断。
只要能打开，不算完成。
按钮能点，也不算完成。
真正跑通，要看五件事。
它能固定在浏览器右上角。
它能读取当前页面。
它能带着你的 Skill 去分析。
它能调用你配置的大模型。
它能输出一份像样的诊断结果。
这就是“潜入工作流”的意思。
AI 不再是你单独打开的聊天窗口。
它开始贴着你的工作材料运行。
你看合同，它就在合同旁边。
你看流程，它就在流程旁边。
你看需求，它就在需求旁边。
这对流程顾问、法务顾问、产品经理、项目经理都很关键。
因为专业能力不再只是写在文档里。
它可以被封装进工具，跟着真实工作场景一起出现。
昨天这件事花了一个半小时。
中间会出错，会报错，会加载失败。
但这些问题都值得经历。
你会第一次感觉到：AI Coding 不是让你变程序员，而是让你把自己的专业能力做成第一版产品。
资料核查：本文关于 Skill 目录、SKILL.md 与 supporting files 的表述，参考了 Claude Code Skills 文档；关于 Chrome 本地加载未打包扩展与开发者模式，参考了 Chrome Extensions Hello World 文档；关于浏览器侧边栏能力，参考了 Chrome sidePanel API 文档；关于模型 API Key 与 Bearer Auth，参考了 DeepSeek API 文档。