Chrome扩展Fetch文本触发CSP及request请求空白问题咨询

疑问1：Chrome为何会将文本内容解析为网页并加载脚本？ #

• 首先明确：调用fetch+resp.text()仅会读取响应的原始文本内容，浏览器不会自动解析、渲染或执行其中的脚本。你看到的CSP报错并非来自读取文本这个操作。
• 可能的触发原因：
  • 若你后续将读取到的文本通过innerHTML等方式插入到扩展选项页的DOM中，浏览器会解析插入的HTML内容，执行其中的脚本，这才会触发扩展自身的CSP限制。
  • 抖音返回的响应中若包含CSP相关响应头，该头仅作用于直接渲染页面的场景，不会影响仅读取文本的fetch操作。
• 验证方式：移除所有DOM插入操作，仅保留fetch和text()读取逻辑，观察是否还会触发CSP报错。若不再报错，说明问题出在DOM插入环节。

疑问2：使用request方法请求时返回空白，模拟工具却能获取数据？ #

• 代码中的request若为chrome.runtime.sendRequest（已废弃，推荐chrome.runtime.sendMessage）或自定义请求方法，返回空白的核心原因是请求头/参数与模拟工具不一致。
• 具体分析：
  • 模拟工具（如Postman）会自动添加符合浏览器标准的请求头（User-Agent、Accept等），而Chrome扩展中fetch默认的User-Agent带有Chrome Extension标识，易被抖音反爬机制拦截，返回空白内容。
  • 若request方法未正确设置必要请求头、未处理响应编码，也会导致服务器拒绝返回有效内容。
• 解决方法：
  在fetch中手动添加模拟工具使用的请求头，示例：

  let url = "https://www.douyin.com/user/MS4wLjABAAAA6SPZyhEA5zRYJsmNsm1Xj5PW1cGRJXZ9jx7bX5p7SwXo-a2ByHwlHbfzEbjLeroO?showTab=like"
  let resp = await fetch(url, {
    headers: {
      "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36",
      "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8"
      // 可从模拟工具的请求头中复制更多必要字段
    },
    credentials: "omit"
  })
  let text = await resp.text()
  

  同时检查request方法的实现，确认请求头传递、响应处理逻辑是否正确。

补充：扩展控制台执行fetch触发CSP #

这是因为扩展manifest.json中设置的content_security_policy限制了资源加载或脚本执行。若确实需要调整，可适当放宽CSP配置，但需注意安全风险，避免过度开放权限。

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