简介这是一款面向产品经理、交互设计师与前端开发者的Chrome浏览器扩展资源用于在浏览器中直接调用Axure RP原型设计相关能力解决网页元素测量、截图与标注等协作痛点。资源包共8个文件以png图标资源、js脚本、json配置、html页面及txt说明为主压缩包约25KB体积轻量解压后可通过开发者模式加载使用。目前已有979人学习下载适合需要提升原型设计与团队沟通效率的初中级设计人员参考。包内包含扩展清单、后台页面与状态管理脚本等核心模块可帮助读者理解Chrome扩展的基本结构与运行机制并快速完成本地安装与功能验证为后续自定义扩展或整合设计工作流提供可复用的参考模板。1. 当 Axure 原型要在 Chrome 里“真机预览”这件事到底卡在哪很多人第一次听到“chrome 谷歌浏览器 axure插件”这个组合脑子里冒出来的画面是在 Chrome 里装个扩展点一下Axure 原型就能像真网站一样跑起来。现实往往更拧巴——你打开一个.rp导出的 HTMLChrome 要么白屏要么交互全失效要么控制台一片红。问题不在 Axure也不在 Chrome而在“原型导出物”和“浏览器安全模型”之间的那层错位。这篇东西面向三类人一是刚用 Axure 做完原型、想在 Chrome 里给同事演示却频频翻车的产品经理二是需要把原型嵌进内部系统做可用性测试的前端三是想用 Chrome 扩展给 Axure 原型加“外挂能力”比如自动填表、批量截图、埋点统计的工程师。核心就一件事让 Axure 产物在 Chrome 里稳定跑起来并且知道哪些扩展能帮上忙、哪些参数一改就崩。下面按“先搞懂它是什么 → 再动手跑通 → 最后避坑和进阶”的顺序讲。2. 先分清三种“Axure Chrome”的真实形态2.1 形态一Axure 导出的 HTML 在 Chrome 里直接打开这是最常见的场景。Axure RP 导出后会得到一个文件夹里面有index.html、start.html、resources/、data/等。很多人双击index.html地址栏变成file:///...然后发现页面能显示但点击跳转没反应某些动态面板状态错乱控制台报Access to XMLHttpRequest at file:///... from origin null has been blocked by CORS policy。原因很直接Chrome 对file://协议下的跨源请求限制极严而 Axure 的交互依赖data/document.js之类的本地资源加载。常见做法是起一个本地静态服务器而不是直接双击。最小命令# 在 Axure 导出目录下执行Python 3 自带 python3 -m http.server 8080 # 然后浏览器访问 http://localhost:8080/index.html逻辑说明http.server把当前目录变成 HTTP 服务Chrome 就会用http://协议加载CORS 限制自然消失。参数上8080是端口被占用就换8081如果只想给同局域网同事看加--bind 0.0.0.0但注意这会把目录暴露给局域网仅限内网可信环境。2.2 形态二用 Chrome 扩展增强 Axure 原型的演示能力Axure 本身没有官方 Chrome 扩展。市面上能搜到的“Axure 插件”大多是第三方做的辅助工具功能集中在几类扩展类型典型能力适用场景原型标注/测量在页面上叠加尺寸、间距标尺设计走查自动截图/录屏按页面列表批量截图交付文档表单自动填充按规则填输入框可用性测试埋点注入监听点击、停留时长数据验证这些扩展的本质都是Content Script 注入Chrome 在页面加载后把一段 JS 插进 DOM去操作 Axure 生成的元素。关键点是 Axure 的元素 ID 往往是u123、u456这种动态值每次导出可能变所以写扩展时不能硬编码 ID要用文本内容或层级结构定位。2.3 形态三把 Axure 原型嵌进已有 Web 系统有些团队会把原型放进 iframe外面套自己的导航。这时 Chrome 的X-Frame-Options和Content-Security-Policy会拦。解决方式是在承载页面的响应头里放开或者用本地服务器时手动加头。用 Python 起服务时默认没有这些头所以 iframe 反而能跑一旦放到正式服务器就要检查frame-ancestors配置。3. 动手用 Chrome 扩展给 Axure 原型加一个“自动标注”能力3.1 扩展的最小目录结构Chrome 扩展现在统一用 Manifest V3。一个能跑的最小结构如下axure-helper/ ├── manifest.json ├── content.js └── styles.cssmanifest.json内容{ manifest_version: 3, name: Axure 原型辅助, version: 1.0.0, description: 给 Axure 导出页面叠加元素边框和尺寸, content_scripts: [ { matches: [http://localhost:8080/*], js: [content.js], css: [styles.css], run_at: document_idle } ] }逻辑说明matches决定扩展在哪些 URL 生效这里只匹配本地 8080避免误伤正常网站。run_at: document_idle表示等 DOM 基本就绪再注入Axure 的动态面板此时通常已初始化。参数上matches支持通配符比如http://localhost:*/*可以覆盖任意本地端口。3.2 content.js遍历 Axure 元素并标注// 只处理 Axure 常见的 div 结构避免把 body 也框进去 const AXURE_SELECTOR div[id^u]; function annotate() { const nodes document.querySelectorAll(AXURE_SELECTOR); nodes.forEach((el) { const rect el.getBoundingClientRect(); // 过滤掉零尺寸的隐藏元素 if (rect.width 1 || rect.height 1) return; el.classList.add(axure-annotated); // 用 data 属性存尺寸方便后续导出 el.dataset.axureSize ${Math.round(rect.width)}x${Math.round(rect.height)}; }); console.log([Axure Helper] 已标注 ${nodes.length} 个候选元素); } // Axure 动态面板切换后会重建 DOM用 MutationObserver 兜底 const observer new MutationObserver(() annotate()); observer.observe(document.body, { childList: true, subtree: true }); annotate();逻辑说明div[id^u]是 Axure 导出物的典型命名规律但不同版本可能不同实际用之前先在 DevTools 里确认。getBoundingClientRect拿的是渲染后尺寸比offsetWidth更准。MutationObserver是关键——Axure 的动态面板、中继器在交互时会替换 DOM不监听就会漏标。参数上subtree: true必须开否则只监听直接子节点。3.3 styles.css让标注不干扰原型本身.axure-annotated { outline: 1px dashed rgba(255, 0, 0, 0.6) !important; position: relative; } .axure-annotated::after { content: attr(data-axure-size); position: absolute; top: 0; left: 0; font-size: 10px; background: rgba(0, 0, 0, 0.7); color: #fff; padding: 1px 3px; pointer-events: none; z-index: 9999; }逻辑说明用outline而不是border因为border会改变盒模型尺寸导致原型布局偏移。pointer-events: none保证标注文字不挡住点击。!important是为了压过 Axure 内联样式但这也意味着如果原型本身有 outline 需求要换方案。3.4 加载扩展并验证打开 Chrome地址栏输入chrome://extensions右上角开启“开发者模式”点“加载已解压的扩展程序”选中axure-helper目录。然后访问http://localhost:8080/index.html按 F12 看 Console 是否输出标注数量页面上是否出现红色虚线框。如果没生效按顺序查matches是否匹配当前 URL扩展是否被禁用Console 有没有报 content script 错误Axure 元素是否真的以u开头。这四步能解决九成“装了没反应”。4. 避坑Axure 原型在 Chrome 里翻车的 5 个高频现场4.1 现象页面白屏Console 报 CORS原因用file://直接打开Chrome 拦截了本地 XHR。解决起本地 HTTP 服务见 2.1 的命令。注意不要用某些“一键预览”工具它们可能改写了资源路径反而让 Axure 的相对路径失效。4.2 现象交互点击没反应但页面显示正常原因Axure 的交互依赖data/document.js如果导出时勾选了“不包含数据文件”或文件被杀毒软件隔离就会静默失败。解决检查导出目录里是否有data/文件夹以及document.js是否被浏览器加载Network 面板看 200。常见做法是重新导出一次导出时选“包含所有文件”。4.3 现象扩展注入后原型布局错乱原因content script 里用了border或修改了width/height改变了盒模型。解决只用outline、box-shadow、transform这类不影响布局的属性。血泪经验是任何会触发 reflow 的样式都要在原型上先测一遍。4.4 现象动态面板切换后标注消失原因Axure 切换面板时销毁并重建 DOM之前加的 class 和 data 属性全丢。解决用MutationObserver重新标注见 3.2。注意 observer 回调要加防抖否则频繁切换会卡顿。4.5 现象扩展在同事电脑上不生效原因matches写死了localhost:8080同事用的是127.0.0.1或别的端口。解决改成http://localhost:*/*和http://127.0.0.1:*/*两条或者用all_urls但仅在开发期用正式分发要收窄。另外 Manifest V3 下扩展的host_permissions也要同步声明否则跨域请求会被拦。5. 进阶把标注数据导出成 JSON接回 Axure 做走查5.1 在扩展里加一个导出按钮Manifest V3 不允许 content script 直接下载文件需要走 background service worker 或chrome.downloads。更轻的做法是在页面里注入一个按钮点击后用 Blob 下载function exportJSON() { const data [...document.querySelectorAll(.axure-annotated)].map((el) ({ id: el.id, size: el.dataset.axureSize, text: el.innerText.slice(0, 30) })); const blob new Blob([JSON.stringify(data, null, 2)], { type: application/json }); const url URL.createObjectURL(blob); const a document.createElement(a); a.href url; a.download axure-annotations.json; a.click(); URL.revokeObjectURL(url); }逻辑说明innerText截断 30 字是为了避免大段文本撑爆文件。URL.revokeObjectURL必须调用否则内存泄漏。这个 JSON 可以拿去和 Axure 源文件里的元件名做比对快速找出“原型上有但设计稿没有”的遗漏。5.2 用 JSON 做走查的验证方法把导出的 JSON 和 Axure 的元件列表Axure 里可以导出 CSV做一次 diff。重点看三类尺寸为 0 的元素可能是隐藏层误显示、文本为空的元素占位符没填、ID 重复的元素Axure 复制粘贴的常见后果。这一步能把走查时间从半天压到半小时。5.3 一个具体技巧用 Chrome 的 Snippets 做临时验证如果不想装扩展Chrome DevTools 的 Sources → Snippets 可以存一段 JS在任意页面手动执行。把 3.2 的annotate函数贴进去改一下选择器就能快速验证“这个原型到底有多少个可标注元素”。我一般会先这么试确认选择器对了再写进扩展省得反复加载扩展。5.4 边界什么时候不该用扩展如果原型只是自己看起个本地服务器就够了扩展是多余。如果原型要发给外部客户扩展无法随文件分发得改用注入脚本或直接改导出物。如果团队有严格的安全策略chrome://extensions可能被禁用这时候只能走本地服务器 手动 DevTools。判断标准很简单扩展解决的是“重复操作”和“批量处理”一次性演示不值得为它写代码。最后说个我自己的习惯每次拿到新的 Axure 导出物先不急着装扩展而是用python3 -m http.server跑起来F12 看 Console 和 Network 有没有红。确认基础环境干净了再往上叠扩展能力。这个顺序能省掉大量“到底是原型问题还是扩展问题”的扯皮。希望帮到你。本文还有配套的精品资源点击获取