如何解决Chrome扩展内容脚本向本地PHP发送JS字符串失败问题？

我之前开发Chrome扩展和本地后端交互时，也踩过一模一样的坑——前端明明拿到了正确数据，后端就是收不到。咱们从几个最常见的问题入手排查：

1. 跨域权限配置错误 #

Chrome扩展的Content Script（页面内运行的JS）受同源策略限制，哪怕是请求本地localhost，也需要在manifest.json里明确授权：

// manifest.json（V2或V3都适用）
{
  "permissions": [
    "http://localhost/*", // 允许请求本地PHP服务
    "https://你的目标网站/*" // 确保已授权抓取数据的目标网站
  ]
}

如果是Manifest V3，建议通过Background Service Worker中转请求（V3对Content Script的网络请求限制更严格）。

2. 请求数据格式与接收方式不匹配 #

你说弹窗能显示正确字符串，但PHP没收到，大概率是发送格式和接收方式不匹配：

常见错误示例： #

// JS侧错误：直接传字符串，未设置Content-Type
fetch('http://localhost/save-data.php', {
  method: 'POST',
  body: myDataString // 直接传递原始字符串
});

// PHP侧错误：用$_POST接收非表单格式的数据
<?php
var_dump($_POST); // 会返回空数组！
?>

正确写法参考： #

方案1：FormData格式（适合简单字符串）

const formData = new FormData();
formData.append('content', myDataString);

fetch('http://localhost/save-data.php', {
  method: 'POST',
  body: formData
})
.then(res => res.text())
.then(console.log)
.catch(err => console.error(err));

<?php
if(isset($_POST['content'])) {
  echo "收到数据：".$_POST['content'];
  // 这里可以执行SQL存储逻辑
} else {
  echo "未接收到有效数据";
}
?>

方案2：JSON格式（适合复杂结构化数据）

fetch('http://localhost/save-data.php', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json' // 必须设置该请求头
  },
  body: JSON.stringify({ content: myDataString })
})
.then(res => res.json())
.then(console.log)
.catch(err => console.error(err));

<?php
// 通过php://input读取JSON格式的原始请求体
$rawData = file_get_contents('php://input');
$requestData = json_decode($rawData, true);

if(isset($requestData['content'])) {
  echo json_encode(["status" => "success", "data" => $requestData['content']]);
} else {
  echo json_encode(["status" => "error", "msg" => "未接收到数据"]);
}
?>

3. 本地服务路径与端口错误 #

确认你的XAMPP Apache服务端口是不是默认的80，如果修改过（比如8080），请求URL要带上端口：http://localhost:8080/save-data.php。同时检查PHP文件是否放在XAMPP的htdocs目录下，路径是否拼写正确。

4. 关键调试技巧 #

• 打开Chrome开发者工具的Network面板，找到发送给PHP的请求，查看：
  • 状态码：200表示请求成功，404是路径错误，500是PHP代码报错
  • Request Payload：确认发送的数据是否和弹窗显示的一致
  • Response：查看PHP返回的具体内容，定位问题
• 在PHP代码中添加日志调试：

<?php
// 将请求内容写入Apache日志，便于排查
error_log("收到的原始请求数据：".file_get_contents('php://input'));
?>

日志文件可在XAMPP的apache/logs/error.log中查看。

按这几步排查，基本能解决问题。我当初就是因为漏设置Content-Type，折腾了好半天😂

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