跳到主要内容阿里开源 Page-Agent:一行 JS 代码让大模型寄生前端 DOM | 极客日志JavaScriptSaaSAI大前端
阿里开源 Page-Agent:一行 JS 代码让大模型寄生前端 DOM
Page-Agent 是阿里开源的端侧网页智能体,通过注入单行 JS 脚本实现大模型对前端 DOM 的直接操控。它采用 Client-First 架构,无需后端改造即可复用用户登录态,利用 DOM 脱水技术降低 Token 消耗并提升响应速度。支持多模型接入及人机协同安全机制,适用于表单填充、SaaS 升级及跨系统协作场景,但需注意 Canvas 渲染页面的局限性。
17396582024 浏览 阿里开源 Page-Agent:一行 JS 代码让大模型寄生前端 DOM
当传统的自动化脚本还在艰难地寻找 DOM 节点时,Page-Agent 已经在你的网页里主动问用户:'这份 30 个字段的报销单,我已经帮你填好了,还需要核对一下再提交吗?'
一、前言:前端交互范式的转变
近期 GitHub 上出现了一个现象级的开源项目——Page-Agent。如果说过去两年的 Web AI 创新多集中在后端的 API 调用,那么 Page-Agent 则是一场属于前端和界面的变革。
这不仅仅是一个工具,更是对'云端算力霸权'和'重度后端依赖'的一次反抗。它不依赖 Python 环境,不需要跑 Docker 容器,完全基于浏览器原生 JavaScript。从 SaaS 创业者到企业内部 ERP 系统的架构师,全球的开发者正在自发地将其接入到古老的后台系统中。
用户对它的一致评价是:
'这才是 SaaS 产品的 Copilot 应该成为的样子。'
'一旦加进系统,用户就再也不想自己去点鼠标了。'
'它不是在分析网页,而是在真刀真枪地帮你操作网页。'
Page-Agent 到底是什么?为什么它能在短时间内引发如此轰动?更重要的是——它对你我意味着什么?
二、Page-Agent 的本质:不只是浏览器插件
如果说传统的 Playwright 或者 Puppeteer 是被困在服务器里、只能听从硬编码指令的牵线木偶,那么 Page-Agent 就是那个直接'寄生'在你网页内部、拥有视觉和触觉的超级操作员。
2.1 一句话定义
Page-Agent 不是一个传统的自动化测试工具,Page-Agent 是一个完全运行在浏览器环境下的、能直接将自然语言转化为 DOM 操作的'意图执行'层。
它不同于必须让用户额外安装的 Chrome 插件,也不同于笨重的桌面级 RPA 工具。市面上的 Web 自动化方案大多停留在'基于规则的脚本回放'层面:界面的 UI 元素一旦改变,脚本就会随之崩溃。而 Page-Agent 的设计哲学是**'上下文感知与动态执行'。它不仅仅是作为一个外挂存在,它更是无缝融入**了你当前的网页生态——当然,这一切都建立在极简的接入成本之上。
我们用三个核心维度来重新丈量 Page-Agent 与传统自动化方案的区别:
| 维度 | 传统自动化 (Puppeteer/RPA) | Page-Agent 的变革 | 核心价值 |
|---|
| 运行环境 | Server-Based 需要 Node.js/Python 甚至完整的无头浏览器。 | Client-First 完全运行在当前网页的 JavaScript 线程中。 | 零后端成本 完美继承当前用户的 Session 和登录态,无需处理鉴权。 |
| 识别模式 | Vision-Heavy 依赖截图和昂贵的多模态视觉大模型(极慢)。 | Text-Based DOM 深度脱水解析 DOM 树结构,纯文本输入大模型。 | 极速且精准 即使没有强大的多模态能力,普通大语言模型也能精准点击。 |
| 交互场域 | Siloed App 运行在后台,用户看不见摸不着。 | In-Page UI 自带 UI 面板直接浮在你的网页上,支持 Human-in-the-loop。 | 无感融入 它就像是你网站原生自带的一个智能客服助手。 |
2.2 架构揭秘:UI + Agent + LLM 铁三角设计
Page-Agent 之所以能在极短时间内俘获众多开发者的心,很大程度上归功于其优雅的沙箱与脱水架构。它没有选择走极其笨重且昂贵的纯视觉识别路线,而是采用了**'前端探针 + 云端大脑'**的分离设计。
User / Natural Language Intent │ ▼ ┌───────────────────────────────┐ │ Page-Agent UI (Iframe) │ ← 隔离的交互面板 (Human-in-the-loop) └──────────────┬────────────────┘ │ (Message/Event) ┌────────┼────────┐ ▼ ▼ ▼ DOM Parser Agent Core LLM Client (脱水脱敏)(意图路由)(可插拔大脑) │ │ │ ▼ ▼ ▼ ================================= Host Webpage (宿主 DOM 环境)=================================
核心组件解析:
1. Agent Core(端侧中枢神经):掌控执行的'超管'
Agent Core 运行在宿主网页的 JavaScript 线程中,它是 Page-Agent 的本体。它不负责深度的语言理解,而是纯粹的行动派:
- 向下扎根:直接触达底层的 DOM API。它能精确计算元素的坐标,模拟人类触发原生的
click、input 和 scroll 等事件,甚至能绕过部分简单的前端拦截机制。
- 状态共享:因为它直接运行在当前网页,它天然拥有用户的 Cookies、Local Storage 和 Session。无需任何复杂的鉴权配置——当前用户能看什么,它就能看什么;用户能点什么,它就能点什么。
2. DOM Parser(高强度脱水器):化繁为简的'透视眼'
这是 Page-Agent 能够替代昂贵多模态视觉大模型的关键所在。现代网页的 DOM 树极其庞大且冗余(充满了无意义的嵌套),DOM Parser 的作用是:
- 结构脱水:智能过滤掉所有的排版与布局标签(如纯展示的
<div>、<span>),只提取出真正'可交互'的节点(如 <button>、<a>、<input>)。
- 属性映射:将这些交互节点连同它们的 aria-label、可见文本转化为极简的结构化文本。这就好比给 AI 发送了一份极度轻量级的'网页骨架地图',大幅度降低了 Token 消耗并遏制了 AI 的幻觉。
- 隐私脱敏:在将页面结构发送给外部大模型之前,自动打码(Mask)密码框或匹配到的敏感财务数据,确保核心业务数据绝不出境。
3. LLM Client(可插拔大脑):模型无关的思考者
Page-Agent 同样坚持了**模型无关性(Model Agnostic)**的设计。它将'如何操作页面'交给了 Agent Core,而将'该做什么'交给了大模型。你可以根据预算和业务场景自由切换它的'智商来源':
- 追求极致推理? 接入 Claude 3.5 Sonnet 或 GPT-4o(应对极其复杂的表单逻辑)。
- 拥抱高性价比? 挂载 通义千问 (Qwen-Max) 或 DeepSeek-V3。
- 企业强隐私要求? 直接指向内网本地运行的 Ollama (Llama 3) 节点。
这种架构的精妙之处在于: UI 负责获取用户意图,Parser 负责将复杂的网页环境翻译给机器,LLM 负责运筹帷幄进行决策,最后交由 Agent Core 在页面上精准落锤。这不仅彻底消灭了维护庞大后端集群的痛点,更让 Web 自动化跨入了真正意义上的'开箱即用'时代。
2.3 Page-Agent 的创新点
Page-Agent 的创新并非简单地在网页里套壳调用大模型 API,而是在运行环境、感知逻辑与人机交互三个维度上实现了网页自动化的范式转移。它试图解决前端 GUI 智能体领域的'不可能三角':复杂的环境配置、高昂的多模态推理成本与极低的用户参与度。
以下通过深度解析配合树形逻辑图,为你拆解这三大核心突破。
1. 架构创新:Client-First 端侧注入 (彻底消灭后端依赖)
深度解析: 传统的 Web 自动化工具(如 Puppeteer、Selenium)面临一个巨大的痛点:它们必须运行在服务器或本地 Node.js 环境中。这意味着你要处理复杂的无头浏览器配置,且极难处理用户的登录态(验证码、动态 Token 等)。Page-Agent 通过'寄生式注入'打破了这一僵局。
- In-Page JavaScript 执行: 它将整个智能体的执行核心打包成了一段纯粹的 JS 脚本。只要在网页里引入这行
<script>,Agent 就直接活在了当前用户的浏览器线程里。
- 天然的 Session 继承: 因为它就在宿主网页内部运行,它天然拥有当前浏览器所有的 Cookie、LocalStorage 和登录 Session。用户能看到什么页面,Agent 就能直接操作什么页面,彻底免去了鉴权开发的噩梦。
[Web 自动化运行环境对比]
│ ├── 路径 A: 传统 Server-Based (如 Playwright)
│ ├── 1. 部署独立的 Node.js/Python 服务器
│ ├── 2. 启动 Headless 浏览器实例 ──>[极其吃内存]
│ ├── 3. 尝试登录 ──>[遭遇图形验证码拦截 ❌]
│ └── 4. 远程下发脚本指令 ──>[网络延迟高,DOM 状态易过期]
│ ├── ★ 路径 B: Page-Agent In-Page 注入
│ ├── 1. 网页头部直接引入 JS (CDN/NPM)
│ │ │ ├── 2. 与宿主同源运行 (Same-Origin)
│ │ ├── 状态复用:完美共享登录态,直接跳过验证码 ✅
│ │ ├── 直接触达:0 毫秒延迟调用原生 DOM API
│ │ └── 零服务器:后端完全无需改造,零算力成本
│ │ │ └── 结果:极轻量级接管
│ └── 业务系统只要加一行代码,瞬间拥有 AI 操控能力
2. 感知降维:高强度 DOM 脱水 (告别多模态依赖)
深度解析: 大多数新一代的 GUI Agent(如各种桌面助手)走的是'视觉流派':把屏幕截图发给视觉大模型(VLM)去寻找点击坐标。这种方式不仅慢(截图上传 + 多模态推理通常需要几秒到十几秒),而且极其昂贵。
- 结构脱水 (Dehydration): Page-Agent 放弃了重度视觉路线,改为'阅读网页骨架'。它内置了强大的 DOM Parser,会把网页里成百上千个用来排版的
<div> 和 <span> 剔除,只留下真正'可交互'的节点(如 <button>, <input>, <a>)。
- 纯文本映射 (Text-Based): 将这些脱水后的交互节点及其
aria-label 转化为极简的 JSON 或文本树发送给大模型。这就像是给 AI 戴上了'透视眼镜',普通的文本大语言模型(如 Qwen 或 GPT-4o-mini)就能轻松胜任,推理速度实现了数量级的提升。
[Page-Agent 网页感知路径]
│ ├── 输入源:极其臃肿的现代前端 DOM 树 (几万行代码)
│ ▼ [DOM Parser (核心脱水引擎)]
│ ├── 过滤层:删掉所有纯展示的 div/svg/样式标签
│ │ │ ├── 提取层 (可交互节点)
│ │ ├── 发现节点:<button id="submitBtn">提交报销</button>
│ │ ├── 发现节点:<input type="text"placeholder="输入金额">
│ │ └── 丢弃节点:<div class="beautiful-shadow-box">...</div>
│ │ │ └── 映射层 (构建轻量级地图)
│ └── 将节点编排为带有唯一 ID 的纯文本结构
│ ▼ [LLM 极速决策]<★ 创新点:纯文本推理>
│ ├── Prompt 输入:[节点 1: 文本框 - 输入金额][节点 2: 按钮 - 提交报销]
│ ├── LLM 思考:"用户让我报销 500 元"
│ └── LLM 输出 ToolCall: input(节点 1, "500") -> click(节点 2)
│ ▼ 动作执行 └── 毫秒级精准触发页面的原生 click/input 事件
3. 交互进化:Iframe 沙箱与 Human-in-the-loop
深度解析: 让 AI 在业务系统(尤其是财务或 ERP 系统)里'乱点'是极其危险的。Page-Agent 并没有追求完全的'盲目自动化',而是巧妙地设计了人机共生边界。
- Iframe 样式沙箱: 它自带的聊天面板悬浮在网页上,但这部分 UI 是运行在独立的 Iframe 中的。这确保了 Agent 自身的 CSS 样式绝对不会污染宿主网页,宿主网页的代码也不会干扰 Agent 的界面。
- Human-in-the-loop (人在回路): 对于高危操作,Agent 的哲学是'只代工,不代签'。当执行'填写一份包含 30 个字段的复杂表单'时,它可以瞬间填完所有内容,但会停在最后一步,把'提交'按钮的决策权留给人类用户。
[Human-in-the-loop 意图执行流]
│ ├── 用户语音/文字输入:"帮我把这两个季度的财报数据导出并发送给老王"
│ ▼ [Agent 规划与拆解]
│ ├── 步骤 1: 点击报表中心
│ ├── 步骤 2: 设置时间筛选为近两季度
│ ├── 步骤 3: 点击导出按钮
│ └── 步骤 4: 发送文件给指定人
│ ▼ [沙箱执行流 (Sandboxed Execution)]
│ │ │ │ ├── 🤖 自动化阶段 (Agent 飞速执行)
│ │ │ ├── [自动] 跳转页面
│ │ │ ├── [自动] 勾选时间框
│ │ │ └── [自动] 生成了导出文件
│ │ │ └── 🛑 高危拦截点 (Human-in-the-loop)
│ ├── Agent 暂停操作
│ ├── UI 面板弹出提示:"报表已生成,即将发送给老王,是否确认?"
│ └── 高亮显示即将点击的【发送】按钮
│ ▼ [人类主理人授权]
│ ├── 检查无误 ──>[点击 ✅ 允许]
│ └── 发现错误 ──>[点击 ❌ 撤销并手动修改]
│ ▼ 最终交付 └── 兼顾极致效率与绝对安全的企业级自动化体验
总结:三大创新点的协同效应
这三个创新点是相辅相成、缺一不可的:端侧注入 (Client-First) 让获取最新的底层 DOM 树结构成为可能;有了原生 DOM,脱水解析引擎才能大显身手,把庞杂的页面压缩成极度轻量的文本,从而使用户免去了昂贵的多模态算力开销;而极轻量的模型加上零后端的架构,使得在前端通过 Iframe 实现 Human-in-the-loop 变得极其丝滑流畅。Page-Agent 将这三者结合,真正实现了低成本、高可靠性的'网页级自动驾驶'。
三、核心功能:为什么说它'真的能接管网页'
Page-Agent 之所以能被称为'重新定义网页交互边界',是因为它彻底击碎了传统 Web 自动化的三大痛点:重度依赖后端、视觉模型昂贵、单页沙箱受限。它不是在'看着'网页,而是真正与网页'融为一体'。
3.1 极简接入:一行代码的魔法
别再为了给公司的 SaaS 系统加上 AI 功能而去推翻重构整个后端 API 了。Page-Agent 的核心哲学是 '不碰后端代码' (Zero Backend Rewrite)。
它不是一个需要用户手动下载的沉重客户端,而是直接嵌入在网页中的'幽灵操作员'。
Page-Agent 对现代前端框架拥有极高的包容度:
| 框架生态 | 状态 | 接入方式与特色 |
|---|
| Vanilla HTML/JS | 稳定 | 一行 <script> CDN 引入,开箱即用,自带 UI 面板。 |
| React / Next.js | 稳定 | NPM 安装,提供无缝的 Hook 集成,完美适配虚拟 DOM。 |
| Vue 3 / Nuxt | 稳定 | 同样支持 NPM 引入,可与现有的响应式状态双向绑定。 |
| Legacy 遗留系统 | 稳定 | 无论你的后台是用 jQuery 还是 JSP 写的,只要有 DOM 树,它就能管。 |
| 场景 | 传统 AI 改造方案 | Page-Agent 的降维打击 |
|---|
| ERP 系统智能化 | 后端开发写了一周的 SQL 和新接口,前端再花三天联调画 UI。 | 前端只需花 3 分钟引入 Page-Agent 脚本。AI 直接复用现有的前端界面,'代替用户点击保存按钮'。 |
对于一个没有研发预算的小团队,只需要在 index.html 结尾粘贴一行 <script src=".../page-agent.js"></script>,你的网站瞬间就拥有了一个具备完整理解力、能自动填表单、点按钮的智能 AI Copilot。
3.2 纯文本 DOM 操控:摆脱昂贵的'视觉依赖'
传统 GUI 智能体(如各种电脑版 RPA 助手)的致命缺陷是重度依赖视觉模型 (VLM)——每次操作都需要对屏幕截图、上传给云端、等待大模型识别按钮的 XY 坐标。这不仅导致操作延迟极高(动辄十秒起步),而且 API 费用极其昂贵,还经常'点歪'。
Page-Agent 采用了极其聪明的 DOM 脱水技术 (DOM Dehydration)。
它内置了一个解析引擎,能瞬间遍历当前网页,剔除所有无关的样式代码(如排版的 div、阴影、背景图),提取出纯净的'可交互意图地图'。
你:'把列表里状态为'待审核'的报销单全部打回,并备注'发票不清晰'。'
Page-Agent 的内部世界:瞬间扫描纯文本 DOM 树。**精准定位到 3 个包含'待审核'文本的行元素。**无需移动鼠标,在毫秒级连续触发底层 API:input(备注框,'发票不清晰') -> click(打回按钮)。
(1 秒后)
Page-Agent:'已为您处理完毕 3 笔待审核订单。'
核心价值: 你不需要昂贵且缓慢的多模态视觉大模型,即使是最基础的纯文本大语言模型,也能通过这份'网页地图'顺畅、精准地操控 UI。
3.3 开放的模型生态(Bring Your Own LLM)
这是一个绝对开放的集市。Page-Agent 将前端的'执行手脚'与云端的'决策大脑'完全解耦。你可以根据你的预算、任务复杂度和隐私要求,随意更换它的'大脑':
- 🧠 智力巅峰 (复杂逻辑处理)
- 支持模型:GPT-4o, Claude 3.5 Sonnet 等国际顶尖模型。
- 适用场景:极端复杂的动态网页应用交互,或者长篇幅文档信息的抽取与录入。
- 🚀 性价比之王 (日常高频任务)
- 支持模型:通义千问 (Qwen-Max)、DeepSeek-V3 等国产模型。
- 适用场景:处理普通的 CRM 表单填写、日常后台系统的导航等。由于这些模型极便宜且原生逻辑能力惊人,是企业落地的首选。
- 🛡️ 隐私堡垒 (绝对数据安全)
- 支持模型:接入 Ollama 运行本地开源模型 (如 Llama-3)。
- 适用场景:处理内网核心 ERP 数据、敏感财务报表或医疗系统。物理断网也能跑,数据绝对不出境。
3.4 跨标签页魔法:从'单兵作战'到'全能外挂'
单纯的 In-page JavaScript 脚本有一个天生的物理限制:浏览器的同源策略 (Same-Origin Policy) 使得它只能被困在当前的标签页里。
但现实工作流往往是跨系统的。为了解决这个终极痛点,Page-Agent 提供了一个可选的 Chrome Extension(浏览器扩展)。
当前端的 JS 探针与这个扩展插件结合时,你的单页智能体瞬间被赋予了'跨 Tab 的外挂级权限'。
- 📊 数据搬运工:
- 你可以在 Tab A(企查查/天眼查)对 Agent 说:'提取这家公司的法人、注册资本和统一社会信用代码。'
- Agent 提取完毕后,自动跨越到 Tab B(你公司的自研 CRM),找到对应的客户表单,并精准填入所有数据。
- 📧 跨系统调度:
- 你可以告诉所在页面的 Agent:'看看我的 Gmail 里今天有没有包含'Invoice'的未读邮件,如果有,帮我把附件里的金额填到这个报销系统的系统里。'
这种由内而外的架构,让 Page-Agent 不仅是一个被动的网页辅助插件,更是一个能在你的数字世界里穿梭执行复杂任务的超级员工。
四、实际使用场景:它如何改变日常工作
别再想象它是那种只能在后台默默跑数据的机械爬虫了。请想象你给公司的每一个网页都雇佣了一个极具耐心、手速极快且永远不会点错的超级业务员。它就住在你的前端代码里,拥有极高的页面权限,而且不需要任何后端接口的支持。
以下是接入了 Page-Agent 后的真实业务场景:
场景 1:Smart Form Filling(终结'表单地狱')
❌ 以前的体验:打开公司的 CRM 或 ERP 系统,面对一个包含 30 个输入框、5 个下拉菜单和一堆级联选项的新建客户表单,业务员只能痛苦地复制粘贴,挨个点击填写,极易漏填填错。
✅ Page-Agent 的体验:业务员直接在界面的悬浮框里语音输入或随手打字,就像在给小助理发微信。
你:'帮我新建一个线索,张三,阿里云华东区销售总监,电话是 138xxxx5678。标签选'高意向',备注里写上下周三下午两点回访。'
Page-Agent:(不到 1 秒钟,页面上的光标仿佛被幽灵接管,输入框飞速闪动)
🎯 "已为您自动定位并填写了姓名、公司、职位及电话字段,'高意向'的下拉菜单已选中,备注已填好。
为了数据安全,我已经停在了最后一步,请您核对无误后手动点击底部的【提交】按钮。"
场景 2:Zero-Cost Copilot(SaaS 产品的零成本 AI 升级)
❌ 以前:创业团队想给自己的 SaaS 产品加一个'一句话导出报表'的 AI 功能。产品经理写 PRD,后端工程师花两周写新的聚合查询 API,前端再花一周画 UI 和联调。
✅ Page-Agent 的体验:前端工程师只花 5 分钟在 index.html 里加了一行 <script> 标签。AI 直接利用现有的前端页面元素来实现功能。
用户:'帮我把这周新增的活跃用户,按所属行业分组导出成 CSV 报表。'
Page-Agent:(它没有去调后台接口,而是直接在界面上模拟人类操作)
🤖 '收到,正在为您操作页面…'🖱️ 自动展开左侧导航,点击【用户管理】。⌨️ *在【注册时间】筛选框输入本周日期范围。*🖱️ *在【状态】下拉菜单中勾选【活跃】。*🖱️ 点击右上角的【导出 CSV】按钮。
📥 '操作完成!报表已触发下载,请在浏览器的下载记录中查看。'
场景 3:The 'Invisible Onboarding'(无障碍与'手把手'的交互式培训)
❌ 以前:新员工入职,面对极其复杂的 B2B 后台(如财务报销系统、复杂的 AWS 控制台),只能去翻阅 50 页的 PDF 手册,或者不断打扰老员工问'那个入口到底藏在哪'。
✅ Page-Agent 的体验:界面再复杂也不怕,只需用自然语言说出意图,Page-Agent 就能将操作过程可视化地呈现出来,仿佛有一个产品专家在手把手教学。
新员工:'我要申请昨天的打车报销,但我找不到入口在哪里了,快帮帮我。'
Page-Agent:'👀 别急,我带您走一遍。您可以直接看着屏幕,注意看高亮的区域。'
(Agent 滚动页面,将【财务中心】高亮显示,模拟鼠标悬停展开二级菜单,然后精准点击【新建差旅报销】)
📝 '已经帮您打开报销单页面了。您可以把打车小票的照片拖进来,如果您不想自己敲键盘,只需要对我说具体的金额和事由,剩下的字我也能帮您填。'
场景 4:Cross-System Bridge(跨越数据孤岛的'搬运工')
结合 Chrome 扩展插件,Page-Agent 的能力可以突破单一网页的限制,成为跨标签页的超级外挂。
❌ 以前:屏幕分屏,疯狂地 Alt+Tab。在企查查上复制法人姓名,切到 CRM 粘贴;复制税号,切到 CRM 粘贴……枯燥且容易串行。
✅ Page-Agent 的体验:跨页数据搬运,一句话搞定。
你(停留在企查查的某公司页面):'提取这家公司的法人、注册资本和统一社会信用代码,然后去旁边的 CRM 标签页里帮我新建一个客户把这些填进去。'
Page-Agent:
相关免费在线工具
- RSA密钥对生成器
生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online
- Mermaid 预览与可视化编辑
基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online
- 随机西班牙地址生成器
随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online
- Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
- Escape 与 Native 编解码
JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
- JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online