Chrome扩展内容脚本调用API遇CORS及JSON解析错误求助

嘿，我帮你捋捋这个问题——你遇到的其实是内容脚本上下文限制导致的双重问题：CORS拦截让响应内容为空，进而触发JSON解析错误。咱们一步步来解决：

核心问题分析 #

你已经在manifest.json里加了VirusTotal的主机权限，但内容脚本是运行在网页的上下文里的，浏览器仍然会对它强制执行CORS策略。哪怕请求返回状态码200，浏览器其实已经拦截了真实响应，导致res.json()时没有可解析的内容，就出现了Unexpected end of JSON input错误。

而扩展的Background脚本是运行在独立的扩展上下文中，不受网页CORS限制，只要manifest里声明了对应权限，就能正常发起请求并拿到完整响应。

解决方案：用Background脚本做请求中转 #

咱们把API请求移到Background脚本里，内容脚本通过消息传递和它通信，具体步骤如下：

1. 更新manifest.json，添加Background脚本配置 #

修改你的manifest，加入background字段，同时优化权限配置：

{
  "name": "IP information on hover",
  "description": "IP information on hover",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_icon": "hello_extensions.png"
  },
  "permissions": [
    "https://www.virustotal.com/",
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "jquery-3.4.0.js",
        "getIpReport.js"
      ],
      "run_at": "document_end"
    }
  ]
}

注意：把HTTP权限改成HTTPS（VirusTotal支持HTTPS），避免混合内容问题；添加activeTab权限是为了确保消息传递的安全性。

2. 创建background.js处理API请求 #

在扩展目录下新建这个文件，负责实际的API调用：

// 监听来自内容脚本的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'getIpReport') {
    // 构造API请求URL，记得替换成你的真实API密钥
    const apiUrl = `https://www.virustotal.com/vtapi/v2/ip-address/report?ip=${request.ip}&apikey=YOUR_REAL_API_KEY`;
    
    fetch(apiUrl)
      .then(res => {
        // 先检查响应是否成功，避免无效解析
        if (!res.ok) throw new Error(`HTTP错误：${res.status}`);
        return res.json();
      })
      .then(data => sendResponse(data))
      .catch(err => sendResponse({ error: err.message }));
    
    // 返回true保持消息通道开放，等待异步响应返回
    return true;
  }
});

3. 修改getIpReport.js，通过消息传递请求数据 #

替换原来的fetch代码，改成向Background脚本发消息：

// 向Background脚本发送请求，获取IP报告
chrome.runtime.sendMessage(
  { action: 'getIpReport', ip: '8.8.8.8' },
  (response) => {
    if (response.error) {
      console.error('获取IP报告失败:', response.error);
      return;
    }
    console.log('IP报告数据:', response);
  }
);

额外注意事项 #

• API密钥安全：不要把API密钥硬编码在代码里，如果要发布扩展，建议用Chrome的storage API存储，或者让用户手动输入密钥。
• API频率限制：VirusTotal的免费API有请求频率限制，别频繁调用导致被封禁，记得参考官方文档调整调用频率。
• 响应校验：在Background脚本里加了res.ok的检查，避免因API返回错误状态码导致后续解析失败。

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