Chrome 扩展发布请求未发送数据

Question

第一次使用该网站提出问题。我是 Chrome 扩展程序的新手，所以我确定我犯了一些愚蠢的错误。我提前道歉。

我正在尝试获取当前选项卡的 url 并将其发布到一个 URL，然后该 URL 将接收它并将其推送到数据库中。就像我自己的个人书签服务一样。我已经尽可能多地进行了调试，数据一直在发送到我发送 XHR 请求的位置。但是当我在服务器端脚本上回显它时，数据并没有出现。我正在确认它正在访问我的 URL，因为我正在控制台记录输出......但再次没有数据被传递。

BACKGROUND.JS

chrome.runtime.onMessage.addListener(function(request, sender, callback) {
    if (request.action == "xhttp") {
        var xhttp = new XMLHttpRequest();
        var method = request.method ? request.method.toUpperCase() : 'GET';
        xhttp.open(method, request.url, true);
        xhttp.send(request.data);
        xhttp.onload = function() {
            callback(xhttp.responseText);
        };
        return true
    }
});

MANIFEST.json

{
  "name": "bookmarker",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "POSTIN BOOKMARKS!",
  "homepage_url": "URL",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "permissions": [
    "contentSettings",
    "cookies",
    "tabs",
    "geolocation",
    "http://*/*"
  ],
  "content_scripts": [
    {
      "js": ["contentscript.js"],
      "matches": ["http://*/*"]
    }
  ],
  "browser_action": {
    "default_icon": "icons/icon16.png",
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

MAIN.JS

jQuery(function() {
    jQuery('.reminded').on('click', function(e){
        e.preventDefault();

        chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
            var url         = tabs[0].url,
                date        = 1391048414,
                clientId    = 1234
            chrome.runtime.sendMessage({
                method: "POST",
                action: "xhttp",
                url: "http://www.API.com/endpoint",
                data: {url: url, date: date, clientId: clientId}
            }, function(responseText) {
                console.log(responseText);
            });
        });
    });
});

非常感谢您提供任何人可以分享的任何光。

Answer 1

您没有提到“main.js”的使用位置，但我猜它是在弹出页面中使用的，对吧？当您在清单文件中声明权限时，弹出页面还可以在 Chrome 扩展程序中发出跨域请求。所以，直接使用jQuery.ajax进行跨域请求即可：

jQuery.ajax({
    type: "POST",
    url: "http://www.API.com/endpoint",
    data: {url: url, date: date, clientId: clientId},
    success: function(data) {
        console.log(data);
    }
});

---

为了记录，您问题中的代码失败，因为您试图提交一个 JavaScript 对象（{url: url, date: date, clientId: clientId} 通过 XMLHttpRequest 的 .send 方法。这没有任何意义，您的服务器会收到字符串 [object Object] 因为对象的默认序列化。
要使您的原始代码正常工作，您应该使用jQuery.param 序列化表单数据和xhttp.setRequestHeader("Content-Type", "application/x-www-form-url-encoded");。