- 博客(242)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Fetchproxy 、XHRInterceptor 实现与逻辑
文件：web-hooker/web-hooker-chrome/pages/content/src/XHRInterceptor/index.ts。文件：web-hooker/web-hooker-chrome/chrome-extension/src/background/index.ts。文件：web-hooker/web-hooker-chrome/pages/content/src/Fetchproxy/index.ts。四、Fetchproxy 实现与逻辑。八、与服务端的衔接提示。
2025-11-23 10:44:09
9
原创 将网页能力封装为 API
重要说明：当前扩展后台未实现直接连接服务端 WebSocket 的“执行端”，服务端会将 /api/proxy 请求转发到第一个 WS 客户端。要驱动扩展完成页面能力，需要有一个 WS 客户端充当“执行器”，将 WS 收到的请求映射为扩展的 chrome.runtime 消息（例如 fetch-request、workflow-request），并在收到扩展侧响应后回传到服务端。执行端（WS 客户端）模板，用于消费服务端的“网页能力请求”，并将结果回传。六、扩展侧能力映射（执行端如何“封装”成 API）
2025-11-23 10:39:53
36
原创 Monorepo 管理(多包协作与构建)
目标：在 web-hooker-chrome/packages/ 下新增一个工具包供其他页面/包复用。步骤 5：创建第一个共享包（示例：@web-hooker/dom-utils）步骤 6：创建第二个共享包（示例：@web-hooker/net-utils）步骤 0：安装 pnpm（若已安装可跳过）步骤 4：共享 tsconfig（推荐）步骤 7：在应用/页面中使用共享包。步骤 1：初始化仓库（示例目录）五、在其他包/页面中引用共享包。四、创建一个共享包（示例）步骤 8：安装与构建。
2025-11-23 10:29:30
12
原创 Chrome 扩展简单开发
示例：Content（接收来自 Background/Side Panel 的请求并操作 DOM）示例：Background（消息路由、打开 Side Panel、转发到 Content）示例：Side Panel（与 Background 建立长期连接并间接操作页面）示例：Manifest（JSON 版本，入门更直观）安装依赖（如采用 Monorepo/Vite 构建）示例：Popup（触发动作与展示返回）Manifest 配置要点（MV3）常见权限与注入注意事项。扩展的核心组件与职责。
2025-11-23 10:20:19
36
原创 Express + WebSocket 服务开发
三、在同一进程中挂载 WebSocket 服务。二、最小可行的 HTTP 服务。五、消息协议与约定（入门版）六、稳定性与安全的最小实践。一、安装依赖与初始化。
2025-11-23 10:10:29
45
原创 整体导读章节
本文介绍了一个基于Chrome扩展的网页自动化解决方案，具备端到端能力闭环、快速落地验证和面向生产实践三大特点。系统采用Monorepo架构，技术栈包含TypeScript+Vite的Chrome扩展和Node.js+WebSocket的服务端。提供了从环境准备到联调验证的分钟级快速启动指南，支持custom和intercept两种执行模式，并详细说明了消息类型和标识关联机制。最佳实践部分强调了MAIN世界注入、内容桥职责分离等工作流设计原则，同时给出了常见问题的排查方法和团队协作建议。适用于需要实现网页自
2025-11-23 10:00:28
26
原创 WebRtc语音通话前置铃声处理
H5页面WebRTC通话前置铃声播放解决方案 针对移动端静音模式下前置铃声无声问题，提出基于WebRTC的解决方案。传统audio标签播放受系统媒体音量控制，而通过navigator.mediaDevices.getUserMedia激活麦克风后，配合AudioContext可实现通话通道播放，突破静音限制。实现要点包括： 优先获取麦克风权限以提升音频优先级 使用AudioContext创建独立音频处理通道 通过增益调节(gainNode)放大铃声音量 支持循环播放和实时音量控制 该方案避免了原生交互的复杂
2025-11-08 16:03:31
267
原创 AI工作流结合低代码实现卡片渲染
目标实现类似core绑定自定义卡片渲染的效果。从0到1开发低代码平台相对耗时间。于是考虑实现阿里的低代码引擎。整体的实现流程：fill:#333;创建自定义模板保存模板文件返回 temp_id保存 AI 数据结果（包含 temp_id）返回保存成功 & 绑定关系确认访问低代码渲染页面获取模板内容 (temp_id)返回模板定义 + 组件配置请求 AI 数据接口返回 AI 数据将数据绑定模板渲染请求获取已关联 AI 数据 (通过 temp_id)返回 AI 数据。
2025-11-02 09:33:30
866
原创 实现一个简易版前端开发mock服务
命中拦截之后，使用 new Map key为 requestid 记录 promise resolve， 并且发送信息给通知主线程处理requestid 的 handler 函数，处理完之后会将 requestid 、 mock 数据结果发送给 service worker 线程中，然后查找key 为 requestid 的 resolve 并进行处理。解决： 通过将handler 序列化，转换成 json的数据格式，这意味着，handler函数处理需要放在客户端主线程上做处理。
2025-10-19 08:39:40
998
原创 3.2.2 LangChain.js + LangGraph.js 实战
本目录详细介绍了基于 LangGraph 的可视化工作流引擎的设计与实现。该项目通过前后端分离架构，实现了直观的工作流设计和强大的执行能力。可视化设计：基于 React Flow 的直观编辑界面灵活执行：基于 LangGraph 的状态图执行引擎多节点支持：输入、LLM、条件、输出等多种节点类型智能路由：基于条件的动态路由选择易于扩展：插件化的节点执行器架构。
2025-10-04 14:52:02
164
原创 3.1 AI 应用工作流（AI Workflow）
*它将 Agent 的自主性与传统软件工程的确定性相结合，为构建强大的、可信赖的 AI Agent 应用提供了坚实的基础。两者是互补的：一个 AI Agent 内部可以调用一个或多个 AI Workflow 来执行特定的子任务，但 Workflow 本身并不具备 Agent 所拥有的自主决策能力。确定性与可靠性：Agent 的决策过程是动态且不确定的，而 Workflow 是预先定义好的、确定性的流程。可以这样理解：AI Workflow 的出现是为了让 AI Agent 的“执行”更可靠、更可控。
2025-10-04 00:20:28
85
原创 2.1.2 扩展知识：AI 语音通话
在前面，我们已经掌握了构建基于文本的智能应用的核心技术。。AI 语音通话的目标是让用户能够像与真人对话一样，与 AI 进行实时、流畅的语音交流。这背后涉及多项技术的协同工作，而不仅仅是简单的文本转语音（TTS）和语音转文本（ASR）。下面的时序图展示了一个理想的、低延迟的 AI 语音通话系统的端到端流程。这个项目是一个典型的示例，它将前端的实时通信技术与后端的 AI 能力无缝结合，成功构建了一个低延迟、高交互性的语音问答应用。在 WebRTC 语音通话中，前端和后端扮演着不同的角色，但又紧密协作。
2025-10-04 00:03:20
158
原创 1.3 前端框架：加速 LLM 应用开发
传统的 LLM 应用开发需要开发者手动处理大量的后端逻辑，如管理 API 调用、处理多轮对话状态、实现数据流传输等。这些繁琐的工作极大地阻碍了开发效率。幸运的是，现在有一系列专门为 LLM 应用设计的前端框架，它们将这些复杂性抽象化，让前端开发者能够专注于用户体验和业务逻辑。。我们之前讨论的 RAG、Function Calling 和 MCP，都属于的范畴。LLM 扮演的是一个的角色，它根据用户的指令去调用工具。而一个则是一个拥有的智能体。简而言之，。
2025-10-03 22:27:50
258
原创 1.2.3 MCP（Model Context Protocol）
流程：先获取MCP服务工具列表，将对应列表数据发送给LLM,LLM会决策使用哪个工具，并返回对应工具名称以及相关参数，然后通过MCP SDK调用对应工具，将MCP处理结果再次发送给LLM，完成一次MCP调用。MCP (Model Context Protocol) 是一种用于 LLM 与外部工具/服务通信的标准协议，其目标是扩展 LLM 能力，使其不仅生成文本，还能调用外部资源、执行任务。远程mcp有两种注册模式，一种是现代https sse模式，另一种是旧时的sse服务。，正是解决这一挑战的全新范式。
2025-10-03 20:29:24
86
原创 1.2.2 Function Calling：让 LLM 具备“超能力
Function Calling 是一种强大的机制，它允许你将 LLM 的推理能力与外部工具（你编写的函数）连接起来。这让 LLM 从一个“被动的语言生成器”升级为一个“主动的智能决策者”，它能理解用户的意图，并决定何时、如何调用你提供的工具来完成任务。这个函数会根据 LLM 的响应来决定是直接回复用户，还是调用我们提供的函数。在这个 Demo 中，我们将构建一个简单的应用，让 LLM 能够识别用户对天气的查询，并调用一个假想的函数来获取答案。，这个描述将告诉 LLM 这个函数是做什么的，需要哪些参数。
2025-10-03 10:06:11
81
原创 1.2.1 RAG：构建你的专属知识库
的，并且会产生**“幻觉”**（Hallucination）。LLM 知道的只是它训练时的数据，对于你公司的最新产品文档、你个人的技术笔记，它一无所知。请将其复制到支持 Mermaid 渲染的 Markdown 编辑器或平台中，即可看到流程图。如果实现不当，RAG 也会导致不准确的结果。这个过程就像是你问一个同事问题，他不会凭空想象，而是会先去查阅相关的文档，然后综合这些文档的内容来回答你。下面的时序图清晰地展示了这两个阶段中，不同组件之间的交互过程。LLM 很强大，但它们有一个致命的弱点：知识是。
2025-10-03 09:42:39
65
原创 了解 LLM：从概念到实践
本文介绍了大型语言模型（LLM）的核心概念及其对前端开发的变革性影响。LLM通过海量文本训练，能够理解和生成自然语言，使应用具备智能交互能力。其核心工作原理是基于Token的下一个词预测。文章重点讲解了Prompt Engineering技巧，包括清晰指令、上下文提供、角色设定、示例引导和分步思考等策略，并推荐了OpenAI官方指南等学习资源。最后提醒读者提前安装Ollama和注册智谱清言账户以便后续实战练习。
2025-10-03 09:34:16
54
原创 将 iframe 沙箱 + Worker 沙箱组合成完整可视化平台运行时
在可视化大屏 / 低代码平台里，最佳实践是把**UI 运行（第三方组件）与用户自定义逻辑（数据转换/脚本）**分别隔离处理——分别用 iframe（UI 隔离、版本控制、样式隔离）和 Web Worker（逻辑隔离、CPU 隔离、可终止）。把两者组合起来，可以在保证安全与稳定的前提下，提供强大的自定义能力。3. 数据处理：先把 dataSource（api 或 mock 或 js）交给 Worker 沙箱 执行（或主线程 fetch 后交由 Worker 转换），得到最终 data。
2025-08-10 07:16:03
683
原创 Web Worker 沙箱：安全执行用户自定义代码
虽然 Worker 在单独线程运行，不会卡主线程，但如果代码进入死循环，会一直占用 CPU。1. iframe 沙箱 → 渲染 UMD 组件（隔离 UI 与版本冲突）用途 渲染 UMD 组件（UI 隔离） 执行用户 JS（逻辑隔离）2. Worker 沙箱 → 执行自定义代码（隔离逻辑与死循环）• Web Worker 沙箱：解决逻辑执行安全、死循环控制。• iframe 沙箱：解决 UI 版本冲突、样式污染。Web Worker 沙箱：安全执行用户自定义代码。
2025-08-10 07:15:38
799
原创 沙箱隔离渲染组件：iframe 与主线程的安全通信
• 主应用 → iframe：发送组件信息（url、globalName、props、reactVersion）1. 同源策略：如果 iframe 与主应用同源，仍可能通过 document.cookie 读取信息。将用户组件放到 iframe 中运行，通过消息通信传递数据与事件。这样主应用与用户代码在不同 JS 上下文中运行，互不影响。• iframe → 主应用：发送错误日志、事件回调。• 版本冲突（React、Antd 等库版本不同）• 控制 React 版本、组件地址（UMD）
2025-08-10 07:15:24
346
原创 支持 UMD 自定义组件与版本控制：从 Schema 到动态渲染
本文介绍了在低代码平台中支持UMD格式自定义组件的解决方案。通过采用UMD打包格式，实现了用户自定义组件的浏览器原生执行。方案设计了包含URL、全局变量名和版本号的数据结构，并利用iframe沙箱技术实现React版本隔离，有效解决了版本冲突、样式污染等问题。文章详细阐述了iframe沙箱HTML模板的实现方式、React版本动态切换机制以及主应用渲染流程，并提出了基于版本控制的缓存策略。该方案具有完全隔离、版本可控和通用Schema等优势，适用于可视化大屏等场景下的自定义组件管理。
2025-08-09 19:49:28
711
原创 可视化大屏 SDK 数据结构设计：从拖拽组件到最终渲染的全链路
本文介绍了一个基于React和TypeScript的可视化SDK项目的数据结构设计，重点阐述了从组件拖拽到最终渲染的全链路实现。系统采用三层数据结构：组件物料(Material)描述可用组件，布局项(LayoutItem)记录组件位置尺寸，页面配置(PageConfig)存储所有组件参数和布局。通过统一ID绑定实现组件与布局的同步映射，并支持内置组件直接渲染和自定义组件沙箱加载两种方式。设计亮点包括物料实例分离、多种数据源支持以及灵活的参数配置，为可视化编辑器提供了稳定高效的数据支撑。
2025-08-09 19:45:54
581
原创 键盘按键枚举 Key 说明文档
该文档介绍了Key枚举中定义的键盘按键常量及其对应编号，适用于标准 105 键的美式键盘布局。常用于浏览器或桌面端的键盘事件监听、游戏开发、快捷键映射等场景。
2025-06-14 10:02:37
1281
原创 动端React表格组件：支持合并
在移动端开发中，表格组件是一个常见但复杂的需求。相比PC端，移动端表格面临着屏幕空间有限、交互方式不同、性能要求更高等挑战。本文将详细介绍如何从零开始构建一个功能完整的移动端React表格组件，包含固定列、智能单元格合并、排序等高级功能。架构设计：合理的类型定义和组件拆分算法优化：智能合并算法的设计与实现性能优化：虚拟滚动、计算缓存等策略工程化：完整的构建、测试、发布流程。
2025-06-07 16:45:08
1109
原创 基于React + TypeScript构建高度可定制的QR码生成器
在现代Web应用中，QR码已成为连接线上线下的重要桥梁。本文将详细介绍如何使用React + TypeScript + Vite构建一个功能强大、高度可定制的QR码生成器，支持背景图片、文本叠加、HTML模块、圆角导出等高级功能。前往试试前端框架构建工具: Vite 6样式框架QR码生成图像处理状态管理本文详细介绍了如何构建一个功能完整的QR码生成器，涵盖了从架构设计到具体实现的各个方面。
2025-06-01 14:37:46
990
原创 记一个小问题：Cookie 作用域规则
理解根本原因：端口不是 Cookie 作用域的一部分选择合适方案：根据项目需求选择域名隔离、命名空间、路径隔离等方案考虑安全性：在生产环境中正确配置 Cookie 的安全属性保持一致性：开发环境的配置应尽可能接近生产环境通过本文的分析和实践，相信你能够更好地处理 Cookie 作用域相关的问题，构建更加健壮的 Web 应用。
2025-05-26 21:35:29
942
原创 基于WebRTC的实时语音对话系统：从语音识别到AI回复
在当今数字化时代，实时语音交互已成为人机界面的重要组成部分。本文将深入探讨一个基于WebRTC技术的实时语音对话系统，该系统集成了语音识别(ASR)、大语言模型(LLM)和语音合成(TTS)技术，实现了完整的语音到语音的交互体验。
2025-05-18 08:14:11
2279
1
原创 AI员工(gemini2.5)所理解的：browser-use
browser-use 项目旨在提供一个可编程的浏览器环境，专注于DOM解析、可交互元素的识别与处理，以及浏览器状态管理。项目主要分为以下几个模块： browser_use.browser：负责浏览器核心交互与状态管理，包括会话管理、页面生命周期处理和事件监听。 browser_use.dom：处理DOM结构，通过JavaScript在浏览器端提取元素信息并构建简化的DOM树，支持高亮、iframe和shadow DOM处理。 browser_use.dom.clickable_element_proces
2025-05-12 16:12:32
996
原创 员工 (Gemini2.5) 所理解的：DeerFlow
是一个多功能的 AI 应用框架，核心功能包括：DeerFlow 项目采用了典型的分层架构，主要模块如下：模块说明:以播客生成流程中，文本转语音（TTS）部分为例，展示关键函数的调用关系：说明:展示 VolcengineTTS 类中 text_to_speech 方法的数据流：
2025-05-11 10:28:04
1520
原创 初探RAG
在保存到向量数据库的时候，需要对文件的内容处理。这可以使用OpenAI、以及开源的模型做处理。本文是用开源的模型。这样处理会得到一堆向量的数组。以上就是初探RAG的代码。
2025-04-29 21:24:40
273
原创 基于 React 和 CodeMirror 实现自定义占位符编辑器
通过本文，我们实现了一个基于 React 和 CodeMirror 的自定义占位符编辑器。这个编辑器可以在各种场景中使用，如模板系统、表单设计器等。支持更多类型的占位符，如下拉选择、日期选择等添加占位符的拖拽功能，方便用户调整位置实现占位符的嵌套支持添加撤销/重做功能的特殊处理优化移动端的支持希望本文对你实现类似功能有所帮助！如有问题，欢迎在评论区讨论。
2025-04-18 10:38:42
1790
3
原创 ReFormX：现代化的 React 表单解决方案 - 深度解析与最佳实践
本文将深入剖析这两个API的工作原理、适用场景，并通过实际案例分析它们的优缺点，帮助开发者做出明智的性能优化决策。性能优化是一门平衡的艺术，需要开发者理解底层原理，并结合实际场景做出明智的决策。React.memo和useMemo是强大的性能优化工具，但它们需要在正确的场景下使用才能发挥作用。：React DevTools和性能分析工具将提供更精确的优化建议，帮助开发者做出正确的优化决策。：未来版本的React可能会内置更智能的优化机制，自动识别适合使用memo和缓存的场景。
2025-04-06 10:58:15
855
原创 React性能优化的深度解析：React.memo和useMemo的真相与误区
本文将深入剖析这两个API的工作原理、适用场景，并通过实际案例分析它们的优缺点，帮助开发者做出明智的性能优化决策。性能优化是一门平衡的艺术，需要开发者理解底层原理，并结合实际场景做出明智的决策。React.memo和useMemo是强大的性能优化工具，但它们需要在正确的场景下使用才能发挥作用。：React DevTools和性能分析工具将提供更精确的优化建议，帮助开发者做出正确的优化决策。：未来版本的React可能会内置更智能的优化机制，自动识别适合使用memo和缓存的场景。
2025-03-19 13:09:12
1139
原创 JavaScript 元编程革命：Proxy 如何重塑语言本质
通过 Proxy，我们不再只是使用 JavaScript，而是可以重塑 JavaScript，为自己的业务场景定制出更合适的编程模型。在深入研究后，我发现 Proxy 实际上代表了一场 JavaScript 元编程革命，它不仅能够拦截对象操作，更能够从根本上重塑 JavaScript 语言的行为。本文将揭示 Proxy 的真实本质，解释它如何改变了 JavaScript 对象的概念，以及它在响应式编程和微前端架构中的革命性应用。目前，我们使用 Proxy 模拟隔离的 JavaScript 运行环境。
2025-03-17 10:59:57
746
原创 Rust编程实战：Rust实现简单的Web服务，单线程性能问题
当客户端访问 http://127.0.0.1:7878 就会看到 index.html 的内容。如果客户端先访问 http://127.0.0.1:7878/sleep 新起标签页面访问 http://127.0.0.1:7878，如下图。你会发现 http://127.0.0.1:7878 的请求并没有立即显示，而是等待 sleep 请求结束才会显示。相当于接口会存在排队的处理，这对于web服务是个不好的体验。这只是简单处理，实际上现在成熟的框架处理单线程的问题。启动web服务，访问链接获取页面内容。
2025-03-04 14:42:46
447
原创 Rust编程实战：手把手教你打造命令行文本搜索工具！
• 传入一个 字符串切片，通常是 std::env::args().collect::<Vec>() 生成的。• args[0] 是程序本身的名称，因此 args[1] 是搜索关键字，args[2] 是文件路径。做好各种数据处理，按照实现拆分，现在完成最后一步，在main.rs添加最终代码。• String 是 可变的，而 Box 是 不可变的堆分配字符串，节省内存。通过命令行的形式触发，根据用户提供的关键字在文本检索。• file_path: 要搜索的文件路径 (String)
2025-03-03 09:20:30
501
原创 Rust编程实战：初探WebAssembly
WebAssembly正在悄然改变Web开发的格局。无论是提升现有应用性能，还是将桌面级应用搬上Web，它都提供了前所未有的可能性。在Web性能至关重要的今天，掌握WebAssembly技术无疑是前端开发者的一项重要技能。未来，我们可能会看到更多复杂应用通过WebAssembly在浏览器中流畅运行。关注我们，获取更多前沿技术分享！
2025-03-02 09:56:04
1297
中国地区的mysql数据
2020-08-11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人