如何在浏览器扩展中嵌入网页，实现无需新开标签页访问的功能？

故障根因 #

• iframe加载失败：Stack Overflow、YouTube这类主流站点都配置了X-Frame-Options响应头限制跨域嵌套，浏览器安全策略会直接拦截iframe的加载请求，这是正常的安全机制，无法通过前端常规手段绕过。
• 复用站点源码作为popup搜索失效：你只导出了静态页面结构，缺少页面运行的完整上下文，搜索请求会被跨域策略拦截，也无法和目标站点后端正常交互。

可落地实现方案 #

1. 优先使用webview标签（Chromium内核浏览器通用） #

Chrome、Edge等Chromium系浏览器的扩展支持webview专属标签，完全不受X-Frame-Options限制，自带独立浏览上下文，页面内的搜索、跳转、登录操作都可以正常执行，是当前最优解决方案。
首先配置扩展的manifest.json（V3版本，当前官方推荐版本）：

{
  "manifest_version": 3,
  "name": "内嵌站点工具",
  "version": "1.0.0",
  "host_permissions": ["*://*.stackoverflow.com/*", "*://*.youtube.com/*"],
  "action": {
    "default_popup": "popup.html",
    "default_width": 600,
    "default_height": 800
  }
}

然后编写popup.html内容：

<!DOCTYPE html>
<html>
  <body style="width: 600px; height: 800px; margin: 0; padding: 0;">
    <webview id="embedView" src="https://stackoverflow.com" style="width: 100%; height: 100%;"></webview>
  </body>
</html>

需要切换站点时直接修改webview标签的src属性即可。

2. 兼容非Chromium浏览器方案 #

如果需要适配不支持webview的浏览器，可以用扩展后台做请求代理：

• popup页面自主开发搜索框等UI组件
• 用户触发搜索后，将搜索参数发送给扩展后台服务
• 后台持有跨域权限，直接向目标站点发起搜索请求，将返回的结果内容回传给popup渲染
• 渲染第三方HTML内容时需要做好XSS过滤，避免恶意脚本执行。

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