크롬 확장 프로그램 연결 문제

Question

Google 크롬 확장 프로그램을 작성했으며 버그가 발생했습니다. 도움이 필요합니다. 내가하는 일은 flickr에서 사진을 텍스트 선택이나 텍스트 검색으로 입력 한 다음 결과 탭을 만드는 것입니다. 확장 프로그램은 대부분의 경우 작동합니다. 그러나 때로는 결과가없는 빈 탭을 만들고 동일한 검색을 반복하면 결과가 표시됩니다. 나는 HTML 파일이 메시징과 통신하는 것과 관련이 있다고 생각했다. 플리커의 요청/응답이 정상적으로 작동 할 수 있도록 항상 플리커의 결과를받는다고해야합니다. 때로는 다른 탭으로 재생하거나 결과를 기다리는 동안 다른 탭에서 작업 할 때 오류가 발생합니다. 잘못이 어디 있는지 알아낼 수있게 도와 주실 수 있겠습니까?

배경 파일 :

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

매니페스트의 res.js에 대해 "run_at":"document_start" 옵션을 설정하십시오.

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

    } 
});