Question

我为谷歌浏览器编写了一个扩展程序，我有一个错误，我需要帮助解决。我所做的是在flickr上使用文本选择或文本搜索输入照片，然后创建结果选项卡。扩展在大多数时间都有效。但有时它会创建一个没有结果的空白选项卡，当我重复相同的搜索时，它会显示结果。我认为这与html文件消息传递有关，可能与他们沟通有关。我必须说我总是从flickr收到结果，以便flickr的请求/响应正常。有时，当我与其他标签一起玩或在等待结果时在其他标签上执行某些操作时会发生错误。能帮我弄清楚哪里出错了？

后台文件：

function searchSelection(info,tab){
var updated;
    if(info.selectionText==null){
        var value = prompt("Search Flickr", "Type in the value to search"); 
        updated=makeNewString(value);
    }
    else{
        updated=makeNewString(info.selectionText);
    }
    var resultHtml;
    var xhReq = new XMLHttpRequest();
    xhReq.open(
    "GET",
    "http://api.flickr.com/services/rest/?method=flickr.photos.search&text="+updated+
    "&api_key=a0a60c4e0ed00af8d70800b0987cae70&content_type=7&sort=relevance&per_page=500",
    true);
    xhReq.onreadystatechange = function () {

        if (xhReq.readyState == 4) {
            if (xhReq.status == 200) {
            chrome.tabs.executeScript(tab.id, {code:"document.body.style.cursor='auto';"});
                var photos = xhReq.responseXML.getElementsByTagName("photo");
                if(photos.length==0){
                    alert("No results found for this selection");
                    chrome.tabs.executeScript(tab.id, {code:"document.body.style.cursor='auto';"});
                    return;
                }
                var myJSPhotos=[];
                for(var i=0; i<photos.length; i++){
                    var data={"id":photos[i].getAttribute("id"),"owner":photos[i].getAttribute("owner"),
                                "secret":photos[i].getAttribute("secret"),"server":photos[i].getAttribute("server"),
                                "farm":photos[i].getAttribute("farm"),"title":photos[i].getAttribute("title")};
                    myJSPhotos[i]=data;
                }

                    chrome.tabs.create({"url":"results.html"},function(thistab){
                    var port= chrome.tabs.connect(thistab.id);
                    port.postMessage({photos:myJSPhotos});
                });

            }
        };
    };
    xhReq.send(null);
    chrome.tabs.executeScript(tab.id, {code:"document.body.style.cursor='wait';"});

}


var context="selection";
var id = chrome.contextMenus.create({"title": "search Flickr", "contexts":[context,'page'],"onclick":searchSelection});

结果html：只引用了js文件res.js

res.js：

chrome.extension.onConnect.addListener(function(port) {
  port.onMessage.addListener(function(msg) {
//*****//
    var photos=msg.photos;
    createPage(photos);

  });
});

我必须提一下，当标签为空时，如果我在//*****//部分发出警报则不会火。但是当我在标签创建回调函数部分打印出photos.length时，它会打印出正确的结果。

Answer 1

~~尝试为清单中的"run_at":"document_start"设置res.js选项。~~

我认为来自chrome.tabs.create的回调会在不等待加载页面脚本的情况下立即触发，因此您可能会尝试这样的事情：

//global vars
var createdTabId = null;
var myJSPhotos = null;

xhReq.onreadystatechange = function () {

    //assign myJSPhotos to a global var

    chrome.tabs.create({"url":"results.html"},function(thistab){
        createdTabId = thistab.id;
    });
}

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if(changeInfo.status == "complete" && tab.id == createdTabId) {
        createdTabId = null;

        //now page is loaded and content scripts injected
        var port = chrome.tabs.connect(tab.id);
        port.postMessage({photos:myJSPhotos});

    }
});

chrome扩展连接问题

1 个答案: