Chrome扩展弹窗按钮无法打开Flask反馈页面新标签页的问题

你的问题出在两个核心点上：

1. submit按钮的默认表单提交行为被Chrome扩展安全策略拦截
   你使用的<input type="submit">点击后会自动触发表单的默认提交动作，而Chrome扩展的内容安全策略（CSP）默认禁止跨域提交表单（你的Flask服务属于本地跨域地址），浏览器会直接阻断这个操作，导致你写的window.open代码可能根本没执行就被中断了。

2. Chrome扩展弹窗的权限限制
   即便阻止了默认提交，直接在弹窗中打开本地服务地址，也需要在扩展配置文件中声明对应权限，否则会被浏览器拦截。

具体修复步骤 #

1. 阻止表单默认提交行为 #

修改弹窗的JavaScript代码，在点击事件中添加e.preventDefault()，先阻断表单的默认提交逻辑，再执行打开新窗口的操作：

<!DOCTYPE html>
<body>
  <form id="form" action="http://127.0.0.1:5000/feedback">
    <div class="col gy-2 gx-3 align-items-center">
      <h3 class="mb-1">Report Dark Patterns</h3>
      <p class="fw-light lh-sm">Help us grow by reporting any suspected dark patterns that we missed</p>
      
      <div class="d-grid gap-2">
        <input class="btn btn-primary" type="submit" id="submit">
      </div>
    </div>
  </form>
  <script>
      const submitButton = document.getElementById("submit");
      submitButton.addEventListener("click", (e) => {
        // 阻止表单默认提交行为
        e.preventDefault();
        window.open("http://127.0.0.1:5000/feedback", "_blank");
      });
  </script>
</body>

2. 配置扩展权限（关键） #

打开扩展的manifest.json文件，根据你的Manifest版本添加对应配置：

• Manifest V3：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab"],
  "host_permissions": [
    "http://127.0.0.1:5000/*"
  ],
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'; frame-src http://127.0.0.1:5000/"
  }
}

• Manifest V2：

{
  "manifest_version": 2,
  "name": "你的扩展名称",
  "version": "1.0",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab", "http://127.0.0.1:5000/*"],
  "content_security_policy": "script-src 'self'; object-src 'self'; frame-src http://127.0.0.1:5000/"
}

3. 可选优化：改用普通按钮 #

如果不需要表单提交逻辑，直接把按钮类型改成button，就能避免触发默认提交行为，代码更简洁：

<input class="btn btn-primary" type="button" id="submit" value="提交反馈">

这种情况下，JavaScript里可以不用添加e.preventDefault()。

修改完成后，在Chrome扩展管理页面点击"重新加载"按钮更新扩展，再测试弹窗按钮即可正常打开Flask的反馈页面。

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