Question

I have written an extension for google chrome and I have a bug I need a help solving.
what I do is using either a text selection or an input of text search for photos on flickr and then create a results tab.
The extension works most of the times. but sometimes it creates a blank tab with no results and when I repeat the same search it then shows results. I figured that it’s something to do with the html files messaging maybe something to do with them communicating. I have to say that I always receive the results from flickr so that the request/responce with flickr works ok. Sometimes the error happens when I play with other tabs or do something on other tabs while waiting for results. can you please help me figure out where’s the fault?

the background file:

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

results html: has only a reference to the js file res.js

res.js :

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

  });
});

I have to mention that when the tab is empty if I put alert on the //*****// part it won’t
fire.
but when I print out the photos.length at the tab create call back function part it prints out the correct result.

Answer 1

Try to set "run_at":"document_start" option for your res.js in the manifest.

I think callback from chrome.tabs.create is fired right away without waiting for page scripts to be loaded, so you might try something like this instead:

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

    }
});