Question

我正在尝试在我的Firefox侧边栏扩展中完成双向通信请求响应，我有一个名为event.js的文件，它驻留在内容端，我有另一个名为sidebar.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。至少你需要检查与你说话的网站是否允许这样做（例如它属于你的服务器）。但即使这样，它仍然存在安全风险，因为服务器响应可能会被更改（例如，公共WLAN上的攻击者）或者您的服务器可能被黑客攻击 - 并且您将允许攻击者访问敏感数据（例如，他可以触发请求到mail.google.com，如果受害者恰好登录，他将能够阅读所有电子邮件数据）。所以请不要那么通用，只允许对某些网站的请求。

扩展和内容javascript文件之间的双向通信

1 个答案: