如何在Chrome扩展中启用并使用webview加载网页内容

官方未修改Chrome环境下的支持情况 #

• 正式渠道发布的官方Chrome浏览器中，<webview>组件完全不支持普通Chrome扩展调用。该组件从设计之初就仅对Chrome Apps（Chrome平台应用）开放，随着2022年起Chrome全平台逐步下线Chrome Apps支持，官方也没有计划将该组件开放给普通扩展生态。
• 不修改内核的前提下，要实现跨域网页嵌入、Cookie正常读写的响应式测试能力，可选择两类替代方案：
  • 为扩展申请<all_urls>主机权限、cookies权限、declarativeNetRequest权限，通过修改响应头移除第三方站点的X-Frame-Options、Content-Security-Policy帧嵌入限制，继续使用iframe嵌入站点。该方案的缺陷是对主动设置帧拦截的站点适配成本高，部分强校验站点仍无法正常嵌入。
  • 放弃页面内嵌入逻辑，直接调用Chrome扩展的windows.create、侧栏API创建独立的渲染容器，通过扩展API管控容器内的网络请求、Cookie读写，模拟不同视口尺寸实现响应式测试。该方案没有跨域限制，但无法实现多个测试视口在同一扩展页面内并列排布的效果。

修改Chromium源码实现扩展加载webview的可行性 #

该方案技术上完全可落地，核心改动点共3处，整体改造成本不高：

1. 调整webview标签的上下文校验逻辑：Chromium源码中硬编码了webview标签仅允许在类型为PLATFORM_APP的扩展上下文（即Chrome App）中创建，需修改extensions/renderer/dispatcher.cc中的上下文类型判断逻辑，将普通扩展（类型为EXTENSION）加入webview标签的允许加载列表。
2. 开放webview JS API的注入权限：默认webview相关的操作API（导航控制、Cookie管控、内容注入等）仅注入到Chrome App的执行上下文，需修改extensions/renderer/script_context.cc中的API注入规则，同时调整extensions/common/permissions/api_permission.cc中的权限申请限制，允许普通扩展申请webview相关权限。
3. 适配guest进程创建逻辑：webview采用独立guest进程渲染第三方内容的隔离逻辑本身对普通扩展兼容，仅需要调整guest进程创建时的宿主类型校验，允许普通扩展作为webview的宿主即可，不需要重构进程隔离模块。

• 该方案的局限性非常明确：修改源码编译出的自定义Chromium不属于官方Chrome版本，开发的扩展无法上架官方Chrome应用商店，仅能在自定义编译的浏览器中运行，需要长期跟进Chromium上游版本变动维护适配代码，适合内部定制工具场景，不适合面向公网用户分发的产品。

做面向普通用户分发的响应式测试类扩展，优先选择提权iframe或者独立窗口的实现方案；如果是企业内部使用的定制测试工具，修改内核启用webview的方案可以完美解决iframe的跨域、Cookie读写异常问题，渲染性能和隔离性也优于提权后的iframe。

内容的提问来源于stack exchange，提问作者ruturajkanake