Error when using chrome.runtime.onemessage with Jquery ajax

Question

Previously I had the code:

 $.get(url, function(data){
        var $response = $(data);
        overallRating = $response.find("div.grade").eq(0).html();
        arr[pos].rating = overallRating;

in order to get the data I was looking for. This worked for the most part but I couldn't assign the value to arr[pos]. I found that because $.get() is asynchronous I can use chrome.runtime.onMesssage and .sendMessage and use the callback function to access the value. So I came up with this in my background script, tabcheck.js:

chrome.runtime.onMessage.addListener(function(message, send, callback){ 
console.log("message recieved");
$.get(send.url , function(data){                                            
            console.log(data);
            callback(data);                                 
    });

return true; //https://stackoverflow.com/questions/17246133/contexts-and-methods-for-communication-between-the-browser-action-background-sc


});

and the sendmessage in my popup.js page:

chrome.runtime.sendMessage('message', {url: url } , function(data) {
            console.log(data);
            var $response = $(data);
            overallRating = $response.find("div.grade").eq(0).html();
            arr[pos].rating = overallRating;
    });

and I think what is happening is that in the onmessage the url is not being accessed. I remember getting an error similar to: Chrome Extention Port error: Could not establish connection. Receiving end does not exist , although don't remember if that's the exact one. Data comes back undefined

So what has changed between the first and second that would make the new function not be able to access the url anymore? How can I fix it? My goal is to get the value overAllRating into arr[pos].rating.

Heres my manifest if its necessary:

{
 "manifest_version": 2,

  "name": "",
  "description": "n",
 "version": "1.0",

"background":{
    "scripts": ["jquery-2.1.3.min.js","tabcheck.js"],
    "persistent": false
},
"permissions":[
    "tabs",
    "https://www.myurl1/*",
    "http://www.myurl2/*",

     ],


 "browser_action": {

    "default_icon": "icon.png",
    "default_popup": "uv.html",
    "default_title": ""

 },

"content_scripts": [
    {
    "matches":["https://www.myurl/*"],
    "js":["jquery-2.1.3.min.js","main.js"]

    }

]


}

score 0 · Accepted Answer · edited May 23 '17 at 12:02

DISCLAIMER

This answer is about fixing errors in your code, but not in your logic. Your code will work, but not as intended anyway. See the end of the answer.

Fixing messaging code

// Wrong:
chrome.runtime.sendMessage('message', {url: url} , function(data) {/*...*/});

This is a wrong format for sendMessage.

You can see the full documentation, but most often it takes 2 arguments:

chrome.runtime.sendMessage(message, callback);

where message, is, well, anything - as long as it's JSON-serializable.

If you add a string as a first argument, it becomes a 3-argument form and is interpreted as a cross-extension message with the first argument being the target ID.

Chrome tries to find an extension with the ID "message" and fails, spewing the "receiving end does not exist" error.

The message passed to the listener as follows:

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse {
  // message is the original message
  // sender is an object containing info on who sent the message
  // sendResponse is a function to be called
});

You are trying to use the second argument:

chrome.runtime.onMessage.addListener(function(message, send, callback){ 
  console.log("message recieved");
  $.get(
    send.url, // <-- This is wrong
    function(data) {                                            
      console.log(data);
      callback(data);                                 
    }
  );

  return true;
});

Putting it back together:

chrome.runtime.sendMessage(
  {url: url}, // This will be the message
  function(data) {/*...*/}
);

and

chrome.runtime.onMessage.addListener(function(message, sender, callback){ 
  console.log("message recieved");
  $.get(
    message.url,
    function(data) {                                            
      console.log(data);
      callback(data);                                 
    }
  );
  return true;
});

And now the real problem

Now that we fixed this error, this will in no way help you!

You have not "cured" asynchronous nature of $.get. There are now 2 layers of asynchronicity involved, AJAX and messaging. Your assignment still won't work as you intended - and there's not enough code present to fix that.

You are probably running in either of those two problems:

Why is my variable unaltered after I modify it inside of a function? (if you are trying to use arr after this code)
JavaScript closure inside loops (if you believe your pos is acting funny)

I recommend careful study of those two canonical questions. You don't need messaging at all here, it does not solve anything.

i know my loop is working alright because it worked before i got into the ajax. I actually saw that first asynchronous answer before and I thought I understood it but obviously not. Ill take another look at it and try something new. thanks for the detailed answer — user3286125, May 07 '15 at 18:59
If you have a solution that's different or has more details - yes, post it as another answer. — Xan, May 08 '15 at 06:20

Error when using chrome.runtime.onemessage with Jquery ajax

1 Answers1

DISCLAIMER

Fixing messaging code

And now the real problem