Chrome Extension: How to pass a variable from Content Script to background.html

Question

I can't figure out how to pass a variable (or an array of variables) from a content script to a background page. What I'm trying to do is find certain DOM elements with my content script, then send them to my background page so that I can make a cross-domain XMLHttpRequest with them (store them in a database on a different site).

My code is below. I know that the variable named "serialize" is not being passed (and I don't expect it to based on my current code but have it in there so it's easier to see what I want to do.) So how can I pass a variable from a content script to a background page?

My Content Script:

function onText(data) {
alert("Great Success!!");
};
$("#insertprofile").click(function(){
serialize = $(".certaininputs").serialize();
chrome.extension.sendRequest({'action' : 'insertprofile', 'serialize' : serialize}, onText);
});

My Background Page:

   <script>
      function insertprofile(serialize) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(data) {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              var data = JSON.parse(xhr.responseText);
              callback(data);
            } else {
              callback(null);
            }
          }
        }
        var url = ('http://mysite.com/storeindatabase.php?' + serialize);
        xhr.open('GET', url, true);
        xhr.send();
      };
      function onRequest(request, sender, serialize) {
        if (request.action == 'insertprofile') {
          insertprofile(serialize);
        }
      };
      chrome.extension.onRequest.addListener(onRequest);
    </script>

Have you checked in the Inspector console if there are any errors? (on the page, and background page) — Mohamed Mansour, Jan 13 '11 at 00:37

score 1 · Answer 1 · answered Dec 13 '12 at 02:23

1

Did you missing "...php?serialize=' + serialize)" on this code:

var url = ('http://mysite.com/storeindatabase.php?' + serialize);

It's should be like this:

var url = ('http://mysite.com/storeindatabase.php?serialize=' + serialize);

answered Dec 13 '12 at 02:23

Tien LX

41
2
7

The "serialize" variable used in the question represents the intent of what the asker would like. They're looking for a mechanism to pass data from the script to the background page. – Fls'Zen Dec 13 '12 at 02:47

serg · Answer 2 · 2011-01-13T22:59:49.127

0

Do you mean:

chrome.extension.sendRequest({'action' : 'insertprofile', 'serialize': serialize}, onText);

?

EDIT

function onRequest(request, sender, callback) {
   if (request.action == 'insertprofile') {
     insertprofile(request.serialize, callback);
   }
};

edited Jan 13 '11 at 22:59

answered Jan 13 '11 at 07:14

serg

109,619
77
317
330

Hmmm, maybe. It still doesn't work for me though. For example, if I change the code to (...php?' + 'name=john'), 'john' is received by the php script and stored in my database. But if I change it to (...php?' + serialize), the php script receives nothing even though the value of serialize on the content script is name=john. So I'm pretty sure the variable is still not being passed to the background page. Is there something else I'm missing? – John C Jan 13 '11 at 16:04
I'm trying to. I edited my code above to reflect changes I've made based on your help but it still isn't working. – John C Jan 13 '11 at 22:05
@John See edit. `request` object would contain your `serialize` – serg Jan 13 '11 at 23:00

score 0 · Answer 3 · answered Jan 14 '11 at 15:45

I think your mistake is accessing the serialize instead of request.serialize.

function insertprofile(serialize) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(data) {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              var data = JSON.parse(xhr.responseText);
              callback(data);
            } else {
              callback(null);
            }
          }
        }
        var url = ('http://mysite.com/storeindatabase.php?' + serialize);
        xhr.open('GET', url, true);
        xhr.send();
      };


chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.action == 'insertprofile') {
          insertprofile(request.serialize);
          sendResponse({});
  }

});

Chrome Extension: How to pass a variable from Content Script to background.html

3 Answers3

Linked