50052

two way communication between extension and content javascript files

i am trying to accomplish a two way communication request response in my firefox sidebar extension, i have a file named event.js this resides on the content side, i have another file called sidebar.js file which is residing in the xul. I am able to communicate from event.js to sidebar.js file using the dispatchEvent method. my event in turn raises a XMLHttpRequest in sidebar.js file which hits the server and sends back the response. Now, here i am unable to pass the response to the event.js file. I want the response to be accessed in the event.js file. Till now i have achieved only one way communication. Please help me in getting the two way communication.

Code is as follows:

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

Answer1:

Why are you moving your fetchData element into the sidebar document? You should leave it where it is, otherwise your content code won't be able to receive the event. Also, use the content document to create the event. Finally, document.createEvent() parameter for custom events should be "Events". So the code after your //here i am again trying comment should look like:

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

Please note however that your code as you show it here is a huge security vulnerability - it allows any website to make any HTTP requests and get the result back, so it essentially disables same-origin policy. At the very least you need to check that the website talking to you is allowed to do it (e.g. it belongs to your server). But even then it stays a security risk because server response could be altered (e.g. by an attacker on a public WLAN) or your server could be hacked - and you would be giving an attacker access to sensitive data (for example he could trigger a request to mail.google.com and if the victim happens to be logged in he will be able to read all email data). So please make this less generic, only allow requests to some websites.

Recommend

  • Java LambdaMetaFactory Method call with multiple vargs to avoid Reflection
  • Using regex in flask restful api route url
  • FileReader readAsArrayBuffer in IE11 not working for large files
  • calling args from out side the main method
  • Java: Perform Action Every X Seconds
  • Decode amf3 object using PHP
  • Java: Perform Action Every X Seconds
  • Node JS - Stream data from Busboy to AWS S3
  • HTTP interceptor getting status 0 on failed request using Angular 4
  • Javascript FileReader reads file incorrectly
  • Autowiring not working in springboot application
  • React Native onLayout nativeEvent.layout.y always returns 0
  • two way communication between extension and content javascript files
  • SQL query - comparing two items on distinct item
  • How to change the origin of the canvas to the center?
  • How to remove attributes using PHP DOMDocument?
  • 2 Questions / 1. Fullscreen(jQuery) / 2. Background change and save as Cookies
  • How can I drag an icon inside google maps?
  • Getting access to already created Chart.js chart
  • Getting list of edges in cytoscape.js when clicking on a node
  • How do i read EXIF data from an image without the use of external scripts in python?
  • Add click event on window, but ignore all links that start with https
  • Parse AJAX resposne in HTML using Javascript
  • Open a file from the same package
  • Gaining access to the SVG DOM in Chrome and Safari through Javascript
  • Java refreshing second form
  • XMLDocument.Importnode fails
  • SVG Error: Permission denied to access property 'someFunction'
  • After converting my FBX file to a .gltf, the model is incredibly small, why?
  • Can a variable be stored within an image or div tag?
  • Why does the following throw an “Object doesn't support property or method 'importNode
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Row Count Is Returning the incorrect number using RaptureXML
  • WinForms: two way TextBox problem
  • File upload with ng-file-upload throwing error
  • AngularJs get employee from factory
  • Free memory of cv::Mat loaded using FileStorage API
  • Memory offsets in inline assembly
  • Turn off referential integrity in Derby? is it possible?
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize