Gemini cli 源码分析之工具篇-WebFetch工具

Gemini cli 源码分析之工具篇-WebFetch工具

查看完整的Gemini cli 源码分析系列课程 Gemini CLI源码启示录:AI工程师必须掌握的终端开发范式

WebFetch工具深度分析

概述

WebFetch工具 (packages/core/src/tools/web-fetch.ts) 是Gemini CLI项目中的一个核心工具,用于从URL获取和处理网页内容。该工具结合了AI能力和传统网页抓取技术,提供了智能的内容获取和处理功能。

核心架构

主要组件

WebFetchTool(主工具类) ├── WebFetchToolInvocation(工具调用实现) ├── parsePrompt(URL解析函数) └── GroundingMetadata(引用和元数据接口)

继承关系

  • WebFetchTool 继承自 BaseDeclarativeTool<WebFetchToolParams, ToolResult>
  • WebFetchToolInvocation 继承自 BaseToolInvocation<WebFetchToolParams, ToolResult>

核心功能分析

1. URL解析和验证 (parsePrompt)

位置: lines 41-74

exportfunctionparsePrompt(text:string):{ validUrls:string[]; errors:string[];}

功能特点:

  • 从输入文本中提取包含 :// 的tokens
  • 使用 new URL() 验证URL格式
  • 协议白名单:仅支持 http:https:
  • 返回有效URL列表和错误信息

安全考虑:

  • 拒绝非标准协议(如 file:, ftp: 等)
  • 严格的URL格式验证

2. 双重执行策略

主执行路径 (execute)

位置: lines 240-380

执行流程:

  1. 解析输入prompt中的URLs
  2. 检查私有IP地址
  3. 调用Gemini AI的 urlContext 工具
  4. 处理grounding metadata和citations
  5. 格式化输出结果

核心代码:

const response =await geminiClient.generateContent([{ role:'user', parts:[{ text: userPrompt }]}],{ tools:[{ urlContext:{}}]}, signal,DEFAULT_GEMINI_FLASH_MODEL,);
Fallback执行路径 (executeFallback)

位置: lines 121-196

触发条件:

  • 检测到私有IP地址
  • 主执行路径失败
  • URL检索状态异常

功能特点:

  • 直接HTTP请求获取内容
  • GitHub URL特殊处理(blob → raw转换)
  • HTML到文本的智能转换
  • 内容长度限制 (MAX_CONTENT_LENGTH = 100000)

3. GitHub URL处理

特殊转换逻辑:

if(url.includes('github.com')&& url.includes('/blob/')){ url = url .replace('github.com','raw.githubusercontent.com').replace('/blob/','/');}

应用场景:

  • GitHub文件查看页面 → 原始文件内容
  • 便于获取可读的源代码内容

4. 内容处理机制

HTML到文本转换

使用 html-to-text 库:

textContent =convert(rawContent,{ wordwrap:false, selectors:[{ selector:'a', options:{ ignoreHref:true}},{ selector:'img', format:'skip'},],});
内容类型判断
  • text/html: 进行HTML到文本转换
  • 其他类型: 保持原始文本格式

Grounding和Citation系统

Grounding Metadata结构

接口定义 (lines 76-95):

interfaceGroundingChunkWeb{ uri?:string; title?:string;}interfaceGroundingSupportSegment{ startIndex:number; endIndex:number; text?:string;}

Citation插入算法

位置: lines 325-344

算法步骤:

  1. 收集所有grounding支持信息
  2. 生成citation标记 [1], [2]
  3. 按位置倒序插入(避免位置偏移)
  4. 在响应文本末尾添加sources列表

示例输出:

响应内容... [1][2] Sources: [1] 页面标题 (https://example.com) [2] 另一页面 (https://another.com) 

安全机制

1. 私有IP检测

功能: 使用 isPrivateIp() 检查URL是否指向私有网络
处理: 检测到私有IP时自动切换到fallback模式

2. 协议白名单

限制: 仅允许 http:https: 协议
防护: 防止 file://, javascript: 等潜在危险协议

3. 内容大小限制

限制: MAX_CONTENT_LENGTH = 100000 字符
目的: 防止内存溢出和处理超大文件

4. 超时控制

设置: URL_FETCH_TIMEOUT_MS = 10000 (10秒)
应用: 防止长时间阻塞请求

错误处理机制

错误类型定义

enum ToolErrorType {WEB_FETCH_FALLBACK_FAILED,WEB_FETCH_PROCESSING_ERROR,}

错误处理策略

  1. URL解析错误: 返回具体的格式错误信息
  2. 网络请求失败: 提供HTTP状态码和错误描述
  3. 内容处理错误: 捕获并格式化异常信息
  4. Fallback失败: 记录遥测数据并返回错误

遥测集成

Fallback尝试记录:

logWebFetchFallbackAttempt(this.config,newWebFetchFallbackAttemptEvent('private_ip'));

事件类型:

  • 'private_ip': 私有IP触发fallback
  • 'primary_failed': 主执行路径失败

工具配置和验证

参数验证 (validateToolParamValues)

位置: lines 418-436

验证规则:

  1. prompt参数不能为空
  2. 至少包含一个有效URL
  3. 所有URL必须格式正确
  4. 协议必须是http或https

工具描述

用户可见描述:

"Processes content from URL(s), including local and private network addresses (e.g., localhost), embedded in a prompt. Include up to 20 URLs and instructions (e.g., summarize, extract specific data) directly in the 'prompt' parameter." 

支持特性:

  • 最多20个URL
  • 本地和私有网络地址支持
  • 嵌入式指令处理

使用示例

基本用法

{ prompt:"Summarize https://example.com/article and extract key points"}

多URL处理

{ prompt:"Compare the content from https://site1.com and https://site2.com, focusing on their main features"}

GitHub代码分析

{ prompt:"Explain the code in https://github.com/user/repo/blob/main/src/file.js"}

性能优化

1. 内容截断

  • 限制处理内容长度,避免超大文档影响性能
  • 保持响应时间在可接受范围内

2. 智能Fallback

  • 仅在必要时使用fallback机制
  • 减少不必要的双重请求

3. 并行处理能力

  • 支持在单个prompt中处理多个URL
  • Gemini AI模型并行处理能力

技术债务和改进建议

当前限制

  1. 单URL Fallback: Fallback模式目前只处理第一个URL
  2. 内容类型支持: 主要针对HTML和文本,对其他格式支持有限
  3. 缓存机制: 缺少内容缓存,重复请求相同URL会重新获取

建议改进

  1. 多URL Fallback支持:
// 建议改进:支持多URL的fallback处理for(const url of urls){// 处理每个URL}
  1. 内容缓存:
// 建议添加缓存层const cached =await cache.get(url);if(cached)return cached;
  1. 更丰富的内容类型支持:
  • PDF文档处理
  • 结构化数据(JSON、XML)解析
  • 媒体文件元数据提取

总结

WebFetch工具是Gemini CLI中一个设计精良的组件,它成功地将AI能力与传统网页抓取技术结合,提供了:

优势

  • 智能内容处理: 结合Gemini AI的理解能力
  • 健壮的错误处理: 多层次的fallback机制
  • 安全防护: 全面的安全检查和限制
  • 用户友好: 简洁的接口和清晰的错误信息

技术亮点

  • Grounding和Citation系统提供可追溯的信息来源
  • GitHub URL特殊处理增强了开发者体验
  • 私有网络支持扩展了使用场景
  • 灵活的内容处理适应不同数据格式

该工具展现了现代AI工具设计的最佳实践,平衡了功能性、安全性和易用性,为用户提供了可靠的网页内容获取和处理能力。

Read more

GLM-4.6V-Flash-WEB Web界面使用指南,拖图就出结果

GLM-4.6V-Flash-WEB Web界面使用指南,拖图就出结果 你不需要配置环境、不用写一行推理代码、甚至不用打开终端——只要把一张截图拖进浏览器窗口,几秒钟后,它就能告诉你图里写了什么、画了什么、哪里有问题。这不是未来预告,而是你现在就能在本地跑起来的真实体验。 GLM-4.6V-Flash-WEB 是智谱AI最新开源的轻量级视觉语言模型,专为Web端实时交互而生。它不像某些“实验室模型”那样只存在于论文和Benchmark表格里,而是真正做到了:部署快、启动快、响应快、上手更快。一块RTX 3090,一个浏览器,一次拖拽,结果即刻呈现。 本文不讲训练原理,不列参数表格,不堆技术术语。我们只聚焦一件事:怎么用好它的Web界面?从零开始,到稳定产出,每一步都清晰可操作。 1. 为什么说“拖图就出结果”不是宣传话术? 很多多模态模型标榜“支持图文理解”,但实际用起来才发现:要装依赖、改路径、调精度、修CUDA版本、

前端防范 XSS(跨站脚本攻击)

目录 一、防范措施 1.layui util  核心转义的特殊字符 示例 2.js-xss.js库 安装 1. Node.js 环境(npm/yarn) 2. 浏览器环境 核心 API 基础使用 1. 基础过滤(默认规则) 2. 自定义过滤规则 (1)允许特定标签 (2)允许特定属性 (3)自定义标签处理 (4)自定义属性处理 (5)转义特定字符 常见场景示例 1. 过滤用户输入的评论内容 2. 允许特定富文本标签(如富文本编辑器内容) 注意事项 更多配置 XSS(跨站脚本攻击)是一种常见的网络攻击手段,它允许攻击者将恶意脚本注入到其他用户的浏览器中。

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

目录 1. 打开浏览器开发者工具 2. 使用 Network 面板 3. 查看具体的API请求 a. Headers b. Payload c. Response d. Preview e. Timing 4. 实际操作步骤 5. 常见问题及解决方法 a. 无法看到API请求 b. 请求失败 c. 跨域问题(CORS) 作为一名后端工程师,理解前端如何调用接口、传递参数以及接收返回值是非常重要的。下面将详细介绍如何通过浏览器开发者工具(F12)查看和分析这些信息,并附带图片案例帮助你更好地理解。 1. 打开浏览器开发者工具 按下 F12 或右键点击页面选择“检查”可以打开浏览器的开发者工具。常用的浏览器如Chrome、Firefox等都内置了开发者工具。下面是我选择我的一篇文章,打开开发者工具进行演示。 2. 使用

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例)

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例) 前端开发中最令人头疼的莫过于那些难以定位的UI问题——元素错位、样式冲突、响应式失效...传统调试方式往往需要反复修改代码、刷新页面、检查元素。现在,通过Cursor编辑器集成的Codex功能,你可以直接用截图交互快速定位和修复这些问题。本文将带你从零开始,掌握这套革命性的调试工作流。 1. 环境准备与基础配置 在开始之前,确保你已经具备以下环境: * Cursor编辑器最新版(v2.5+) * Node.js 18.x及以上版本 * React 18项目(本文以Chakra UI 2.x为例) 首先在Cursor中安装Codex插件: 1. 点击左侧扩展图标 2. 搜索"Codex"并安装 3. 登录你的OpenAI账户(需要ChatGPT Plus订阅) 关键配置项: // 在项目根目录创建.