如何通过编程将Chrome扩展页面重定向至HTTPS页面？

问题分析 #

你在扩展页面（chrome-extension://abcdef123.../page.html）中使用window.location.href = 'https://www.google.com'尝试跳转，但页面被重定向回原扩展页面，这通常是以下原因导致：

• 扩展内部存在拦截导航的逻辑（如背景页的webNavigation事件监听）
• 页面内有其他代码（如popstate事件监听、自动导航逻辑）覆盖了跳转操作
• 扩展的内容安全策略（CSP）或权限配置限制了外部跳转

解决方案 #

1. 排查并移除拦截导航的代码 #

检查扩展的背景页、内容脚本中是否存在类似以下拦截导航的逻辑：

// 示例：错误的拦截逻辑
chrome.webNavigation.onBeforeNavigate.addListener((details) => {
  if (details.url.startsWith('chrome-extension://abcdef123')) {
    // 错误地强制重定向回原页面
    chrome.tabs.update(details.tabId, {url: details.url});
  }
});

如果存在此类代码，修改或移除对应的拦截规则，允许跳转到目标HTTPS站点。

2. 使用location.replace替代location.href #

location.replace会替换当前页面的历史记录，避免因历史栈操作导致的回退：

window.location.replace('https://www.google.com');

3. 打开新标签页跳转（若业务允许） #

如果不需要在当前扩展页面内跳转，可以用window.open打开新标签页：

window.open('https://www.google.com', '_blank');

注意：确保扩展的manifest.json中没有限制弹出新窗口的CSP规则，默认情况下此操作是允许的。

4. 检查扩展的内容安全策略（CSP） #

打开manifest.json，查看content_security_policy字段，确保没有限制外部导航的规则。例如，允许导航到所有HTTPS站点的配置示例：

"content_security_policy": {
  "extension_pages": "script-src 'self'; object-src 'none'; navigate-to 'self' https://*;"
}

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