Search code examples
javascriptfirefoxfirefox-addonfirefox-addon-sdk

Cannot send message to panel in firefox addon? (The page is currently hidden and can no longer be used until it is visible again)


My goal is quite simple: I want a panel where the user can specify username and password and click login. Then I want to do a webrequest to verify the credentials, and show the response to the user.

I figured out that I have to do the request in main.js and pass it back. So When the form is submitted I build my url, fire a message to main.js where I execute the request. That works fine, the response is also right. However when I want to send the response back to the panel, I get this error:

Error: The page is currently hidden and can no longer be used until it is visible again.
resource://jid1-aaautmtqen7pta-at-jetpack/addon-sdk/lib/sdk/content/worker.js 404
Traceback (most recent call last):
  File "resource://jid1-aaautmtqen7pta-at-jetpack/addon-sdk/lib/sdk/net/xhr.js", line 126, in 
    self._orsc.apply(self, arguments);
  File "resource://jid1-aaautmtqen7pta-at-jetpack/addon-sdk/lib/sdk/request.js", line 91, in onreadystatechange
    emit(target, 'complete', response);
  File "resource://jid1-aaautmtqen7pta-at-jetpack/addon-sdk/lib/sdk/event/core.js", line 83, in emit
    for each (let item in emit.lazy.apply(emit.lazy, arguments)) {
  File "resource://jid1-aaautmtqen7pta-at-jetpack/addon-sdk/lib/sdk/event/core.js", line 101, in lazy
    yield listeners.shift().apply(target, args);
  File "resource://jid1-aaautmtqen7pta-at-jetpack/domain/lib/main.js", line 21, in hosters<.onComplete
    popup.port.emit("handleloginresponse",response);
  File "resource://jid1-aaautmtqen7pta-at-jetpack/addon-sdk/lib/sdk/content/worker.js", line 369, in 
    emit: function () self._emitEventToContent(Array.slice(arguments))
  File "resource://jid1-aaautmtqen7pta-at-jetpack/addon-sdk/lib/sdk/content/worker.js", line 404, in _emitEventToContent
    throw new Error(ERR_FROZEN);

I also tried opening the panel again or using postMessage() instead. Nothing seems to work, I cannot transport back the content into my panel! Any help is appriciated!

This is my main.js

var data = require("self").data;

var popup = require("panel").Panel({
  width: 212,
  height: 200,
  contentURL: data.url("popup.html"),
  contentScriptFile: [data.url("jquery.js"),data.url("popup.js")]
});

var Request = require("request").Request;

popup.port.on("handlelogin", function (url) {
    console.log("requesting " + url);
    var hosters = Request({
        url: url,
        onComplete: function (response) {       
            console.log(response.status);
            console.log("emmiting handleloginresponse");
            popup.port.emit("handleloginresponse",response);
        }
    }).get();
}); 

require("widget").Widget({
  label: "my label",
  id: "pop-up",
    contentURL: data.url("16.png"),
  panel: popup
});

popup.html

<html>

<head>

</head>

<body>
    <form id="loginform">
        <input name="user" placeholder="User" id="userfield" />
        <input type="password" name="pass" placeholder="Password" id="passfield"/>
        <input type="submit" id="loginbutton" value="Log in " />
    </form>
</body>

</html>

popup.js

$('#loginform').submit(function (event) {
    var url = 'https://mydomain.com?user=' + encodeURIComponent($('#loginform')[0].user.value) + '&pass=' + encodeURIComponent($('#loginform')[0].pass.value) + '&something=something;
    self.port.emit("handlelogin",url);

});

self.on("handleloginresponse", function(data) {
    console.log("got a handleloginresponse!");
    console.log(data);
});

Solution

  • the problem resolved itself as non existend and was caused due to a server side http error