简介这份资源是面向前端与产品原型从业者的 Chrome 浏览器扩展包用于解决 Axure RP 导出的本地 HTML 原型文件在谷歌浏览器中无法正常打开或交互失效的问题。包内共 7 个文件以 js 脚本、png 图标、html 页面与 json 清单配置为主压缩包仅 25KB体积轻巧、结构清晰解压后可直接通过开发者模式加载使用。资源围绕 axure、chrome 与前端调试场景组织适合需要频繁预览原型稿的交互设计师、产品经理及前端开发者。目前已有 2924 人学习下载说明其在原型预览这一细分需求上具备一定实用价值。读者可获得一套即装即用的扩展方案理解扩展清单与后台脚本的协作方式并掌握本地文件访问权限的配置思路从而顺畅浏览 Axure 生成的 HTML 原型减少因浏览器限制导致的预览障碍。1. 谷歌浏览器 Axure 插件把原型预览从“跳窗口”拉回标签页如果你做 Axure 原型超过两年大概率经历过这种场景产品评审会上你双击index.html系统默认用某个不认识的浏览器打开字体错位、交互卡顿甲方盯着屏幕问“这个按钮怎么点不动”。更常见的是Axure 生成的start.html在 Chrome 里被安全策略拦住file://协议下的XMLHttpRequest直接报 CORS 错误原型里的动态面板和中继器全部哑火。谷歌浏览器 Axure 插件要解决的就是这类“原型在 Chrome 里跑不起来”的问题——它把 Axure 生成的本地 HTML 包通过扩展注入的方式让 Chrome 以接近本地服务器的行为加载资源同时补上一些 Axure 运行时依赖的接口。适合谁用前端切图仔、产品经理、交互设计师以及需要把 Axure 原型嵌进自己调试流程的工程师。它不改变 Axure 的导出逻辑只是让 Chrome 这个“最顺手的浏览器”不再成为预览的绊脚石。2. 插件到底改了什么从 file:// 到扩展注入的加载链路2.1 Axure 原型在 Chrome 里翻车的根因Axure RP 导出 HTML 时默认生成一套静态资源resources/下放 CSS、JS、字体data/下放页面结构和交互逻辑。当你直接双击start.htmlChrome 地址栏是file:///.../start.html。这个协议下Chrome 对fetch、XMLHttpRequest的限制比http://严格得多Axure 运行时用来加载data/document.js的请求会被判定为跨域控制台报Access to XMLHttpRequest at file:///... from origin null has been blocked by CORS policy。结果就是页面框架出来了但交互全丢。常见做法是起一个本地服务器比如python -m http.server然后访问http://localhost:8000/start.html。这招管用但每次都要开终端、记端口评审时手忙脚乱。谷歌浏览器 Axure 插件走的是另一条路它利用 Chrome 扩展的webRequest和declarativeNetRequest权限在扩展层面拦截file://请求把 Axure 运行时需要的资源请求重定向或放行同时注入一小段脚本把XMLHttpRequest的responseType和withCredentials行为修正到 Axure 期望的状态。换句话说它没有起服务器而是在浏览器内部“伪造”了一个对 Axure 友好的加载环境。2.2 插件的安装与目录结构确认拿到插件包后先别急着拖进 Chrome。解压后你应该看到类似这样的结构axure-chrome-helper/ ├── manifest.json ├── background.js ├── content.js ├── inject.js ├── rules.json └── icons/ ├── icon16.png ├── icon48.png └── icon128.pngmanifest.json是入口里面声明了manifest_version、permissions和content_scripts。常见版本是 MV3权限里会包含declarativeNetRequest、file:///*和activeTab。rules.json是静态规则集用来匹配 Axure 导出目录下的data/*.js和resources/*。如果你拿到的包只有manifest.json和几个 JS没有rules.json那它可能是靠background.js动态注册规则逻辑一样只是写法不同。安装步骤打开 Chrome地址栏输入chrome://extensions/回车。右上角打开“开发者模式”开关。点击“加载已解压的扩展程序”选择解压后的axure-chrome-helper文件夹。确认扩展卡片出现且没有红色报错。如果报Manifest file is missing or unreadable检查manifest.json是否在文件夹根目录而不是在子目录里。提示Chrome 对file://协议的扩展权限管控越来越严部分版本需要你在chrome://extensions/里找到该扩展点“详细信息”把“允许访问文件网址”开关打开。这个开关默认是关的不打开插件对本地 HTML 完全不生效。2.3 验证插件是否真正接管了 Axure 请求装完插件不等于生效。打开一个 Axure 导出的start.html按 F12 看 Console。如果之前有 CORS 报错现在应该消失。更直接的验证方法是看 Network 面板刷新页面筛选data/目录下的请求状态码应该是200或304而不是(blocked: origin)。如果仍然报错去chrome://extensions/点插件的“服务工作线程”看后台日志有没有Rule matched或Redirecting字样。另一个验证点是 Axure 的动态面板。找一个带“鼠标单击时切换面板状态”的交互点击后如果面板切换正常说明inject.js已经成功覆写了 Axure 运行时的$axure对象。如果点击无反应但 Console 没有报错大概率是content.js注入时机太晚Axure 的document.js已经执行完了。这时候需要在manifest.json的content_scripts里把run_at改成document_start然后重新加载扩展。3. 把插件用进日常流程从单文件预览到批量原型管理3.1 本地原型目录的规则配置插件默认只对file:///*/start.html生效但实际项目里Axure 导出目录往往嵌套很深比如D:/projects/2024/电商重构/prototype/v3/start.html。如果插件规则写死了路径换个项目就失效。打开rules.json你会看到类似这样的结构[ { id: 1, priority: 1, action: { type: modifyHeaders, responseHeaders: [ { header: Access-Control-Allow-Origin, operation: set, value: * } ] }, condition: { urlFilter: file:///*/data/*.js, resourceTypes: [xmlhttprequest, script] } } ]这段规则的意思是对所有file://路径下data/目录里的 JS 请求在响应头里强行加上Access-Control-Allow-Origin: *。urlFilter里的*是通配符能匹配任意层级目录。如果你只想对特定项目生效把urlFilter改成file:///D:/projects/2024/*/data/*.js。priority数字越大优先级越高多条规则冲突时看这个值。改完rules.json后必须去chrome://extensions/点插件的刷新按钮否则规则不会重新加载。这是血泪经验很多人改完文件直接刷新原型页面发现没变化以为插件坏了其实是扩展没重载。3.2 用脚本批量生成 Axure 预览入口如果你手头有十几个 Axure 原型包每个都要手动找start.html再拖进 Chrome效率太低。我一般会写一个 Python 脚本扫描指定目录下所有start.html生成一个索引页并把插件需要的规则动态写进一个rules.json。import os import json # 扫描根目录找到所有 Axure 导出的 start.html root_dir D:/axure_projects start_files [] for dirpath, dirnames, filenames in os.walk(root_dir): if start.html in filenames: # 取相对路径方便生成 file:// 链接 rel_path os.path.relpath(os.path.join(dirpath, start.html), root_dir) start_files.append(rel_path.replace(\\, /)) # 生成索引 HTML html_lines [!DOCTYPE htmlhtmlheadmeta charsetutf-8titleAxure 原型索引/title/headbody] html_lines.append(h2本地 Axure 原型列表/h2ul) for f in start_files: html_lines.append(flia hreffile:///{root_dir}/{f} target_blank{f}/a/li) html_lines.append(/ul/body/html) with open(os.path.join(root_dir, index.html), w, encodingutf-8) as fp: fp.write(\n.join(html_lines)) # 动态生成规则对所有 start.html 所在目录的 data/*.js 放行 rules [{ id: 1, priority: 1, action: { type: modifyHeaders, responseHeaders: [ {header: Access-Control-Allow-Origin, operation: set, value: *} ] }, condition: { urlFilter: ffile:///{root_dir}/*/data/*.js, resourceTypes: [xmlhttprequest, script] } }] with open(rules.json, w, encodingutf-8) as fp: json.dump(rules, fp, indent2) print(f共找到 {len(start_files)} 个原型索引已生成。)逻辑说明os.walk递归遍历root_dir只要目录里有start.html就记下来。生成的index.html里每个链接都是file://绝对路径点开就能在 Chrome 里加载。rules.json的urlFilter用了root_dir变量确保规则覆盖所有子目录。参数上resourceTypes必须包含xmlhttprequest因为 Axure 加载document.js走的是 XHR如果漏了规则不生效。注意file:///后面跟 Windows 路径时盘符后的冒号不能少比如file:///D:/axure_projects/...。写成file://D:/会变成主机名解析直接打不开。3.3 和 Chrome 调试工具配合排查交互失效插件解决的是加载问题但 Axure 交互本身出问题还得靠 Chrome DevTools。常见场景中继器Repeater数据绑定后点击行没有反应。打开 Console输入$axure回车如果返回undefined说明 Axure 运行时根本没初始化。这时候看 Network 里resources/scripts/axure/下的文件是否全部 200。如果有 404检查 Axure 导出时是否勾选了“包含 Axure 运行时”。另一个技巧是在 Sources 面板里给document.js打条件断点条件写$axure.internal(function($ax){ return $ax; })能快速定位初始化卡在哪一步。如果插件生效了但页面样式错乱比如字体变成宋体去 Network 看resources/fonts/下的 woff 文件是否被拦截。Chrome 对file://下的字体加载有额外限制插件规则里需要把resourceTypes加上font。这个坑我踩过交互正常但所有图标变成方块查了半天才发现是字体请求被 CORS 挡了。4. 避坑与排查插件不生效的五个真实原因4.1 现象扩展图标亮着但原型页面 Console 依然报 CORS原因Chrome 的“允许访问文件网址”开关没开。这个开关不在扩展安装时提示藏在扩展详情页里。解决chrome://extensions/→ 找到插件 → 详细信息 → 打开“允许访问文件网址”。改完后刷新原型页面不用重启浏览器。4.2 现象规则改了Network 里请求还是 blocked原因rules.json的urlFilter写的是相对路径或通配符位置不对。比如写成file:///*/data/*.js但实际路径里data目录前面还有一层resources匹配不上。解决在chrome://extensions/点插件的“服务工作线程”在 Console 里输入chrome.declarativeNetRequest.getDynamicRules()查看当前生效的规则确认urlFilter和实际 URL 对得上。更笨但有效的办法是把urlFilter改成file:///*先确认插件能拦到请求再逐步收窄。4.3 现象Axure 页面能打开但点击任何交互都跳回首页原因inject.js注入的脚本覆盖了 Axure 的$axure.utils.getUrl方法导致相对路径解析错误。常见于插件版本和 Axure 版本不匹配比如 Axure 9 导出的包用了针对 Axure 10 的注入逻辑。解决打开inject.js找到getUrl相关的覆写代码临时注释掉看交互是否恢复。如果恢复说明是路径解析问题需要根据 Axure 版本调整baseUrl的拼接逻辑。4.4 现象插件在 Chrome 某些版本上直接报“清单文件缺失或不可读”原因Chrome 从 117 版本开始对 MV2 扩展限制更严如果你的插件包是 MV2 写的manifest_version是 2新版本 Chrome 会拒绝加载。解决检查manifest.json第一行如果是manifest_version: 2要么找 MV3 版本的插件要么手动升级把background.scripts改成background.service_worker把browser_action改成action权限里的webRequest换成declarativeNetRequest。升级后重新加载。4.5 现象原型里的中继器数据不显示但 Console 无报错原因Axure 中继器依赖data/目录下的 JSON 文件插件规则只放行了.js没放行.json。解决在rules.json的condition.urlFilter里把*.js改成*.js|*.json或者直接加一条新规则专门匹配file:///*/data/*.json。resourceTypes要加上xmlhttprequest。改完重载扩展中继器数据就回来了。5. 进阶把插件规则和 Axure 版本号绑定避免升级后失效Axure 每升级一个大版本导出目录结构都会微调。RP8 的data目录下是document.jsRP9 变成了document.js加page_1.jsRP10 又多了data.json。如果你的插件规则写死了data/*.js遇到 RP10 的data.json就漏了。我现在的习惯是在rules.json里按版本号分条写规则每条规则的id用版本号做前缀比如901、1001方便排查时一眼看出哪条规则对应哪个版本。[ { id: 901, priority: 10, action: { type: modifyHeaders, responseHeaders: [ { header: Access-Control-Allow-Origin, operation: set, value: * } ] }, condition: { urlFilter: file:///*/data/document.js, resourceTypes: [xmlhttprequest, script] } }, { id: 1001, priority: 20, action: { type: modifyHeaders, responseHeaders: [ { header: Access-Control-Allow-Origin, operation: set, value: * } ] }, condition: { urlFilter: file:///*/data/*.json, resourceTypes: [xmlhttprequest] } } ]priority设成 10 和 20数字大的先匹配。这样即使两条规则同时命中Chrome 也会按优先级执行不会出现规则打架。另外我习惯在manifest.json的version字段里写插件自己的版本比如1.2.0和 Axure 版本解耦。每次 Axure 升级先跑一遍原型看 Console 缺什么请求再往rules.json里补一条而不是盲目改老规则。验证方法很简单打开一个 RP10 导出的原型F12 看 Network筛选data/确认.json和.js都是 200。然后随便点几个交互看中继器表格能不能正常翻页。如果翻页时 Console 报$axure.utils.getUrl is not a function说明注入脚本和 RP10 的运行时冲突了这时候要么等插件更新要么在inject.js里加一个版本判断对 RP10 跳过getUrl覆写。从那以后我每次拿到新的 Axure 导出包都强制走一遍“装插件 → 开文件网址权限 → 看 Network → 点三个交互”的流程确认没问题再发给产品。希望帮到你。本文还有配套的精品资源点击获取