Chrome扩展程序中的API调用需要按两次按钮

时间:2013-03-24 22:20:45

标签: javascript api google-chrome-extension

我正在创建一个Chrome扩展程序,通过inject.js在页面上注入HTML表单,当输入查询并按下按钮时,将通过background.js进行API调用。然后将内容返回到inject.js脚本并进行处理。

当我第一次尝试通过inject.js进行调用时,我收到以下错误:

    Error in event handler for 'undefined': fetchResult is not defined ReferenceError: searchResult is not defined

奇怪的是,当我稍等一下再次按下时,查询就会被提取。

我怀疑fetchresult是第一次未定义,因为它需要一些时间来获取查询但我不知道如何解决这个问题。

inject.js:

    function fetch() {

    var fetchResult;

    var fetchquery = document.getElementById('field').value;

    chrome.extension.sendMessage({greeting: fetchquery}, function(response) {
             fetchResults = response.farewell
            constructHTML(fetchResultsResults)      

        });
    };

background.js:

    function loadXMLDoc(query)
    {

   if (query){
    // new cross origin XML request

   xmlhttp=new XMLHttpRequest();
   xmlhttp.onreadystatechange=function()
    {
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
         fetchResult = JSON.parse(xmlhttp.responseText);
         }
     }

   xmlhttp.open("GET","http://XXXXXXXXXXXXXXX&q="+query, true);
   xmlhttp.send();

   return fetchResult;

   } else {

       return "noquery";
    }
    };

    chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
       if (loadXMLDoc(request.greeting) != "noquery"){
            sendResponse({farewell: loadXMLDoc(request.greeting)})
            }
    });

任何帮助将不胜感激!

1 个答案:

答案 0 :(得分:4)

XMLHttpRequest是异步,因此您应该调用回调来传递结果,而不是return fetchResult。这是一个例子:

   function loadXMLDoc(query, callback)
   {

   if (query){
    // new cross origin XML request

   xmlhttp=new XMLHttpRequest();
   xmlhttp.onreadystatechange=function()
    {
     if (xmlhttp.readyState==4)
      {
         if(xmlhttp.status==200)
         {
           fetchResult = JSON.parse(xmlhttp.responseText);
           callback(fetchResult);
         } else {
           callback("noquery");
         }
      }
     }

   xmlhttp.open("GET","http://XXXXXXXXXXXXXXX&q="+query, true);
   xmlhttp.send();

   } else {

       callback("noquery");
    }
    };

    chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
            loadXMLDoc(request.greeting, function(fetchResult) {
              if (fetchResult != "noquery")
                sendResponse({farewell: fetchResult})
              else
                sendResponse({});
            });
            return true; // See the description of https://developer.chrome.com/extensions/extension.html#property-onMessage-sendResponse.
    });