极客前沿

零基础搭建本地 AI 浏览器插件:从安装到跑通

2026-06-21 01:30
freeCodeCamp
查看原文

学会安装 Node.js、下载项目、配置 Chrome 插件,跑通一个能分析浏览历史的本地 AI 工具。

准备工作:你需要什么

在开始之前,请确保你已安装 Node.js(一个让电脑能运行 JavaScript 代码的环境)。如果没装,去 nodejs.org 下载 LTS 版本,双击安装,一路点“下一步”即可。另外,你需要一个 Chromium 内核浏览器,比如 Chrome、Edge 或 Brave,版本越新越好。

Tutorial Image

下载项目并安装依赖

  1. 打开终端(Windows 按 Win+R 输入 cmd,Mac 打开“终端”应用)。
  2. 输入 git clone https://github.com/your-repo/openloops.git(如果没装 Git,直接去 GitHub 页面下载 ZIP 解压)。
  3. 进入项目文件夹:cd openloops
  4. 运行 npm install,等待进度条走完。这步会下载所有需要的代码包。

第一次构建并加载插件

  1. 在终端输入 npm run build,等待出现“Build complete”字样。
  2. 打开 Chrome 浏览器,在地址栏输入 chrome://extensions,回车。
  3. 打开右上角的“开发者模式”开关。
  4. 点击左上角“加载已解压的扩展程序”,选择项目里的 dist 文件夹。
  5. 此时浏览器工具栏会出现插件图标,点击它就能看到欢迎界面。

验证是否成功

点击插件图标,如果看到一个简洁的欢迎页,说明安装成功。接下来,你可以点击“Scan History”扫描浏览历史,插件会自动分析并分组。注意:扫描过程可能几秒到几分钟,取决于历史记录数量。如果卡住,检查控制台(按 F12)有无报错,常见问题是 Node 版本太低或缺少依赖。

Tutorial Image

下一步可以做什么

现在你已经跑通了核心功能。如果你想体验 AI 标签和聊天助手,需要申请 API 密钥:去 Claude 平台 注册,获取一个密钥,然后在插件设置里填入。这样,插件就能用 AI 给你的浏览历史自动生成“意图标签”和下一步建议。

内容来源

freeCodeCamp

发布时间

2026-06-21 01:30

返回 AI技术