简介Axure RP Extension for Chrome 是一款面向产品经理、交互设计师及前端开发者的浏览器扩展用于将 Axure RP 制作的原型直接发布为网页链接并在 Chrome 中分享解决团队协作中原型传递效率低、离线查看不便等问题。资源包共 2 个文件包含 1 个 crx 扩展安装包与 1 个 html 格式的安装教程文档压缩包整体约 15KB体积轻量便于快速部署。扩展支持原型离线查看、访问密码保护以及注释反馈收集适合保密级别较高的项目或跨地区协作场景。目前已有 393 人学习下载读者可借助安装教程快速完成扩展配置掌握原型网页分享、权限设置与团队沟通的完整流程提升 Axure RP 原型交付与协作效率。1. 原型打不开、图标点不亮Axure RP Extension for Chrome 到底在解决什么如果你用 Axure RP 导出过 HTML 原型大概率遇到过这个场景本地双击index.html能看发给同事或客户后对方在 Chrome 里打开却是一片空白或者只显示一个灰色的加载图标控制台里飘着几行chrome-extension://相关的报错。这不是原型文件坏了而是 Axure 生成的查看器依赖一个 Chrome 扩展来接管本地资源加载和跨域请求。Axure RP Extension for Chrome 就是干这件事的——它让 Chrome 在打开 Axure 导出的原型目录时能正常读取resources/下的脚本、样式和页面数据而不是被浏览器的同源策略和本地文件权限拦在门外。这个扩展主要服务三类人一是产品经理和交互设计师需要把原型发给非技术同事直接看二是前端或测试要在本地反复打开导出的 HTML 做走查三是需要把原型挂到内网静态服务器上做演示的团队。它的核心价值不是“增强 Axure”而是补上 Chrome 对本地文件协议file://的限制。理解这一点后面所有安装、配置和排错才有方向。2. 扩展的加载机制与三种安装路径从 crx 到开发者模式2.1 为什么 Chrome 打开 Axure 原型会白屏Axure RP 在导出 HTML 时会把页面结构、交互逻辑和资源文件拆成多个 JS 和 JSON。查看器启动时会通过XMLHttpRequest或fetch去读取同目录下的data/文件夹。问题出在 Chrome 对file://协议的安全策略默认情况下一个file://页面发起的 XHR 请求如果目标也是file://Chrome 会直接拒绝报Cross origin requests are only supported for protocol schemes: http, data, chrome-extension...。这就是白屏的根因。Axure RP Extension for Chrome 的做法是在扩展层面声明对file://的访问权限并通过web_accessible_resources把原型目录暴露给扩展的 content script。当你在 Chrome 里打开原型页面时扩展注入的脚本会接管资源请求把原本被拦截的file://请求转成扩展内部的合法读取。所以这个扩展不是可选项而是 Axure 本地预览链路里的一个必要环节。注意如果你把原型部署到http://或https://的静态服务器上浏览器同源策略不再拦截同目录请求这个扩展就不是必须的。但很多团队的内网演示环境仍然是直接共享文件夹扩展依然是最省事的方案。2.2 从 Chrome 应用商店安装最稳但受网络和版本影响最常见做法是直接在 Chrome 应用商店搜索 “Axure RP Extension for Chrome”。安装后Chrome 地址栏右侧会出现一个灰色图标打开 Axure 导出的index.html时图标会变亮表示扩展已生效。但这条路径有两个现实问题。第一Chrome 应用商店的访问稳定性因网络环境而异部分内网机器根本打不开商店页面。第二Chrome 从 137 版本开始对 Manifest V2 扩展逐步收紧而 Axure 的扩展长期停留在 V2 规范。如果你的 Chrome 自动更新到了较新版本可能会看到“该扩展程序未列在 Chrome 应用商店中并可能是在您不知情的情况下添加的”这类提示甚至直接被禁用。排查时先看chrome://extensions/页面确认扩展是否处于启用状态以及有没有“此扩展程序可能已损坏”的红色提示。如果被禁用优先尝试更新扩展如果商店里没有更新就走下面的手动加载路径。2.3 开发者模式加载解压目录内网和离线环境的兜底方案当商店安装走不通时我一般会用开发者模式加载解压后的扩展目录。前提是你已经拿到了扩展的源码文件夹通常包含manifest.json、background.js、content.js等文件。操作步骤打开chrome://extensions/右上角开启“开发者模式”。点击“加载已解压的扩展程序”选择包含manifest.json的文件夹。加载成功后确认扩展卡片上没有报错并记下扩展 ID。{ manifest_version: 2, name: Axure RP Extension for Chrome, version: 0.6.3, permissions: [ file:///*, http://*/*, https://*/* ], content_scripts: [ { matches: [file:///*], js: [content.js], run_at: document_start } ], web_accessible_resources: [ resources/* ] }上面是一段典型的 Manifest V2 配置片段。permissions里的file:///*是关键它让扩展有权读取本地文件。content_scripts里的run_at: document_start保证注入脚本在页面任何资源加载之前执行否则原型查看器可能已经因为请求失败而卡死。web_accessible_resources声明了哪些扩展内资源可以被页面访问Axure 的查看器脚本需要读取扩展提供的桥接文件。参数调整建议如果你只在内网使用可以把http://*/*和https://*/*去掉减少权限暴露面。如果原型放在某个固定端口比如http://localhost:8080可以把匹配规则收窄到具体域名和端口而不是通配。2.4 用命令行参数临时放开文件访问不推荐但要知道还有一种临时方案是用--allow-file-access-from-files启动 Chrome。这个参数会让 Chrome 允许file://页面发起跨文件请求从而绕过扩展。但它的副作用很大所有本地 HTML 文件都获得了跨目录读取权限安全边界被完全打开。我只在一次性调试、且机器不处理敏感数据时用过日常绝不推荐。# Windows 下临时启动一个独立配置的 Chrome 实例 C:\Program Files\Google\Chrome\Application\chrome.exe ^ --user-data-dirC:\temp\chrome-axure-test ^ --allow-file-access-from-files ^ file:///D:/prototype/index.html这段命令的关键是--user-data-dir它让这次启动使用一个独立的用户配置目录不会污染你日常的 Chrome 配置。--allow-file-access-from-files是放开限制的开关。注意这个方式不会安装任何扩展只是临时改行为关掉窗口就失效。如果你只是偶尔看一次原型可以用如果是团队日常流程还是老老实实装扩展。3. 让扩展真正生效原型导出设置与 Chrome 侧参数对齐3.1 Axure 导出时的三个关键选项扩展装好了原型还是打不开很多时候问题出在导出设置上。Axure RP 在“发布 生成 HTML 文件”里有几个选项直接影响 Chrome 能否正常加载。第一个是“包含 Axure 查看器”或类似选项。如果导出时没有勾选生成的 HTML 会依赖在线查看器本地打开时既没有扩展桥接也没有网络资源必然白屏。第二个是“页面文件格式”建议保持默认的 HTML 结构不要选“单文件”或“合并资源”否则扩展的路径匹配会失效。第三个是输出目录的层级尽量让index.html和resources/、data/在同一级避免相对路径错位。我一般会在导出后先检查目录结构# 查看导出目录的顶层结构 ls -la ./prototype-export/ # 预期看到类似 # index.html # resources/ # data/ # start.html如果resources/不在index.html同级扩展注入的脚本按相对路径找资源就会 404。这时候要么调整导出设置要么手动把目录层级拍平。3.2 Chrome 扩展权限与 file:// 访问的匹配规则扩展安装后在chrome://extensions/里点开详情找到“允许访问文件网址”这个开关。默认情况下很多扩展的这个开关是关闭的必须手动打开。如果这个开关没开扩展的 content script 根本不会注入到file://页面你看到的就是“扩展装了但没反应”。打开后再检查扩展的“网站访问权限”。如果设置成“在特定网站上”要确保file://被包含在内。Chrome 的权限模型里file://是一个特殊 scheme不会出现在常规的域名列表里所以最好选“在所有网站上”或者手动确认文件协议已被覆盖。提示每次 Chrome 大版本更新后建议重新检查一次这个开关。部分版本更新会重置扩展的文件访问权限导致原本正常的原型突然打不开。3.3 用 chrome://extensions/ 做一次最小验证在正式发给同事之前我会先在自己的机器上做一次最小验证。步骤很简单新建一个空白目录放一个最简单的 Axure 导出原型。在 Chrome 里打开chrome://extensions/确认扩展已启用且“允许访问文件网址”已打开。用file:///路径打开原型的index.html。按 F12 打开控制台看有没有Failed to load resource或net::ERR_FAILED。如果控制台干净页面正常渲染说明扩展链路通了。如果还有报错把报错信息里的路径和实际目录对比通常是路径大小写、中文目录名或空格导致的。Chrome 对file://路径里的中文和空格处理比较敏感建议原型目录用纯英文和短横线命名。// 在控制台里快速检查扩展是否注入成功 // 如果扩展的 content script 正常执行通常会挂载一个全局标记 if (window.__AXURE_EXTENSION_LOADED__) { console.log(Axure extension bridge is active); } else { console.log(Extension not injected, check file access permission); }这段代码不是扩展自带的而是我习惯在调试时手动加的一个探针。window.__AXURE_EXTENSION_LOADED__这个变量名取决于扩展实现不同版本可能不同。更通用的做法是看document.querySelector能不能找到扩展注入的script标签或者直接观察网络面板里resources/下的请求是否返回 200。4. 避坑与排查扩展装了却打不开的 5 个真实原因4.1 现象扩展图标亮着页面仍然白屏原因扩展虽然注入成功但原型导出时缺少data/目录下的页面数据文件或者data/里的 JSON 被浏览器缓存成了旧版本。解决先清空 Chrome 缓存再检查导出目录里data/是否完整。如果是从别人那里拷来的原型确认拷贝过程中没有漏掉隐藏文件。4.2 现象控制台报net::ERR_FILE_NOT_FOUND原因index.html里引用的资源路径是绝对路径比如file:///C:/Users/xxx/...换一台机器后路径不存在。解决重新导出时选择相对路径或者手动把index.html里的绝对路径改成相对路径。Axure 的导出设置里通常有“使用相对路径”的选项勾上。4.3 现象Chrome 提示“该扩展程序未列在 Chrome 应用商店中”原因手动加载的解压扩展或者从旧版本 Chrome 迁移过来的扩展没有商店签名。解决在chrome://extensions/里找到这个提示点击“保留”或“仍然启用”。如果 Chrome 版本较新且强制禁用需要把扩展打包成 crx 并加入企业策略白名单或者改用开发者模式加载。4.4 现象同事的 Chrome 能打开我的打不开原因两台机器的 Chrome 版本不同或者扩展的文件访问权限开关状态不同。解决对比chrome://extensions/里扩展的详情页重点看“允许访问文件网址”和“网站访问权限”两项。另外确认 Chrome 版本过新的版本可能对 Manifest V2 扩展有额外限制。4.5 现象原型里的交互能点但图片和字体加载不出来原因图片和字体走了 CSS 里的url()引用而扩展的web_accessible_resources没有覆盖这些资源类型。解决检查扩展的manifest.json确保web_accessible_resources包含了resources/*或具体的图片、字体目录。如果扩展是别人提供的可能需要手动补上这些声明再重新加载。5. 把扩展纳入团队流程版本锁定与迁移检查清单扩展本身不复杂难的是让团队里每个人都能稳定打开原型。我的习惯是做一个“原型交付检查清单”在发链接之前自己先过一遍。第一项确认导出目录结构完整。用tree或ls -R看一眼index.html、resources/、data/三样齐全且没有多余的绝对路径引用。第二项确认扩展版本和 Chrome 版本的兼容性。如果团队里有人用 Chrome 109 这类较旧版本有人用最新版最好统一扩展的加载方式要么都走商店要么都用同一个解压目录。第三项在交付说明里写清楚“需要安装 Axure RP Extension for Chrome并打开文件访问权限”而不是只丢一个压缩包。# 打包原型时排除系统生成的隐藏文件避免路径污染 zip -r prototype.zip ./prototype-export/ \ -x *.DS_Store \ -x __MACOSX/* \ -x *.git/*这段打包命令的关键是-x排除项。macOS 的.DS_Store和__MACOSX目录在 Windows 上解压后会产生多余文件有时会干扰 Axure 查看器的目录扫描。排除掉之后压缩包更干净同事解压后直接打开index.html即可。还有一个容易忽略的点如果原型要放到内网服务器上记得把file://访问改成http://同时确认服务器返回的 MIME 类型正确。json文件如果被服务器返回成text/plainAxure 查看器解析会失败。这时候扩展帮不上忙得改服务器配置。我自己的教训是曾经把原型放在一个带中文和空格的目录里本地测试正常发给同事后全部白屏。排查了半天才发现是file://路径编码问题。从那以后原型目录一律用英文小写加短横线比如proto-2024-01再也没出过这类玄学问题。希望帮到你。本文还有配套的精品资源点击获取