First time using the site to ask a question. I'm new to Chrome Extensions so I'm sure I'm making some stupid mistake. I apologize in advance.

I'm trying to grab the current tab's url and POST it to a URL that will then recieve it and push it into a database. Like my own personal bookmarking service. I've debuged as much as I can, the data is making it all the way to where i'm sending my XHR request.. but the data doesn't e out when I echo it on my server side script. I'm confirming that it's hitting my URL because i'm console logging the output... but again no data is being passed.

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: "",
                data: {url: url, date: date, clientId: clientId}
            }, function(responseText) {
                console.log(responseText);
            });
        });
    });
});

Thank you very much in advance for any light anyone can share.

First time using the site to ask a question. I'm new to Chrome Extensions so I'm sure I'm making some stupid mistake. I apologize in advance.

I'm trying to grab the current tab's url and POST it to a URL that will then recieve it and push it into a database. Like my own personal bookmarking service. I've debuged as much as I can, the data is making it all the way to where i'm sending my XHR request.. but the data doesn't e out when I echo it on my server side script. I'm confirming that it's hitting my URL because i'm console logging the output... but again no data is being passed.

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./endpoint",
                data: {url: url, date: date, clientId: clientId}
            }, function(responseText) {
                console.log(responseText);
            });
        });
    });
});

Thank you very much in advance for any light anyone can share.

• javascript
• post
• google-chrome-extension
• xmlhttprequest

Share Improve this question Follow asked Jan 20, 2014 at 3:05 dillondangerdillondanger 4311 silver badge33 bronze badges 2

• why background.js is used here? why not put contents of main.js directly in background.js – avi Commented Jul 13, 2014 at 8:38
• I guess not helpful but I tried your original XMLHttpRequest snippet, simplified to always POST to a specific URI, and it worked fine for me. Thanks for the example! – Daniel Earwicker Commented Apr 7, 2016 at 14:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You didn't mention where "main.js" was used, but I guess that it's used in the popup page, right? The popup page can also make cross-domain requests in a Chrome extension when you've declared the permissions in the manifest file. So, just use jQuery.ajax directly to make the cross-domain request:

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

---

For the record, the code in your question is failing because you're trying to submit a JavaScript Object ({url: url, date: date, clientId: clientId} via the .send method of a XMLHttpRequest. This makes no sense, and your server would receive the string [object Object] because of the default serialization of objects.
To get your original code to work, you should use jQuery.param to serialize the form data and xhttp.setRequestHeader("Content-Type", "application/x-www-form-url-encoded");.