我的firefox扩展中的main.js没有收到从html页面调度的事件

时间:2014-01-29 07:05:05

标签: firefox firefox-addon firefox-addon-sdk

在我的firefox扩展中,我需要用户输入来对我的扩展进行进一步的计算。 我用了一个面板来做这个。使用面板我可以从用户那里获得输入并将其传递给我的内容脚本并使用 self.port.emit 从那里发出并在 main.js 上接收它使用 panel.port.on 。但我的问题是面板自动隐藏。我希望在用户关闭它之前显示我的面板。

我尝试通过使用窗口 window.open 打开html页面来获得上述方案。但我无法将用户输入从我的html窗口传递到 main.js 。我使用了以下代码。

我的 SR.html 代码

<!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>

我的 main.js 代码

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

更新


我在main.js页面中介绍了page-mod,但仍然无法与我的main.js进行通信 来自我的网页。

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>

非常感谢任何形式的帮助。

提前致谢

1 个答案:

答案 0 :(得分:0)

您的方法是正确的,但缺少部分:为了允许main.js和静态页面之间的通信,您需要使用与您的静态页面本地URL匹配的page-mod

将此添加到您的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);
      });
    }
});

并创建一个包含以下内容的data / script.js文件:

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

通过这种方式,您可以实现页面与插件main.js之间的通信。