Q:

The event dispatched from a html page is not received by main.js in my firefox extension

In my firefox extension I need user input to do further computations on my extension.
I used a panel to do this. With panels I can get input form user and pass it to my content script and emit this from there using self.port.emit and receive it on main.js using panel.port.on. But my problem is panels auto hide. I want to show my panel until user closes it.
I tried getting the above scenario by opening a html page using window window.open. But I could not pass the user input from my html window to main.js. I used the following code.
MY SR.html code
<!DOCTYPE HTML>
<html>
<head>
    <title>Title</title>
    <script>
    var t= {
    CallExtension : function(e) {
        var text = document.getElementById("p").value;
        var element = document.createElement("MyExtDE");
        element.setAttribute("phNu", text);
        document.documentElement.appendChild(element);
        var evt = document.createEvent("Events");
        evt.initEvent("SREvent", true, false);
        element.dispatchEvent(evt);
     }
     }
</script>
    <style>
        table{ padding-top:30px;}
        h1{ color:orange; }
        td{ font-family:"Arial"; font-size:12px; }
    </style>
</head>
<body>
    <table cellspacing=5 cellpadding=5 align="center" border=0>
        <tr> 
            <td colspan=3><h1>MyRMN Start Registration</h1></td>
        </tr>
        <tr>
            <td>Phone Number</td><td>:</td><td><input type="text" id="p" name="pn"/>
            </td>
        </tr>
        <tr>
    <td><input type="button" id="btnSSubmit" value="Submit"        
             onclick="t.CallExtension(event);" /></td>
         </tr>
    </table>
</body>

My main.js code
function SR(){
   try {
      win = window.open(data.url("SR.html"), "SR",  
      "chrome,centerscreen");
      win.document.defaultView.addEventListener("SREvent", S1Submit, false, true);
      //window.window.document.defaultView.addEventListener("SREvent", S1Submit, false, 
      true); 
    } catch(e) {
    prompts.alert(null, "main() SR", " Exception: " + e);
  }

}

function S1Submit(evt){
    var text = evt.target.getAttribute("phNu");
    prompts.alert(null, "main() S1Submit", text);
    if (text) {
      mSR(text);
    }
}

UPDATE

I introduced page-mod in my main.js page and i could not still communicate with my main.js
from my webpage.
main.js
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");

function StartRegistration(){
    try {
    winSReg = window.open(null, data.url("SR.html"), "Title", 
        "chrome,centerscreen", null);
    } catch(e) {
        prompts.alert(null, "Title", "SR Exception: " + e);
    }
}

pageMod.PageMod({
    include: data.url("SR.html"),
    contentScriptFile: data.url("SR.js"),
    onAttach: function(worker) {
       worker.port.on("gotInput", function(inputValue) {
       doSomethingWith(inputValue);
    });
  }
});

SR.JS
function SubmitSReg(){
    try {
        var text = document.getElementById("p").value;
        alert("SR.js text:" + text);
        self.port.emit("gotInput", text); 
    } catch(e) {
        alert(e);
    }
}

SR.Html
<!DOCTYPE HTML>
<html>
    <head>
        <title>SR</title>
    <script type="text/javascript" src="SR.js"></script>
    <style>
    table{ padding-top:30px;}
    h1{ color:orange; }
    td{ font-family:"Arial"; font-size:12px; }
    </style>
    </head>
    <body>
        <table cellspacing=5 cellpadding=5 align="center" border=0>
            <tr> 
                <td colspan=3><h1>Title</h1></td>
            </tr>
            <tr>
                <td>Phone Number</td><td>:</td><td><input type="text" id="p" 
                name="pn" /></td>
            </tr>
            <tr>
        <td><input type="button" id="btnSSubmit" value="Submit" onclick = 
                "SubmitSReg()"/></td>
            </tr>
        </table>
    </body>
</html>

Any kind of help is greatly appreciated.
Thanks in advance

A:

Your approach is right but there's a missing part: in order to allow communication between the main.js and your static page you need to use a page-mod matching your static page local url. 
Add this to your main.js:
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");

pageMod.PageMod({
    include: data.url("SR.html"),
    contentScriptFile: [data.url("script.js")],
    onAttach: function(worker) {
      worker.port.on("gotInput", function(inputValue) {
        doSomethingWith(inputValue);
      });
    }
});

And also create a data/script.js file containing:
/* Here add a listener to the form's submit event and then
get the input element and its value.
Then do this with yhe input value:
*/
self.port.emit('gotInput', inputValue);

This way you achieve communication between your page and the addon main.js.

