Media
4 items
Description
面向 HTML 页面的编辑与标注工具，支持本地页面修改保存、批注和跨页面汇总 页改笔是 AI 生成 HTML 之后的精修工具。 AI 生成 HTML 原型、海报、演示稿，做初稿效率很高。但到了精修阶段——改个文案、调个颜色——HTML 就比 PPT 麻烦太多了。改一句"暂存"成"待审核"，你得找到对应的标签、改代码、存盘、刷新。把整个 HTML 复制给 AI 改一句文案？大材小用，还容易把别的地方动坏。 页改笔就是补这个短板的。 【编辑模式】像改 PPT 一样改 HTML • 双击文本元素直接修改文字，跟在 PPT 里改文本框一样简单 • 支持字号、颜色、加粗、倾斜等轻量文字样式调整 • 通过 File System Access API 将修改写回授权目录内的本地 HTML 文件，不弹下载框、不生成副本 • 首次使用授权一次目录，后续编辑静默保存 • 支持撤销上一次编辑；保存失败自动回滚页面 DOM • 编辑过的元素显示绿色虚线边框标记 【标注模式】把"这里要改"精准地交给 AI 交互样式、设计方案要调整时，手动改不现实，交给 AI 才合适。但 AI 需要精确的定位和明确的意图。 • Shift+点击任意元素，弹出标注卡片，填写「修改为」和「修改说明」 • Shift+拖拽框选区域，填整体说明，适合"这里新增一个组件""这块整体重做" • 每条标注自动生成 CSS 选择器路径 + 父级 HTML 上下文（前 600 字符），确保 AI 能精确定位代码行 • A01、A02... 标注编号徽章定位在元素右上角，滚动跟随，点击可重新编辑 • 标注可在待处理、完成、拒绝等状态间切换，便于跟踪评审进度 • 多个 HTML 页面的标注在同一个面板里按页面分组展示 【导出】标注模式的交付物 • 按页面分组打包，每组带页头和条数 • 每条标注包含编号、原文、修改后、修改说明、状态、CSS 选择器、HTML 上下文；区域标注还包含坐标、尺寸和覆盖元素 • 两种格式：文本（给人看）和 JSON（给程序处理） • 一键复制到剪贴板，可手动粘贴到 AI 对话框、Issue、PRD 或开发文档 【适合谁】 • 用 AI 生成 HTML 原型/海报/演示稿，想快速改文案和轻量样式又不想把整个 HTML 发给 AI 的人 • 需要调整 AI 初稿的交互样式、设计方案，要精准标注后交给 AI 精修的人 • 产品经理、设计师做原型评审，需要把修改意见结构化交付给开发 • 开发者接收修改工单，希望打开导出文件就能定位到对应元素 【隐私优先】 • 不上传任何数据到服务器——所有处理在本地浏览器完成 • 不使用第三方分析、追踪或广告服务 • 不需要注册账号 • 仅在用户通过 File System Access API 明确授权后才访问本地文件 • 删除标注或卸载扩展即可清除所有数据 【技术特点】 • Chrome MV3 扩展，纯原生 JavaScript，零依赖 • 所有工具 UI 用 Shadow DOM 隔离，不污染页面样式 • 支持跨 frame：标注和编辑可在 iframe 内使用 • 需要 Chrome 102+（File System Access API 支持） 【更新说明】 v2.1.0（最新） • 新增右下角「模式胶囊」：颜色就是当前模式（灰=暂停 / 绿=编辑 / 紫蓝=标注），鼠标移上去展开三段即可切换。页面处于暂停时它会自动隐藏，不打扰正常浏览 • 新增快捷键：⌥Q 切换编辑模式、⌥W 切换标注模式（再按一次回到暂停）、⌥E 导出标注（仅标注模式生效）。可在 chrome://extensions/shortcuts 自行改键 • 授权流程重做：不再要求先授权才能进入编辑模式。可以直接进去改，只有第一次保存时才需要授权，点一下即可；授权成功后会自动完成这次保存，已经改好的文字不会丢 • 扩展弹窗直接显示当前模式对应的快捷键；胶囊右上角显示本页的标注数量 • 「关闭」改名为「暂停」，语义更准确 • 按 Esc 只关闭最上面那一层（有卡片先关卡片，没有才收起胶囊），并且不会清除页面上的标注高亮 • 修复：导出标注功能此前无法使用 • 修复：快速连续切换模式时，最后一次按键可能被上一次覆盖 • 修复：浏览器回收扩展后台后，模式与工具栏图标可能不跟随实际状态、已改数量被清零 • 修复：文件不在已授权目录时，「重新授权」无法解决问题，会反复弹窗 • 修复：保存失败回滚时可能破坏元素内部的链接或按钮 • 修复：编辑模式下，页面输入框里的 Ctrl+Z 会被扩展劫持 • 修复：从 iframe 内授权会把目录绑定到错误的路径 v2.0.6 • 页面脚本在运行时渲染出来的文案（数据驱动渲染）现在也能修改：会在源文件的脚本模板里安全回填，并提示对应的源文件行号 • 修复：当页面上存在「同标签、同文本」的另一个元素时，编辑会被静默写到错误的位置 HTMLEdit is the precision tool for refining AI-generated HTML. It bridges the gap between AI-drafted prototypes and final deliverables — no more copying entire HTML files to an AI just to change one word. EDIT MODE — Edit HTML like editing a slide • Double-click any text element to edit it inline — just like editing a text box in PowerPoint • Adjust font size, color, bold, italic, and other lightweight text styles • Save changes directly back to local HTML files via the File System Access API — no download dialogs, no duplicate copies • Authorize a folder once, then edits save silently • Undo your last edit with one click; failed saves automatically roll back the DOM • Edited elements are marked with a green dashed outline for the current session ANNOTATE MODE — Tell AI exactly what to change • Shift+Click any element to open an annotation card with "Change to" and "Notes" fields • Shift+Drag to select a region for broader instructions like "rebuild this layout" or "add a chart component here" • Each annotation auto-captures the CSS selector path and surrounding HTML context (first 600 characters), so AI can locate the exact code • Badge numbering (A01, A02...) floats at each annotated element and follows scroll • Track status: pending, done, rejected — manage review progress • Cross-page aggregation: annotations from multiple HTML pages are grouped in one panel EXPORT — Structured feedback for AI or developers • Export annotations grouped by page, with page headers and counts • Each entry includes: badge ID, original text, changed text, notes, status, CSS selector, and HTML context; area annotations also include coordinates, dimensions, and covered elements • Two formats: Plain Text (for humans) and JSON (for programs) • One-click copy to clipboard — paste into AI chat, issue trackers, PRDs, or dev docs WHO IS THIS FOR? • Product managers and designers who use AI to generate HTML prototypes, posters, or presentation decks, and want to tweak text without round-tripping through an AI • Anyone who needs to communicate precise structural changes to AI or developers — annotate exactly what to change, export, and hand off • Developers receiving change requests who need to locate the exact element instantly PRIVACY-FIRST • No data is uploaded to any server — all processing happens locally in your browser • No third-party analytics, tracking, or advertising • No account required • Local file access only with explicit user authorization via the File System Access API • Users can delete all data by removing annotations or uninstalling the extension TECHNICAL DETAILS • Chrome MV3 extension, pure vanilla JavaScript, zero dependencies • Shadow DOM isolation for all tool UI — no style conflicts with your pages • Cross-frame support: annotations and editing work inside iframes • Requires Chrome 102+ for File System Access API support WHAT'S NEW v2.1.0 (latest) • New mode pill in the bottom-right corner — its colour is the current mode (grey = Paused, green = Edit, blue-purple = Annotate). Hover to expand and switch. It hides itself while paused so it never gets in the way of normal browsing • New keyboard shortcuts: ⌥Q for Edit mode, ⌥W for Annotate mode (press again to return to Paused), ⌥E to export annotations (Annotate mode only). Rebind them at chrome://extensions/shortcuts • Authorisation reworked: you no longer need to authorise a folder before entering Edit mode. Just start editing — the first save asks for authorisation once, and that save then completes automatically, so nothing you typed is lost • The extension popup now shows the shortcut for the current mode; the pill shows how many annotations the current page has • "Off" renamed to "Paused" • Esc now closes only the topmost layer (a card first; the pill only when nothing else is open) and never clears annotation highlights • Fixed: exporting annotations did not work • Fixed: when switching modes quickly, the last keypress could be overridden by the previous one • Fixed: after the browser recycled the extension background, the mode and toolbar icon could fall out of sync and the edit counter was reset • Fixed: when a file was outside the authorised folder, "re-authorise" could not solve it and the dialog kept reappearing • Fixed: rolling back a failed save could destroy links or buttons inside the element • Fixed: in Edit mode, Ctrl+Z inside page inputs was hijacked by the extension • Fixed: authorising from inside an iframe bound the folder to the wrong path v2.0.6 • Text rendered at runtime by page scripts (data-driven rendering) can now be edited: the change is written safely into the script template in the source file and the matching line number is reported • Fixed: when the page contained another element with the same tag and text, an edit was silently written to the wrong place