我正在创建一个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)})
}
});
任何帮助将不胜感激!
答案 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.
});