发布时间：2025 年 6 月 6 日
了解 Chrome 新提议的 <permission> 元素如何打造更简洁、更可信且符合情境的权限体验。
Chrome 团队设计了 <permission> 元素提案，让用户能够控制强大的功能。借助此元素，开发者可以打造无缝的端到端体验，让用户可以在上下文中允许使用这些功能，同时保护用户免受不必要的干扰。这组案例研究展示了新元素在实际中的运作方式。
请求权限的问题
如需使用位置信息、摄像头或麦克风等设备功能，用户通常需要应对可能存在的多项权限请求，这会让他们感到沮丧。对于开发者而言，调用 API 来使用 capability 非常简单，调用结果是成功或失败。不过，对于用户而言，这通常会导致干扰性和脱离上下文的提示，以及看似最终的决定，从而导致用户感到沮丧和认知负担。
当今的权限提示常常会让用户疑惑：“为什么这个网站（现在）需要此权限？”这种不明确性通常会导致用户选择拒绝权限请求。为了避免日后再让用户受到干扰，Chrome 之后会阻止进一步的提示，这反过来又会导致在用户日后改变主意时，无法撤消这些拒绝。这可能会导致用户完全放弃使用相应功能或网站。
为用户提供情境控制
我们提议的 <permission> 元素代表了 Web 权限人体工学方面的重大进步。借助此提议的 HTML 元素，您可以直接在网站的设计中无缝集成可设置样式但由浏览器控制的入口点，以使用强大的功能（例如，在视频聊天中显示清晰的“使用摄像头”按钮）。虽然您可以灵活地设置样式，但浏览器会保留对核心文本和图标的控制权，并负责确保安全性、一致性和无障碍性。这意味着，与此元素互动会发出明确的信号来表明用户的意图，从而让浏览器能够帮助用户完成必要的决策和其他步骤。这与程序化触发的提示形成鲜明对比，在这种情况下，浏览器缺少用户意图的直接信号，因此必须始终在提供帮助与避免干扰之间取得平衡。
<permission> 元素示例实现。
它将如何改变用户体验：
- 由用户发起：此类元素的设计旨在让用户在想要使用相关功能时选择，而不是由网站发起提示。
- 上下文请求：由于建议的
<permission>元素是网站流程的一部分，因此用户了解需要该权限的原因。例如，用户点击该按钮是为了查找附近的商店，因此位置信息请求是合理的。 - 全面问题排查：由于浏览器会获取有关用户意图的直接信号，因此可以主动引导用户完成获取功能访问权限所需的所有平台专用步骤。例如，它可以深层链接到系统设置，以帮助用户更改设备级相机设置，而无需网站提供平台专用的问题排查步骤。
- 简化了权限恢复流程：建议的
<permission>元素可让用户直接在网页中更改之前被拒绝的权限，而无需进入浏览器设置。点击该元素会触发特殊版本的权限提示，从而显著改善恢复效果。
<permission> 元素，用户无需前往网站设置即可快速更改权限设置。
这种方法有助于实现更直观、更可信且由用户主导的互动模式。
案例研究
Zoom 使用 <permission> 元素将浏览器中的摄像头和麦克风捕获错误减少了 46.9%，从而为用户提供了帮助
挑战
会议网站面临的最大挑战之一是，帮助之前拒绝授予摄像头或麦克风访问权限的用户在加入视频通话时重新启用这些权限。标准流程需要在会议网站界面之外浏览浏览器设置。
方法
Zoom 在测试 <permission> 元素的影响时采用了“对比前后”方法，即向通过桌面版 Chrome 网络浏览器加入 Zoom 会议的所有 Zoom 用户展示 <permission> 元素。
结果
Zoom 的一项关键指标是摄像头和麦克风捕获率，用于衡量用户在浏览器中加入 Zoom 会议时成功启用摄像头和麦克风的情况。Zoom 发现 <permission> 元素有了显著改进。浏览器体验中的失败情况（例如，系统级别或浏览器级别未启用麦克风和摄像头，或用户关闭浏览器的麦克风和摄像头权限提示）减少了 46.9%。
<permission> 元素不仅有助于减少错误，还帮助最初遇到问题或误拒访问权限的用户恢复和配置麦克风和摄像头，从而让用户保持专注，专注于对话和会议，以便所有人都能清晰地看到和听到对方。
Immobiliare.it 如何使用 <permission> 元素帮助用户使用地图位置功能，即使之前被拒绝授予权限
挑战
如果用户之前拒绝了在 Immobiliare.it 网站上分享位置信息的网站权限，则必须访问浏览器的“网站设置”，并手动解锁权限，以便在需要时再次授予位置信息权限。
方法
Immobiliare.it 使用 Permissions API JavaScript 方法检测用户是否已向其网站授予位置信息权限，从而改进了其位置信息权限请求流程。如果用户已分享权限，则会像之前一样请求地理定位 getCurrentPosition() 方法。如果 Permission API 返回用户已屏蔽位置信息权限，则网站会显示一条提示，说明“地理位置”按钮无法正常运行的原因，并使用 <permission> 元素作为号召性用语。
用户只需点击“使用位置信息”<permission> 元素，即可根据需要顺畅地分享位置信息权限，即使之前已被屏蔽，也不需要用户访问其浏览器设置。
<permission> 元素。<permission> 元素触发了浏览器权限提示。成果
使用 <permission> 元素后，地理位置权限用户流程的成功率提高了 20%，这表明使用 Permissions API 和 <permission> 元素的新权限流程有助于更多用户在需要时再次授予权限，即使他们过去曾屏蔽此类权限请求也是如此
ZapImóveis (OLX BR) 使用 <permission> 元素增强了地理位置搜索功能，以实现预期用途
ZapImóveis 是巴西领先的房地产平台，深知寻找理想房源往往从地理位置开始。ZapImoveis 是著名的 Grupo OLX 的一部分，可将数百万用户与全国各地的大量待售和待租住宅、公寓、土地和其他房产联系起来。认识到基于位置的搜索在此过程中发挥着关键作用，ZapImóveis 发现了一个机会，可以通过解决与浏览器权限提示相关的常见问题来提升用户体验。
挑战
ZapImóveis 发现其地理位置搜索功能存在严重的可用性问题，具体与标准浏览器权限提示相关。用户在首次授予位置信息访问权限时遇到了困难，更重要的是，在之前拒绝权限后尝试重新启用权限时也遇到了困难。这对整体用户体验产生了负面影响，并可能会妨碍其网站上基于位置的搜索功能的有效性。
方法
为了解决这些易用性问题，ZapImóveis 进行了一项 A/B 测试。在此测试中，我们向部分用户引入了 <permission> 元素。目标是在 ZapImóveis 界面中提供专用的页面内控件来管理位置信息权限，从而简化权限工作流程，并使其对用户而言更加直观。
成果
实现 ZapImóveis 的 <permission> 元素后，位置搜索的易用性得到了显著提升，尤其是对于积极与基于位置的功能互动的用户。对于最初在使用标准浏览器权限提示时遇到困难的用户，<permission> 元素提供的页面内控件使 4.3% 的用户成功授予了位置信息访问权限。此外，它还显著增强了权限恢复功能，54.4% 之前拒绝授予访问权限的用户在日后尝试使用位置相关功能时成功重新授予了访问权限。虽然首次授予权限的平均时间略有增加，但对于有明确意图的用户，功能成功率显著提高，这证明了这种权衡是值得的。
查看更多 <permission> 元素在实际运作中的示例
- 使用 Chrome 浏览器在 Google Meet 上发起视频会议通话。
- 在 Google 搜索上搜索附近的餐厅（逐步推出）
- 在 https://permission.site/pepc 上针对所有可用功能测试
<permission>元素（从 Chrome 137 开始）
集成 <permission> 元素
<permission> 元素的设计旨在让开发团队能够轻松采用。作为常规 HTML 元素，它可以像任何其他按钮一样集成，并且可以设置样式（在浏览器控制的限制范围内），以匹配您网站的外观和风格。对于尚不支持 <permission> 元素的浏览器，开发者可以使用现有的权限请求方法提供回退体验。如需了解详情，请参阅对 <permission> 元素的增强。
让网络变得更加实用和直观
Google 一直致力于让 Chrome 和网络平台变得更安全、更快速、更实用。<permission> 元素是朝着实现更直观、更符合人体工学的网站权限模型迈出的重大一步。<permission> 元素可为用户提供清晰的上下文和控制功能，有助于弥合强大的 Web 功能与用户信任之间的差距，从而在 Web 上提供更丰富、更具吸引力的体验。我们鼓励产品所有者和开发团队探索 <permission> 元素如何改进用户体验历程，并充分发挥其 Web 应用的潜力。