如何在Chrome扩展程序侧边栏中打开外部URL

Chrome 114及以上版本的侧边栏API，不支持直接通过chrome.sidePanel.setOptions的path属性加载外部URL，这并非文档遗漏，而是Chrome基于安全考量的设计限制——侧边栏默认只能加载扩展包内的本地资源。

如果需要在侧边栏中展示外部URL内容，可以通过以下方法实现：

实现步骤 #

1. 配置扩展清单（manifest.json） #

先在manifest.json中指定侧边栏的默认页面为扩展内的本地HTML文件：

{
  "name": "外部URL侧边栏",
  "version": "1.0",
  "manifest_version": 3,
  "side_panel": {
    "default_path": "sidepanel-container.html"
  },
  "permissions": ["sidePanel"]
}

2. 创建本地容器页面（sidepanel-container.html） #

在这个本地页面中，用<iframe>嵌入目标外部URL：

<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; padding: 0; }
    iframe { width: 100%; height: 100vh; border: none; }
  </style>
</head>
<body>
  <iframe src="https://example.com"></iframe>
</body>
</html>

3. 动态切换外部URL（可选） #

如果需要在运行时切换侧边栏加载的外部地址，可以在扩展脚本中修改iframe的src属性：

// 在sidepanel-container.html的内嵌脚本中执行
document.querySelector('iframe').src = 'https://another-example-site.com';

注意事项 #

• 外部URL必须使用HTTPS协议，Chrome禁止在扩展的iframe中加载HTTP资源（本地开发环境可通过特殊配置绕过，但生产环境必须遵循）。
• 若目标网站设置了X-Frame-Options或Content-Security-Policy禁止被嵌入，此方法将无法生效，需目标网站允许iframe嵌入。

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