Crawl4AI 交互式应用生态C4A-Script 编辑器、LLM Context Builder 与 Chrome 扩展助手实战指南【免费下载链接】crawl4ai Crawl4AI: Open-source LLM Friendly Web Crawler Scraper. Dont be shy, join here: https://discord.gg/jP8KfhDhyN项目地址: https://gitcode.com/GitHub_Trending/craw/crawl4aiCrawl4AI 官方文档内置了一个「Apps Hub」它把浏览器自动化脚本的可视化编写、面向 AI 助手的模块化上下文构建、以及基于 Chrome 扩展的可视化提取这三类高频开发场景做成了开箱即用的交互工具。本文基于 Apps Hub 入口文档 展开逐一拆解三个已上线应用C4A-Script Interactive Editor、LLM Context Builder、Crawl4AI Assistant 扩展的定位、功能与源码级实现细节并梳理四个规划中应用的功能蓝图帮助你在实际项目中直接复用这些工具加速爬虫开发。一、Apps Hub为现代网页抓取提供的交互工具集Apps Hub 的设计目标是让 Crawl4AI 更易于上手和更强大无论你是在学习浏览器自动化、设计数据提取策略还是构建复杂爬虫这些工具都提供了可视化的方式来使用 Crawl4AI 的核心特性。当前 Hub 中收录了六个应用按状态可分为两类应用状态定位C4A-Script Interactive EditorAvailable基于块的可视化浏览器自动化脚本编程环境LLM Context BuilderAvailable为 AI 助手生成聚焦、模块化的 LLM 上下文文件Crawl4AI AssistantChrome 扩展Available点击网页元素即可生成提取 Schema 与 Python 代码Web Scraping PlaygroundComing Soon在真实网站上即时测试提取策略并对比结果Extraction LabComing Soon对比 LLM / CSS / XPath 等提取策略的可视化实验台AI Prompt DesignerComing SoonLLM 提取提示词的 A/B 测试与 Token 成本计算Crawl MonitorComing Soon爬取作业的实时性能、错误与资源监控面板官方文档给出了使用这些应用的四个理由加速学习视觉工具帮助你比单纯阅读文档更快地理解概念、减少开发时间即时生成可运行代码而非从零手写、提升质量在生产环境部署前测试和打磨方案、社区驱动工具基于用户反馈迭代。二、C4A-Script Interactive Editor可视化编写浏览器自动化脚本C4A-Script 是 Crawl4AI 的可视化网页自动化语言Interactive Editor 是一个 Web 端教程 编辑器应用位于 docs/md_v2/apps/c4a-script/其说明见 README。2.1 核心功能编辑器提供五种模式覆盖了从零基础到专家用户的完整学习路径文本编辑器带语法高亮的 C4A-Script 编写环境可视化编辑器基于 Blockly 的拖拽式块编程界面块与文本脚本双向同步录制模式Recording Mode捕获浏览器操作并自动生成脚本实时执行Live Execution脚本在真实页面中即时运行并给出反馈时间线视图Timeline View以可视化方式查看和编辑自动化步骤。2.2 语法速览核心命令与控制流从 README 的教程章节可以看到 C4A-Script 的指令集# 基础交互 GO playground/ WAIT body 2 IF (EXISTS .cookie-banner) THEN CLICK .accept CLICK #start-tutorial指令分三层基础命令GO url导航、WAIT selector timeout或WAIT seconds等待、CLICK selector点击、TYPE text输入、SCROLL DOWN/UP amount滚动控制流IF (condition) THEN action条件、REPEAT (action, condition)循环、PROC / ENDPROC可复用过程定义进阶能力EVAL code执行 JavaScript、SET name value变量、反引号包裹的复杂 CSS 选择器。一个典型的登录流程脚本展示了过程与变量的组合用法PROC login CLICK #username TYPE $username CLICK #password TYPE $password CLICK #login-btn ENDPROC SET username demo SET password pass123 login2.3 本地运行方式前置条件是 Python 3.7 与现代浏览器。启动步骤# 进入教程目录仓库内路径为 docs/md_v2/apps/c4a-script/ pip install -r requirements.txt python server.py # 浏览器打开 http://localhost:8000应用由 Flask 服务承载提供GET /主教程界面、GET /playground/交互式演示环境、POST /execute脚本执行端点、GET /examples/script示例脚本加载等端点。目录结构如下见 项目架构说明docs/md_v2/apps/c4a-script/ ├── server.py # Flask 应用服务器 ├── index.html # 主教程界面 ├── assets/ │ ├── app.js # 主应用逻辑编辑器、执行、状态管理 │ ├── c4a-blocks.js # 自定义 Blockly 块定义 │ ├── c4a-generator.js # 代码生成 │ └── blockly-manager.js # Blockly 集成 ├── playground/ # 交互式演示站点认证、无限滚动、多步表单等 └── scripts/ # 5 个示例 C4A 脚本从源码结构看三个关键组件各司其职TutorialAppapp.js管理 CodeMirror 编辑器、脚本执行与浏览器预览BlocklyManagerblockly-manager.js维护自定义 C4A-Script 块定义、块与文本的双向同步和实时代码生成录制系统负责浏览器事件捕获、事件分组过滤以及 C4A-Script 自动反生成。仓库中还内置了五个渐进式示例脚本可按 01-basic-interaction.c4a、02-login-flow.c4a、03-infinite-scroll.c4a、04-multi-step-form.c4a、05-complex-workflow.c4a 顺序学习。2.4 编写技巧与常见错误处理README 给出的实用建议值得直接照搬使用具体选择器button.submit-order优于泛化的button在交互前显式等待WAIT .form 5用IF (EXISTS ...)兜底处理弹窗把重复逻辑封装为PROC。针对三类典型报错——“Element not found”“Timeout waiting for selector”“Missing THEN keyword”——对应的修复动作分别是点击前加 WAIT 并检查选择器特异性、调大超时并确认元素是否动态加载、为所有 IF 补上THEN关键字。2.5 在 Crawl4AI 中消费脚本编辑器产出的 C4A-Script 可直接嵌入CrawlerRunConfig使用from crawl4ai import AsyncWebCrawler, CrawlerRunConfig config CrawlerRunConfig( urlhttps://example.com, c4a_script WAIT .content 5 IF (EXISTS .load-more) THEN CLICK .load-more WAIT .new-content 3 ) async with AsyncWebCrawler() as crawler: result await crawler.arun(configconfig)语言层面的完整参考可查阅 C4A-Script 核心文档 与 命令参考。三、LLM Context Builder多维度、模块化的 AI 上下文生成器第二个已上线应用是 LLM Context Builder位于 docs/md_v2/apps/llmtxt/它解决的问题在 why.md 中被详细阐述传统llm.txt单一巨型文件对 Crawl4AI 这类复杂库并不好用。3.1 单一巨型 llm.txt 的三个痛点作者在使用 AI 编码助手时总结出三个具体缺陷信息过载与焦点丢失把巨大的单体上下文文件丢给 LLM 时它常常“失焦”——问一个冷门特性时模型会被库中更突出但当下无关的内容带偏信息虽在文档里却没有被正确优先化只有“是什么”没有“怎么做”与“为什么”多数 llm.txt 本质是 API 清单函数、类、参数但有效使用一个灵活库还需要惯用法how与设计动机why否则 AI 助手生成的代码“语法正确但实际低效、不地道”缺少专家式思维引导静态事实清单无法传达资深开发者权衡取舍、避坑经验以及组合特性解决复杂问题的思路。3.2 解决方案组件 × 三维度的矩阵受 Lodash 等模块化库“按需选择”的启发Crawl4AI 的文档上下文被拆分为逻辑组件和每个组件的三种维度_memory.md基础记忆The What组件公开 API、数据结构、配置对象、参数与方法签名的精确事实性参考_reasoning.md推理框架The How Why设计原则、带决策指引的常见任务工作流、最佳实践、反模式、权衡取舍解释目标是让 LLM “像专家一样思考”_examples.md实战示例The Show Me纯代码片段的集合演示各种特性与配置的可运行模式解释性文字最少。这种设计允许按任务自由组合只喂 memory 文件做快速 API 查询、reasoning可搭配 memory用于方案设计、examples 用于查看实际实现或者跨组件组合出针对特定任务的上下文也可以直接使用“Vibe Coding”预设等聚合上下文。3.3 构建器界面与实现llmtxt.js 中定义了 12 个可选组件每个组件对应 docs/md_v2/assets/llm.txt/ 下的一个上下文源组件 ID说明installation安装与部署选项simple_crawling基础爬取操作config_objects浏览器与爬虫配置对象extraction-llm基于 LLM 的结构化提取策略extraction-no-llm无 LLM 的结构化提取策略multi_urls_crawling多 URL 高效爬取deep_crawling多页爬取策略dockerDocker 部署与配置cli命令行接口用法http_based_crawler_strategyHTTP 爬虫策略url_seederURL 播种与发现deep_crawl_advanced_filters_scorers深度爬取过滤与评分界面见 index.html以“组件 × 类型Memory / Reasoning / Examples”的勾选表格形式组织选择提供 Select All / Deselect All 快捷操作、按列整列勾选并在底部实时显示Estimated Tokens估算值后一键下载生成的上下文文件。从源码看token 估算采用单词数 × 2.5的启发式公式estimateTokens函数便于你在喂给模型前预判上下文开销。四、Crawl4AI Assistant点击网页元素生成提取代码的 Chrome 扩展第三个已上线应用是 Crawl4AI Assistant 浏览器扩展代码位于 docs/md_v2/apps/crawl4ai-assistant/。从 manifest.json 可以看到它基于Manifest V3当前版本1.3.0权限收敛为activeTab、storage、downloads三项功能描述为“通过点击与录制构建提取 Schema 和自动化脚本”。4.1 功能清单Click2Crawl点击元素即时构建数据提取 SchemaMarkdown Extraction选中元素导出为干净 MarkdownScript BuilderAlpha录制浏览器操作生成自动化脚本智能元素选择容器/字段两种选择模式并带可视化反馈代码生成直接产出可运行的 Crawl4AI Python 代码纯客户端运行不向外部服务器发送数据。4.2 安装步骤推荐开发模式安装Load UnpackedChrome 打开chrome://extensions/右上角开启 “Developer mode”点击 “Load unpacked”选择crawl4ai-assistant目录即 docs/md_v2/apps/crawl4ai-assistant/工具栏出现扩展图标。仓库内还预打包了 crawl4ai-assistant-v1.3.0.zip 供直接使用。4.3 Click2Crawl 工作流从 README 的操作说明看完整流程为打开目标网站点击工具栏扩展图标点击 “Click2Crawl” 进入捕获模式选择容器元素悬停时元素高亮为蓝色虚线框点击重复出现的容器如商品卡片、文章块选择容器内字段元素高亮变为绿色虚线框逐个点击要提取的数据并命名如title、price、description测试与导出点击 “Test Schema” 立即查看提取结果可导出为 Python 代码、JSON Schema 或 Markdown。视觉反馈约定为蓝色虚线 容器选择模式绿色虚线 字段选择模式实线框表示已选中元素浮动工具栏显示当前模式与状态按ESC可取消当前捕获会话。4.4 生成的代码长什么样导出的 Python 文件包含三部分所选容器的 HTML 片段HTML_SNIPPET、基于点击选择生成的提取查询EXTRACTION_QUERY、以及两个函数——generate_schema()调用 LLM 生成提取 Schema产出generated_schema.json与test_extraction()在真实网站上验证 Schema。使用流程是pip install crawl4ai安装依赖、配置好 LLM API key、运行生成的脚本即可把 Schema 接入你的 Crawl4AI 项目。4.5 内部实现结构从 manifest 的 content_scripts 加载顺序可以看到扩展的模块划分click2crawl.js核心捕获逻辑、contentAnalyzer.js页面分析、markdownConverter.js/markdownExtraction.js/markdownPreviewModal.jsMarkdown 转换、提取与预览、scriptBuilder.js脚本录制配合共享工具 content/shared/utils.js 和 Service Workerbackground/service-worker.js。README 还说明其选择器生成策略“优先采用稳定属性”以提高生成选择器在页面结构微调后的存活率。五、规划中的应用从策略实验到实时监控Apps Hub 同时公布了四个 Coming Soon 应用的功能蓝图可以作为后续跟进路线的参考Web Scraping Playground在真实网站上测试提取策略并获得即时反馈支持结果并排对比、性能指标与配置导出Extraction Lab对比 LLM / CSS / XPath 等策略在自有内容上的表现提供性能基准、LLM 策略成本估算与最佳实践建议AI Prompt Designer提示词模板库、A/B 测试界面、Token 用量计算与质量指标Crawl Monitor爬取作业实时统计、错误跟踪调试、资源用量监控与历史分析。值得注意的是Crawl4AI 仓库中已有与之对应的组件实现可作为预览例如 crawler_monitor.py 提供了运行时监控能力而 Docker 部署侧的 monitor 页面 已具备监控界面雏形从源码结构看可以推断这些 Hub 应用会复用现有的监控与执行基础设施。六、小结与延伸阅读Crawl4AI 的 Apps Hub 用三个已上线应用覆盖了“学写自动化脚本C4A-Script 编辑器→ 构建 AI 上下文LLM Context Builder→ 点选生成提取代码Assistant 扩展”的完整工作闭环并以四个规划应用补齐了策略实验与运行监控环节。三个应用均直接位于文档仓库中、无需额外安装即可体验或本地启动编辑器用python server.py起服务、扩展用 Load Unpacked 装入 Chrome、上下文构建器打开页面勾选即得文件。进一步深入时建议按此顺序阅读C4A-Script 核心文档、AsyncWebCrawler API 参考、高级特性集成指南以及各应用的 READMEC4A-Script 教程、Assistant 扩展、LLM 上下文设计理念。【免费下载链接】crawl4ai Crawl4AI: Open-source LLM Friendly Web Crawler Scraper. Dont be shy, join here: https://discord.gg/jP8KfhDhyN项目地址: https://gitcode.com/GitHub_Trending/craw/crawl4ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Crawl4AI 交互式应用生态：C4A-Script 编辑器、LLM Context Builder 与 Chrome 扩展助手实战指南
Crawl4AI 交互式应用生态C4A-Script 编辑器、LLM Context Builder 与 Chrome 扩展助手实战指南【免费下载链接】crawl4ai Crawl4AI: Open-source LLM Friendly Web Crawler Scraper. Dont be shy, join here: https://discord.gg/jP8KfhDhyN项目地址: https://gitcode.com/GitHub_Trending/craw/crawl4aiCrawl4AI 官方文档内置了一个「Apps Hub」它把浏览器自动化脚本的可视化编写、面向 AI 助手的模块化上下文构建、以及基于 Chrome 扩展的可视化提取这三类高频开发场景做成了开箱即用的交互工具。本文基于 Apps Hub 入口文档 展开逐一拆解三个已上线应用C4A-Script Interactive Editor、LLM Context Builder、Crawl4AI Assistant 扩展的定位、功能与源码级实现细节并梳理四个规划中应用的功能蓝图帮助你在实际项目中直接复用这些工具加速爬虫开发。一、Apps Hub为现代网页抓取提供的交互工具集Apps Hub 的设计目标是让 Crawl4AI 更易于上手和更强大无论你是在学习浏览器自动化、设计数据提取策略还是构建复杂爬虫这些工具都提供了可视化的方式来使用 Crawl4AI 的核心特性。当前 Hub 中收录了六个应用按状态可分为两类应用状态定位C4A-Script Interactive EditorAvailable基于块的可视化浏览器自动化脚本编程环境LLM Context BuilderAvailable为 AI 助手生成聚焦、模块化的 LLM 上下文文件Crawl4AI AssistantChrome 扩展Available点击网页元素即可生成提取 Schema 与 Python 代码Web Scraping PlaygroundComing Soon在真实网站上即时测试提取策略并对比结果Extraction LabComing Soon对比 LLM / CSS / XPath 等提取策略的可视化实验台AI Prompt DesignerComing SoonLLM 提取提示词的 A/B 测试与 Token 成本计算Crawl MonitorComing Soon爬取作业的实时性能、错误与资源监控面板官方文档给出了使用这些应用的四个理由加速学习视觉工具帮助你比单纯阅读文档更快地理解概念、减少开发时间即时生成可运行代码而非从零手写、提升质量在生产环境部署前测试和打磨方案、社区驱动工具基于用户反馈迭代。二、C4A-Script Interactive Editor可视化编写浏览器自动化脚本C4A-Script 是 Crawl4AI 的可视化网页自动化语言Interactive Editor 是一个 Web 端教程 编辑器应用位于 docs/md_v2/apps/c4a-script/其说明见 README。2.1 核心功能编辑器提供五种模式覆盖了从零基础到专家用户的完整学习路径文本编辑器带语法高亮的 C4A-Script 编写环境可视化编辑器基于 Blockly 的拖拽式块编程界面块与文本脚本双向同步录制模式Recording Mode捕获浏览器操作并自动生成脚本实时执行Live Execution脚本在真实页面中即时运行并给出反馈时间线视图Timeline View以可视化方式查看和编辑自动化步骤。2.2 语法速览核心命令与控制流从 README 的教程章节可以看到 C4A-Script 的指令集# 基础交互 GO playground/ WAIT body 2 IF (EXISTS .cookie-banner) THEN CLICK .accept CLICK #start-tutorial指令分三层基础命令GO url导航、WAIT selector timeout或WAIT seconds等待、CLICK selector点击、TYPE text输入、SCROLL DOWN/UP amount滚动控制流IF (condition) THEN action条件、REPEAT (action, condition)循环、PROC / ENDPROC可复用过程定义进阶能力EVAL code执行 JavaScript、SET name value变量、反引号包裹的复杂 CSS 选择器。一个典型的登录流程脚本展示了过程与变量的组合用法PROC login CLICK #username TYPE $username CLICK #password TYPE $password CLICK #login-btn ENDPROC SET username demo SET password pass123 login2.3 本地运行方式前置条件是 Python 3.7 与现代浏览器。启动步骤# 进入教程目录仓库内路径为 docs/md_v2/apps/c4a-script/ pip install -r requirements.txt python server.py # 浏览器打开 http://localhost:8000应用由 Flask 服务承载提供GET /主教程界面、GET /playground/交互式演示环境、POST /execute脚本执行端点、GET /examples/script示例脚本加载等端点。目录结构如下见 项目架构说明docs/md_v2/apps/c4a-script/ ├── server.py # Flask 应用服务器 ├── index.html # 主教程界面 ├── assets/ │ ├── app.js # 主应用逻辑编辑器、执行、状态管理 │ ├── c4a-blocks.js # 自定义 Blockly 块定义 │ ├── c4a-generator.js # 代码生成 │ └── blockly-manager.js # Blockly 集成 ├── playground/ # 交互式演示站点认证、无限滚动、多步表单等 └── scripts/ # 5 个示例 C4A 脚本从源码结构看三个关键组件各司其职TutorialAppapp.js管理 CodeMirror 编辑器、脚本执行与浏览器预览BlocklyManagerblockly-manager.js维护自定义 C4A-Script 块定义、块与文本的双向同步和实时代码生成录制系统负责浏览器事件捕获、事件分组过滤以及 C4A-Script 自动反生成。仓库中还内置了五个渐进式示例脚本可按 01-basic-interaction.c4a、02-login-flow.c4a、03-infinite-scroll.c4a、04-multi-step-form.c4a、05-complex-workflow.c4a 顺序学习。2.4 编写技巧与常见错误处理README 给出的实用建议值得直接照搬使用具体选择器button.submit-order优于泛化的button在交互前显式等待WAIT .form 5用IF (EXISTS ...)兜底处理弹窗把重复逻辑封装为PROC。针对三类典型报错——“Element not found”“Timeout waiting for selector”“Missing THEN keyword”——对应的修复动作分别是点击前加 WAIT 并检查选择器特异性、调大超时并确认元素是否动态加载、为所有 IF 补上THEN关键字。2.5 在 Crawl4AI 中消费脚本编辑器产出的 C4A-Script 可直接嵌入CrawlerRunConfig使用from crawl4ai import AsyncWebCrawler, CrawlerRunConfig config CrawlerRunConfig( urlhttps://example.com, c4a_script WAIT .content 5 IF (EXISTS .load-more) THEN CLICK .load-more WAIT .new-content 3 ) async with AsyncWebCrawler() as crawler: result await crawler.arun(configconfig)语言层面的完整参考可查阅 C4A-Script 核心文档 与 命令参考。三、LLM Context Builder多维度、模块化的 AI 上下文生成器第二个已上线应用是 LLM Context Builder位于 docs/md_v2/apps/llmtxt/它解决的问题在 why.md 中被详细阐述传统llm.txt单一巨型文件对 Crawl4AI 这类复杂库并不好用。3.1 单一巨型 llm.txt 的三个痛点作者在使用 AI 编码助手时总结出三个具体缺陷信息过载与焦点丢失把巨大的单体上下文文件丢给 LLM 时它常常“失焦”——问一个冷门特性时模型会被库中更突出但当下无关的内容带偏信息虽在文档里却没有被正确优先化只有“是什么”没有“怎么做”与“为什么”多数 llm.txt 本质是 API 清单函数、类、参数但有效使用一个灵活库还需要惯用法how与设计动机why否则 AI 助手生成的代码“语法正确但实际低效、不地道”缺少专家式思维引导静态事实清单无法传达资深开发者权衡取舍、避坑经验以及组合特性解决复杂问题的思路。3.2 解决方案组件 × 三维度的矩阵受 Lodash 等模块化库“按需选择”的启发Crawl4AI 的文档上下文被拆分为逻辑组件和每个组件的三种维度_memory.md基础记忆The What组件公开 API、数据结构、配置对象、参数与方法签名的精确事实性参考_reasoning.md推理框架The How Why设计原则、带决策指引的常见任务工作流、最佳实践、反模式、权衡取舍解释目标是让 LLM “像专家一样思考”_examples.md实战示例The Show Me纯代码片段的集合演示各种特性与配置的可运行模式解释性文字最少。这种设计允许按任务自由组合只喂 memory 文件做快速 API 查询、reasoning可搭配 memory用于方案设计、examples 用于查看实际实现或者跨组件组合出针对特定任务的上下文也可以直接使用“Vibe Coding”预设等聚合上下文。3.3 构建器界面与实现llmtxt.js 中定义了 12 个可选组件每个组件对应 docs/md_v2/assets/llm.txt/ 下的一个上下文源组件 ID说明installation安装与部署选项simple_crawling基础爬取操作config_objects浏览器与爬虫配置对象extraction-llm基于 LLM 的结构化提取策略extraction-no-llm无 LLM 的结构化提取策略multi_urls_crawling多 URL 高效爬取deep_crawling多页爬取策略dockerDocker 部署与配置cli命令行接口用法http_based_crawler_strategyHTTP 爬虫策略url_seederURL 播种与发现deep_crawl_advanced_filters_scorers深度爬取过滤与评分界面见 index.html以“组件 × 类型Memory / Reasoning / Examples”的勾选表格形式组织选择提供 Select All / Deselect All 快捷操作、按列整列勾选并在底部实时显示Estimated Tokens估算值后一键下载生成的上下文文件。从源码看token 估算采用单词数 × 2.5的启发式公式estimateTokens函数便于你在喂给模型前预判上下文开销。四、Crawl4AI Assistant点击网页元素生成提取代码的 Chrome 扩展第三个已上线应用是 Crawl4AI Assistant 浏览器扩展代码位于 docs/md_v2/apps/crawl4ai-assistant/。从 manifest.json 可以看到它基于Manifest V3当前版本1.3.0权限收敛为activeTab、storage、downloads三项功能描述为“通过点击与录制构建提取 Schema 和自动化脚本”。4.1 功能清单Click2Crawl点击元素即时构建数据提取 SchemaMarkdown Extraction选中元素导出为干净 MarkdownScript BuilderAlpha录制浏览器操作生成自动化脚本智能元素选择容器/字段两种选择模式并带可视化反馈代码生成直接产出可运行的 Crawl4AI Python 代码纯客户端运行不向外部服务器发送数据。4.2 安装步骤推荐开发模式安装Load UnpackedChrome 打开chrome://extensions/右上角开启 “Developer mode”点击 “Load unpacked”选择crawl4ai-assistant目录即 docs/md_v2/apps/crawl4ai-assistant/工具栏出现扩展图标。仓库内还预打包了 crawl4ai-assistant-v1.3.0.zip 供直接使用。4.3 Click2Crawl 工作流从 README 的操作说明看完整流程为打开目标网站点击工具栏扩展图标点击 “Click2Crawl” 进入捕获模式选择容器元素悬停时元素高亮为蓝色虚线框点击重复出现的容器如商品卡片、文章块选择容器内字段元素高亮变为绿色虚线框逐个点击要提取的数据并命名如title、price、description测试与导出点击 “Test Schema” 立即查看提取结果可导出为 Python 代码、JSON Schema 或 Markdown。视觉反馈约定为蓝色虚线 容器选择模式绿色虚线 字段选择模式实线框表示已选中元素浮动工具栏显示当前模式与状态按ESC可取消当前捕获会话。4.4 生成的代码长什么样导出的 Python 文件包含三部分所选容器的 HTML 片段HTML_SNIPPET、基于点击选择生成的提取查询EXTRACTION_QUERY、以及两个函数——generate_schema()调用 LLM 生成提取 Schema产出generated_schema.json与test_extraction()在真实网站上验证 Schema。使用流程是pip install crawl4ai安装依赖、配置好 LLM API key、运行生成的脚本即可把 Schema 接入你的 Crawl4AI 项目。4.5 内部实现结构从 manifest 的 content_scripts 加载顺序可以看到扩展的模块划分click2crawl.js核心捕获逻辑、contentAnalyzer.js页面分析、markdownConverter.js/markdownExtraction.js/markdownPreviewModal.jsMarkdown 转换、提取与预览、scriptBuilder.js脚本录制配合共享工具 content/shared/utils.js 和 Service Workerbackground/service-worker.js。README 还说明其选择器生成策略“优先采用稳定属性”以提高生成选择器在页面结构微调后的存活率。五、规划中的应用从策略实验到实时监控Apps Hub 同时公布了四个 Coming Soon 应用的功能蓝图可以作为后续跟进路线的参考Web Scraping Playground在真实网站上测试提取策略并获得即时反馈支持结果并排对比、性能指标与配置导出Extraction Lab对比 LLM / CSS / XPath 等策略在自有内容上的表现提供性能基准、LLM 策略成本估算与最佳实践建议AI Prompt Designer提示词模板库、A/B 测试界面、Token 用量计算与质量指标Crawl Monitor爬取作业实时统计、错误跟踪调试、资源用量监控与历史分析。值得注意的是Crawl4AI 仓库中已有与之对应的组件实现可作为预览例如 crawler_monitor.py 提供了运行时监控能力而 Docker 部署侧的 monitor 页面 已具备监控界面雏形从源码结构看可以推断这些 Hub 应用会复用现有的监控与执行基础设施。六、小结与延伸阅读Crawl4AI 的 Apps Hub 用三个已上线应用覆盖了“学写自动化脚本C4A-Script 编辑器→ 构建 AI 上下文LLM Context Builder→ 点选生成提取代码Assistant 扩展”的完整工作闭环并以四个规划应用补齐了策略实验与运行监控环节。三个应用均直接位于文档仓库中、无需额外安装即可体验或本地启动编辑器用python server.py起服务、扩展用 Load Unpacked 装入 Chrome、上下文构建器打开页面勾选即得文件。进一步深入时建议按此顺序阅读C4A-Script 核心文档、AsyncWebCrawler API 参考、高级特性集成指南以及各应用的 READMEC4A-Script 教程、Assistant 扩展、LLM 上下文设计理念。【免费下载链接】crawl4ai Crawl4AI: Open-source LLM Friendly Web Crawler Scraper. Dont be shy, join here: https://discord.gg/jP8KfhDhyN项目地址: https://gitcode.com/GitHub_Trending/craw/crawl4ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考