Chrome扩展crbug/1173575报错及Flask数据传递问题排查

这个错误是Chrome浏览器的已知渲染bug，和你的扩展功能逻辑无关——它是Chrome处理扩展弹窗开发者控制台时的内部问题，只会在弹窗控制台中显示，不会影响扩展的实际运行。

处理方式：

• 直接忽略该错误，不影响功能；
• 更新Chrome到最新稳定版，部分新版本已修复此bug；
• 改用扩展的后台Service Worker控制台调试，避免在弹窗控制台查看日志。

1. 跨域资源共享（CORS）限制 #

Manifest V3的弹窗属于Chrome隔离上下文，直接向Flask后端发请求会触发跨域限制。

• 解决：在Flask后端添加CORS支持，使用flask-cors库：

  from flask import Flask, request
  from flask_cors import CORS
  
  app = Flask(__name__)
  # 允许你的扩展弹窗域名访问，替换为实际的扩展ID
  CORS(app, origins=["chrome-extension://你的扩展ID"])
  # 测试环境可临时允许所有来源：CORS(app)
  
  @app.route('/print-test', methods=['POST'])
  def print_test():
      # 兼容JSON和表单数据两种格式
      data = request.get_json() or request.form
      # 处理打印逻辑
      return {"status": "success", "received": data.get("text")}
  

2. 扩展权限配置缺失 #

Manifest V3要求显式声明网络请求权限，否则请求会被拦截。

• 检查manifest.json，添加对应权限：

  {
    "manifest_version": 3,
    "permissions": ["activeTab", "scripting"],
    "host_permissions": ["http://localhost:5000/*"] // 替换为你的Flask后端地址
  }
  

3. 弹窗生命周期导致请求中断 #

扩展弹窗在失去焦点时会被销毁，如果请求在弹窗关闭后才发送，会直接中断。

• 解决：将请求逻辑移到后台Service Worker中（Manifest V3替代旧版背景页）：

  // popup.js：弹窗中触发请求，委托给Service Worker
  document.getElementById('submit-btn').addEventListener('click', () => {
    const selectedText = document.getElementById('selected-text').value;
    chrome.runtime.sendMessage(
      {action: 'submitPrint', text: selectedText},
      (res) => console.log(res)
    );
  });
  
  // background.js（Service Worker）：实际发起请求
  chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
    if (msg.action === 'submitPrint') {
      fetch('http://localhost:5000/print-test', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({text: msg.text})
      })
      .then(res => res.json())
      .then(data => sendResponse(data))
      .catch(err => sendResponse({error: err.message}));
      // 返回true保证异步响应能正常发送
      return true;
    }
  });
  

4. 请求数据格式不匹配 #

如果Flask后端期望JSON格式，但你发送的是普通表单数据，会导致后端无法解析。

• 确保请求格式正确：
  • 发送JSON：设置Content-Type: application/json，用JSON.stringify()序列化数据；
  • 发送表单：使用FormData对象，后端用request.form获取。

5. 临时扩展ID变化导致CORS失效 #

如果是临时加载未打包的扩展，每次重启Chrome扩展ID会变化，之前配置的CORS origin会失效。

• 解决：打包扩展获取固定ID，或测试环境临时允许所有跨域请求。

• 用Chrome开发者工具的Network面板查看请求状态：是否发送成功、是否有CORS错误、响应码是什么；
• 查看Flask后端的控制台日志，确认是否接收到请求；
• 优先排查数据传递问题，crbug/1173575错误可暂时忽略。

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