将 chrome.runtime.onemessage 与 Jquery ajax 一起使用时出错

Question

之前我有代码：

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

为了得到我正在寻找的数据。这在大多数情况下都有效，但我无法将值分配给 arr[pos]。我发现因为 $.get() 是异步的，所以我可以使用 chrome.runtime.onMesssage 和 .sendMessage 并使用回调函数来访问该值。所以我在后台脚本 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


});

以及我的 popup.js 页面中的发送消息：

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;
    });

我认为正在发生的事情是在 onmessage 中没有访问 url。我记得收到类似于：Chrome Extention Port error: Could not establish connection. Receiving end does not exist 的错误，但不记得那是否是确切的错误。数据返回未定义

那么在第一个和第二个之间发生了什么变化会使新函数无法再访问该 url？我该如何解决？我的目标是将值 overAllRating 转换为 arr[pos].rating。

如有必要，这是我的清单：

{
 "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"]

    }

]


}

Answer 1

免责声明

这个答案是关于修复代码中的错误，而不是你的逻辑中的错误。您的代码将起作用，但无论如何都不会按预期工作。见答案结尾。

修复消息代码

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

sendMessage 的格式错误。

您可以看到full documentation，但大多数情况下它需要两个参数：

chrome.runtime.sendMessage(message, callback);

message 可以是任何东西 - 只要它是 JSON 可序列化的。

如果您添加一个字符串作为第一个参数，它会变成一个 3 参数形式，并被解释为第一个参数是目标 ID 的交叉扩展消息。

Chrome 尝试查找 ID 为 "message" 的扩展程序并失败，并出现“接收端不存在”错误。

---

传递给监听器的消息如下：

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
});

您正在尝试使用 second 参数：

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;
});

---

重新组合起来：

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

和

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

现在才是真正的问题

现在我们修复了这个错误，这对你没有任何帮助！

您还没有“治愈”$.get 的异步特性。现在涉及 2 层异步性，AJAX 和消息传递。您的任务仍然无法按您的预期工作 - 并且没有足够的代码来解决这个问题。

您可能遇到了这两个问题中的任何一个：

• Why is my variable unaltered after I modify it inside of a function?（如果您尝试在此代码后使用arr）

• JavaScript closure inside loops（如果您认为您的pos 表现得很有趣）

我建议仔细研究这两个典型问题。你根本不需要消息，它不能解决任何问题。