ThariqS/ai-newtab

来源：https://github.com/ThariqS/ai-newtab

AI Homepage

一个替你阅读互联网的新标签页。

AI Homepage 将 Chrome 的新标签页替换为一个为你量身生成的页面。一个智能体会查看你实际浏览的内容，打开你关注的页面（以你登录的身份），并根据其中的内容撰写一个全新的首页。它会在后台自动重建，因此每次打开新标签页时内容都是最新的。

一个晨报风格的首页示例。示意图。你的首页基于你自己的浏览内容构建，所以看到的故事会各不相同。

晨报只是其中一种风格。你可以描述任何你想要的外观，下一次构建就会遵循它：一个安静的单栏摘要、一个信息密集的仪表盘、一个绿字黑底的终端风格、或者一本独立杂志。

关于隐私，先说清楚。 为了构建你的首页，该扩展会将你的浏览历史摘要（最常访问的域名、访问次数、部分页面标题）以及最多 8 个页面的清理后 HTML 发送到 Anthropic API，使用的是你自己的 API 密钥。这些页面是在你已登录的浏览器中加载的，因此可能包含私人内容。每次构建结束后，智能体会话和所有上传的页面都会被删除。你的 API 密钥保存在扩展的本地存储中。更多细节请参阅 ARCHITECTURE.md。

安装

你需要 Chrome（或其他 Chromium 浏览器）、Node.js (https://nodejs.org) 20+，以及一个 Anthropic API 密钥 (https://console.anthropic.com)。

git clone https://github.com/ThariqS/ai-newtab.git
cd ai-newtab
npx [email protected] install
npx [email protected] build

（如果你已经安装了 pnpm (https://pnpm.io)，直接使用 pnpm install && pnpm build 也可以。）

然后将其加载到 Chrome 中：

1. 打开 chrome://extensions。
2. 打开右上角的开发者模式。
3. 点击加载已解压的扩展程序，选择 apps/extension/.output/chrome-mv3。

如果 Chrome 询问是否保留更改后的新标签页，选择保留。

你的第一个首页

1. 打开一个新标签页，粘贴你的 Anthropic API 密钥。
2. 点击构建今日首页。
3. 看着它工作。

进度视图会逐步展示每个步骤：准备智能体、读取你的历史记录、在浏览器中打开页面、分析内容，以及撰写你的首页。第一次构建需要几分钟。你可以在它运行期间关闭标签页，因为构建运行在扩展的后台工作者中，会在你打开的任何新标签页中显示。

个性化设置

在新标签页上点击 ⚙️ 设置。

指令。 你在这里写的内容会进入每一次构建，并优先于智能体自身的默认设置。这个输入框同时决定内容和外观：

点击 Save & rebuild 立即应用。

模型。 选择哪个 Claude 模型来撰写你的页面：

• Claude Sonnet 5.5（默认）：质量和成本的最佳平衡。
• Claude Haiku 5.5：最快也最便宜。
• Claude Opus 5.5：最细致的编辑者，也最贵。

新模型从你的下一次构建开始生效。

自动重建。 默认开启。一旦你的首页超过你选择的间隔（6、12、24 或 48 小时），扩展就会在后台安静地重建它。只有在你手动构建过一次之后才会开始，并且不会在间隔内重试失败的构建，所以不会陷入循环。

右上角的 ↻ Rebuild 可以立即重建。

值得了解的事项

• 费用。 每次构建都是一次智能体会话，费用由你的 API 密钥承担。花费取决于模型和读取量。Haiku 是最便宜的选择，你也可以关闭自动重建，只在你要求时才构建。
• 它能看到什么。 它会对你的浏览历史中的网站进行排名，每次构建最多打开 8 个。它会跳过搜索引擎、网页邮箱、银行网站和未登录的营销页面。任何无法打开的页面都会被报告，而不是被隐藏。
• 链接是真实的。 页面上的每个链接都来自智能体实际阅读过的页面。它被明确告知不得编造 URL。
• 中断的构建。 如果 Chrome 在构建中途关闭，下次打开新标签页时会提供 Resume interrupted build（恢复中断的构建）选项。
• 更新。 拉取新代码后，再次运行 npx [email protected] build，然后在 chrome://extensions 中点击扩展的刷新图标。

工作原理

1. getHistory：智能体获得你最常访问域名的排名摘要。
2. getPageHtml：它选择最多 8 个页面，扩展在后台窗口中打开这些页面，进行清理，然后作为文件挂载到智能体的沙箱中。
3. grep / read：智能体在其沙箱内从这些文件中提取标题、帖子和链接。
4. write：它编写一个 React 组件，由新标签页渲染。

扩展的后台工作者直接驱动一个 Claude Managed Agents (https://docs.claude.com) 会话，中间没有服务器。两个自定义工具在扩展中运行，因为它们需要 chrome.history 和 chrome.tabs。其他一切都发生在智能体的沙箱中，shell 访问是关闭的：抓取的页面属于不可信输入。

详情请参阅 ARCHITECTURE.md，了解事件流程、布局以及值得知道的坑。

开发

packages/agent-core   智能体循环：宿主无关，不依赖 chrome.* 或 node:*
apps/extension        MV3 扩展（WXT + React）
harness               在 Chrome 之外运行 agent-core 的 Bun 脚本，以及测试已构建的扩展

pnpm dev             # WXT，带热重载
pnpm typecheck       # 所有包
pnpm test            # 单元测试（不调用 API；需要 Bun）
pnpm extension:test  # 将构建好的扩展加载到无头 Chrome 中（不调用 API）
cp .env.example .env # 添加 ANTHROPIC_API_KEY，然后：
pnpm agent:run       # 使用 fixture 历史记录，对真实 API 进行一次完整构建
pnpm agent:verify    # 检查输出是否确实能渲染

状态

早期实验阶段。这是一个你自己用自己密钥运行的工具。不要原样发布到商店：任何能访问浏览器配置文件的人都可以读取存储的 API 密钥。

许可证

MIT

Thariq (@trq212)： 你现在每个月的 MAX 套餐都会获得 Claude API 额度（$100，或与你套餐匹配的 200），用它来为自己构建更多个性化的 AI 吧！

我做了一个 AI 首页，每天根据我阅读的网站自动生成，并替换了我在 Chrome 中的“新标签页“。