如何在Chrome扩展中向PHP脚本POST数据并获取响应？

没问题！我给你一套完整的可落地示例，从Manifest配置到前后端代码都写清楚，照着抄就能搞定～

Chrome扩展有严格的同源策略限制，必须在manifest文件里声明允许访问你的PHP脚本所在的域名，否则请求会直接被拦截。下面分主流的V3版本和旧版V2给你示例：

Manifest V3（当前推荐版本） #

新建/修改manifest.json，重点看host_permissions字段：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": [],
  "host_permissions": [
    "https://your-domain.com/*"  // 替换成你的PHP脚本实际域名，注意是http还是https
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

小贴士：别偷懒用*://*/*这种全局通配符，既不安全也可能被Chrome审核拒绝，明确写你的目标域名就好。

Manifest V2（旧版扩展兼容用） #

如果还在维护V2的扩展，直接把域名写在permissions里：

{
  "manifest_version": 2,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": [
    "https://your-domain.com/*"
  ],
  "browser_action": {
    "default_popup": "popup.html"
  }
}

假设你的扩展用popup页面触发请求，先写popup.html：

<!DOCTYPE html>
<html>
<head>
  <style>
    button { padding: 10px; cursor: pointer; margin: 10px; }
    #response { margin: 10px; padding: 8px; border: 1px solid #eee; }
  </style>
</head>
<body>
  <button id="sendBtn">发送POST请求到PHP</button>
  <div id="response"></div>
  <script src="popup.js"></script>
</body>
</html>

然后是核心的popup.js，用async/await+Fetch发送请求：

document.getElementById('sendBtn').addEventListener('click', async () => {
  const responseEl = document.getElementById('response');
  try {
    // 准备要发送的POST数据
    const postData = {
      username: 'ChromeExtensionUser',
      content: '这是来自扩展的测试请求'
    };

    // 发送POST请求到你的PHP脚本
    const res = await fetch('https://your-domain.com/handle-request.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',  // 告诉PHP我们发的是JSON格式
        // 如果要发表单格式，就换成 'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: JSON.stringify(postData)  // 把JS对象转成JSON字符串
      // 表单格式的话，就用 new URLSearchParams(postData).toString()
    });

    // 检查请求是否成功（状态码200-299）
    if (!res.ok) {
      throw new Error(`请求失败！状态码：${res.status}`);
    }

    // 解析PHP返回的JSON响应
    const result = await res.json();
    responseEl.textContent = `✅ 请求成功！响应：${JSON.stringify(result)}`;
  } catch (err) {
    responseEl.textContent = `❌ 请求出错：${err.message}`;
  }
});

写好接收POST数据并返回响应的PHP脚本，分两种格式处理：

处理JSON格式的POST请求 #

<?php
// 注意：Chrome扩展在Manifest授权后不会有CORS问题，本地测试如果报错可以临时加下面这行，但正式环境建议去掉
// header("Access-Control-Allow-Origin: *");

// 获取JSON格式的POST数据
$rawData = file_get_contents('php://input');
$postData = json_decode($rawData, true);

// 处理数据（比如验证、存数据库等）
$username = $postData['username'] ?? '匿名用户';
$content = $postData['content'] ?? '无内容';

// 构造响应并返回
$response = [
  'status' => 'success',
  'msg' => '已成功接收请求',
  'received' => [
    'username' => $username,
    'content' => $content
  ]
];

header('Content-Type: application/json');
echo json_encode($response);
?>

处理表单格式的POST请求（如果前端用了表单格式） #

<?php
// 直接用$_POST获取数据
$username = $_POST['username'] ?? '匿名用户';
$content = $_POST['content'] ?? '无内容';

// 构造响应
$response = [
  'status' => 'success',
  'msg' => '表单数据已接收',
  'data' => [
    'username' => $username,
    'content' => $content
  ]
];

header('Content-Type: application/json');
echo json_encode($response);
?>

• 域名一定要完全匹配：比如你的PHP脚本是http://localhost:8080/，那Manifest里必须写http://localhost:8080/*，不能漏端口或者写错协议。
• 如果本地测试用XAMPP/WAMP，记得启动服务器，并且确保PHP脚本的路径正确。
• V3扩展的后台服务worker（service worker）里发请求，也是同样的配置，只要host_permissions声明了域名就可以。

内容的提问来源于stack exchange，提问作者L.bedford