Chrome扩展侧边栏链接失效：mailto正常但HTTP链接无法打开

核心原因 #

Chrome扩展的侧边栏（Sidebar Panel）运行在扩展的隔离上下文环境中，直接用<a>标签的href或window.location.href跳转外部HTTPS链接，会受扩展**内容安全策略（CSP）**或权限限制，导致请求被拦截，表现为304状态但无响应内容。而mailto:属于特殊协议，不受这类限制，所以能正常工作。

具体解决方案 #

1. 改用Chrome扩展API打开外部链接

放弃直接修改window.location或依赖<a>标签默认跳转，用官方提供的tabs.createAPI打开链接，这是最可靠的方式：

• 按钮点击事件写法：

<button onClick={() => {
  chrome.tabs.create({ url: "https://example.com/contact" });
}}>Button</button>

• 链接标签写法（绑定点击事件替代默认href）：

<a onClick={(e) => {
  e.preventDefault();
  chrome.tabs.create({ url: "https://example.com/contact" });
}}>Link</a>

2. 配置扩展权限与内容安全策略

• 添加tabs权限：在扩展的manifest.json中显式声明tabs权限（部分Chrome版本可省略，但显式声明更稳妥）：

{
  "permissions": ["tabs"]
}

• 调整CSP规则：如果扩展设置了严格的内容安全策略，需允许导航到目标域名。在manifest.json的content_security_policy字段中添加目标域名：

{
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'none'; frame-src https://example.com;"
  }
}

生产环境建议仅允许具体域名，避免用*放开所有外部链接。

3. 验证缓存与拦截问题

304状态码是浏览器缓存命中，但响应大小为0说明请求被扩展安全规则拦截。按上述步骤配置后，重新加载扩展即可解决该问题。

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