拡張子とコンテンツのjavascriptファイル間の双方向通信

Question

私はfirefoxのサイドバー拡張で双方向の通信要求応答を達成しようとしていますが、これはcontent.jsという名前のファイルがコンテンツ側にあります。 .jsファイルはxulに存在します。 dispatchEventメソッドを使用してevent.jsからsidebar.jsファイルに通信できます。私のイベントは、sidebar.jsファイルのXMLHttpRequestを生成し、サーバーにヒットし、応答を返します。ここでは、私はevent.jsファイルに応答を渡すことができません。 event.jsファイルで応答にアクセスします。今まで私は片方向通信しか達成していません。双方向のコミュニケーションを手伝ってください。次のように

コードは次のとおりです。

// event.js file 
// This event occurs on blur of the text box where i need to save the text into the server 

function saveEvent() { 

var element = document.getElementById("fetchData"); 
      element.setAttribute("urlPath", "http://localhost:8080/event?Id=12"); 
      element.setAttribute("jsonObj", convertToList); 
      element.setAttribute("methodType", "POST"); 
      document.documentElement.appendChild(element); 

      var evt = document.createEvent("Events"); 
      evt.initEvent("saveEvent", true, true); 
      element.dispatchEvent(evt); 

//Fetching the response over here by adding the listener 
document.addEventListener("dispatchedResponse", function (e) { MyExtension.responseListener(e); }, false, true); 

} 

var MyExtension = { 
    responseListener: function (evt) { 
     receivedResponse(evt.target.getAttribute("responseObject")); 
    } 
} 

function receivedResponse(event) { 
    alert('response: ' + event); 
} 


// sidebar.js file 

window.addEventListener("load", function (event) { 

var saveAjaxRequest = function (urlPath, jsonObj, methodType, evtTarget) { 

     var url = urlPath; 
     var request = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"].createInstance(Components.interfaces.nsIXMLHttpRequest); 
     request.onload = function (aEvent) { 
      window.alert("Response Text: " + aEvent.target.responseText); 
      saveResponse = aEvent.target.responseText; 

      //here i am again trying to dispatch the response i got from the server back to the origin, but unable to pass it... 

      evtTarget.setAttribute("responseObject", saveResponse); 
      document.documentElement.appendChild(evtTarget); 

      var evt = document.createEvent("dispatchedRes"); // Error line "Operation is not supported" code: "9" 
      evt.initEvent("dispatchedResponse", true, false); 
      evtTarget.dispatchEvent(evt); 
     }; 
     request.onerror = function (aEvent) { 
      window.alert("Error Status: " + aEvent.target.status); 
     }; 
     //window.alert(methodType + " " + url); 
     request.open(methodType, url, true); 
     request.send(jsonObj); 
    }; 


this.onLoad = function() { 

document.addEventListener("saveEvent", function (e) { MyExtension.saveListener(e); }, false, true); 


} 


var MyExtension = 
     { 
      saveListener: function (evt) { 
       saveAjaxRequest(evt.target.getAttribute("urlPath"), evt.target.getAttribute("jsonObj"), evt.target.getAttribute("methodType"), evt.originalTarget); 
      } 
     }; 


}); 

Answer 1

は、なぜあなたはサイドバーの文書にあなたのfetchData要素を移動していますか？どこにでも置いてください。さもなければ、あなたのコンテンツコードはイベントを受け取ることができません。また、コンテンツ文書を使用してイベントを作成します。最後に、カスタムイベントのdocument.createEvent()パラメータは"Events"である必要があります。だからあなたの//here i am again tryingコメントの後のコードは次のようになります。

evtTarget.setAttribute("responseObject", saveResponse); 

var evt = evtTarget.ownerDocument.createEvent("Events"); 
evt.initEvent("dispatchedResponse", true, false); 
evtTarget.dispatchEvent(evt); 

あなたはここでそれを示して、あなたのコードは、巨大なセキュリティ上の脆弱性があることが注意してください - それはどの HTTP要求を作成し、取得するために任意のウェブサイトを可能に結果は戻ってくるので、実質的にはsame-origin policyを無効にします。少なくともあなたに話しているウェブサイトには許可されているかどうかを確認する必要があります（たとえば、サーバーに属しているなど）。しかし、それでも、サーバーの応答が変更される可能性がある（つまり、公衆無線LANの攻撃者によって）、サーバーがハッキングされる可能性があるため、機密データへのアクセスを攻撃者に与えてしまう（たとえば、 mail.google.comに送信し、犠牲者がログインした場合は、すべての電子メールデータを読むことができます）。ですから、これをあまり一般的ではなく、一部のウェブサイトへのリクエストのみ許可してください。