零基础搭建本地 AI 浏览器插件:从安装到跑通
学会安装 Node.js、下载项目、配置 Chrome 插件,跑通一个能分析浏览历史的本地 AI 工具。
准备工作:你需要什么
在开始之前,请确保你已安装 Node.js(一个让电脑能运行 JavaScript 代码的环境)。如果没装,去 nodejs.org 下载 LTS 版本,双击安装,一路点“下一步”即可。另外,你需要一个 Chromium 内核浏览器,比如 Chrome、Edge 或 Brave,版本越新越好。
下载项目并安装依赖
- 打开终端(Windows 按 Win+R 输入 cmd,Mac 打开“终端”应用)。
- 输入
git clone https://github.com/your-repo/openloops.git(如果没装 Git,直接去 GitHub 页面下载 ZIP 解压)。 - 进入项目文件夹:
cd openloops。 - 运行
npm install,等待进度条走完。这步会下载所有需要的代码包。
第一次构建并加载插件
- 在终端输入
npm run build,等待出现“Build complete”字样。 - 打开 Chrome 浏览器,在地址栏输入
chrome://extensions,回车。 - 打开右上角的“开发者模式”开关。
- 点击左上角“加载已解压的扩展程序”,选择项目里的
dist文件夹。 - 此时浏览器工具栏会出现插件图标,点击它就能看到欢迎界面。
验证是否成功
点击插件图标,如果看到一个简洁的欢迎页,说明安装成功。接下来,你可以点击“Scan History”扫描浏览历史,插件会自动分析并分组。注意:扫描过程可能几秒到几分钟,取决于历史记录数量。如果卡住,检查控制台(按 F12)有无报错,常见问题是 Node 版本太低或缺少依赖。
下一步可以做什么
现在你已经跑通了核心功能。如果你想体验 AI 标签和聊天助手,需要申请 API 密钥:去 Claude 平台 注册,获取一个密钥,然后在插件设置里填入。这样,插件就能用 AI 给你的浏览历史自动生成“意图标签”和下一步建议。
内容来源
freeCodeCamp
发布时间
2026-06-21 01:30