如何在Chrome扩展(CRX)中调用Slack Webhooks API？

首先，你的代码里有几个关键问题，再加上Chrome扩展的跨域限制，才导致了当前的错误。我们一步步来修复：

1. 修正请求格式错误 #

你当前的代码同时使用了FormData和Content-Type: application/json，这是冲突的——Slack Incoming Webhooks要求直接发送JSON格式的请求体，不需要用FormData包装。

修改后的请求代码应该是这样：

const payload = { text: '@juneyoung ' + confirmMessage };
const fetchOptions = {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(payload) // 直接序列化JSON作为请求体
};

fetch(ref.sharedValue.slackAPIUrl, fetchOptions)
  .then(resp => {
    console.log('resp :: ', resp);
    return resp.text(); // Slack Webhook返回的是纯文本，不是JSON，用text()更合适
  })
  .then(result => {
    console.log('API Result ', result);
    ref.showNotice('success', 'Success!', true);
  })
  .catch(err => {
    console.error('请求错误:', err);
    ref.showNotice('error', 'Failed to send message!', true);
  });

注意：Slack的Webhook响应通常是ok这样的纯文本，不是JSON对象，所以用resp.text()替代resp.json()可以避免解析错误。

2. 解决Chrome扩展的跨域问题 #

Chrome扩展的内容脚本（Content Script）如果直接向外部域名发请求，会受到CORS限制。你需要在manifest.json中添加对Slack Webhook域名的权限，具体配置分版本：

对于Manifest V3： #

{
  "manifest_version": 3,
  "host_permissions": [
    "https://hooks.slack.com/*"
  ],
  // 其他扩展配置...
}

对于Manifest V2： #

{
  "manifest_version": 2,
  "permissions": [
    "https://hooks.slack.com/*"
  ],
  // 其他扩展配置...
}

添加这个权限后，Chrome会允许你的扩展向Slack的Webhook域名发起请求，绕过CORS限制。

3. 处理SSL证书警告 #

你看到的"The SSL certificate used to load resources from https://hooks.slack.com will be distrusted in M70"警告是Chrome旧版本（版本70）的提示，现在的Chrome新版本已经修复了这个证书信任问题。如果你的用户还在使用旧版本Chrome，建议他们升级浏览器；如果是你自己测试用的旧版本，可以忽略这个警告，因为Slack的证书在新版本里是完全可信的。

额外建议 #

• 确保你的Slack Webhook URL是正确的，没有拼写错误，并且已经在Slack工作区中启用了对应的Incoming Webhook集成。
• 在请求中添加错误捕获（catch块），这样可以更清晰地看到请求失败的具体原因。

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