5分钟上手！AnythingLLM浏览器扩展开发全攻略

你是否还在为网页内容无法直接接入大语言模型而烦恼？作为开发者，如何快速构建一个能将任何网页转化为LLM上下文的浏览器插件？本文将带你从零开始开发AnythingLLM浏览器扩展，掌握API密钥管理、内容采集核心技术，5分钟即可完成基础版本部署。

扩展开发准备工作

AnythingLLM浏览器扩展的核心功能是将网页内容转化为LLM可理解的上下文数据，其开发涉及前后端交互与内容处理两大模块。项目中与浏览器扩展相关的核心代码主要分布在以下路径：

• 前端界面组件：frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/
• API密钥管理：frontend/src/models/browserExtensionApiKey.js
• 后端接口：server/endpoints/browserExtension.js

开发前需确保本地已克隆项目仓库：

git clone https://gitcode.com/GitHub_Trending/an/anything-llm
cd anything-llm

API密钥系统实现

扩展与AnythingLLM主程序的通信依赖API密钥认证机制。在前端代码中，BrowserExtensionApiKey模型封装了完整的密钥生命周期管理：

// [frontend/src/models/browserExtensionApiKey.js](https://gitcode.com/GitHub_Trending/an/anything-llm/blob/96bf1276969f4d1d2d1b7c97c59db7dadc81eb51/frontend/src/models/browserExtensionApiKey.js?utm_source=gitcode_repo_files)
const BrowserExtensionApiKey = {
  generateKey: async () => {
    return await fetch(`${API_BASE}/browser-extension/api-keys/new`, {
      method: "POST",
      headers: baseHeaders(),
    }).then(res => res.json());
  },
  revoke: async (id) => {
    return await fetch(`${API_BASE}/browser-extension/api-keys/${id}`, {
      method: "DELETE",
      headers: baseHeaders(),
    }).then(res => res.json());
  }
};

后端通过browserExtensionEndpoints函数实现密钥验证中间件，确保所有扩展请求经过严格的权限校验：

// [server/endpoints/browserExtension.js](https://gitcode.com/GitHub_Trending/an/anything-llm/blob/96bf1276969f4d1d2d1b7c97c59db7dadc81eb51/server/endpoints/browserExtension.js?utm_source=gitcode_repo_files)
app.post(
  "/browser-extension/embed-content",
  [validBrowserExtensionApiKey],
  async (request, response) => {
    // 内容处理逻辑
  }
);

在前端界面中，用户可通过设置页面管理所有API密钥，相关组件位于frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/目录。

内容采集核心功能

扩展的核心能力是将网页内容转化为可嵌入的文档。后端通过CollectorApi处理原始文本：

// [server/endpoints/browserExtension.js](https://gitcode.com/GitHub_Trending/an/anything-llm/blob/96bf1276969f4d1d2d1b7c97c59db7dadc81eb51/server/endpoints/browserExtension.js?utm_source=gitcode_repo_files)
const Collector = new CollectorApi();
const { success, reason, documents } = await Collector.processRawText(
  textContent,
  metadata
);

前端设置界面提供了直观的扩展管理入口，用户可通过侧边栏快速访问：

// [frontend/src/components/SettingsSidebar/index.jsx](https://gitcode.com/GitHub_Trending/an/anything-llm/blob/96bf1276969f4d1d2d1b7c97c59db7dadc81eb51/frontend/src/components/SettingsSidebar/index.jsx?utm_source=gitcode_repo_files)
{
  href: paths.settings.browserExtension(),
  icon: <BrowserExtensionIcon className="h-5 w-5" />,
  label: "Browser Extension",
}

扩展使用流程

1. 生成API密钥
   在主程序设置页面点击"生成新密钥"，系统将创建一对用于扩展认证的密钥对。相关代码实现见NewBrowserExtensionApiKeyModal/index.jsx。

2. 配置扩展
   将生成的密钥输入浏览器扩展配置界面，完成与主程序的连接验证。扩展会通过/browser-extension/check端点验证连接状态。

3. 采集内容
   在任意网页点击扩展图标，选择目标工作区后即可将当前页面内容发送至AnythingLLM进行处理。

开发注意事项

• 扩展开发需遵循Chrome扩展开发规范，manifest文件需包含必要的权限声明
• 内容处理需注意跨域问题，所有API请求需经过主程序中转
• 密钥管理需严格遵循安全最佳实践，避免在客户端存储敏感信息

相关资源

• 官方文档：README.md
• API文档：server/swagger/openapi.json
• 开发指南：CONTRIBUTING.md

通过以上步骤，开发者可以快速构建并集成AnythingLLM浏览器扩展，为用户提供无缝的内容采集体验。扩展源码位于项目的browser-extension目录，采用子模块形式管理。