Firefox Addon SDK 中内容脚本中的 JQuery UI

Question

我正在使用 Addon Builder 开发一个 Firefox 插件。我在我的插件面板中使用 JQuery UI，并且还想从绑定到面板的内容脚本中使用它。在面板页面中一切正常。在内容脚本中，JQuery 似乎可以工作，但我没有看到 JQuery UI 调用的任何影响，例如下面的滑块。

这是定义面板的 ma​​in.js 的一部分：

var panel = require("panel").Panel({
    width: 350,
    height: 400,
    contentURL: require("self").data.url("panel.html"),
    contentStyleFile: data.url("css/jquery-ui-1.8.22.custom.css"),
    contentScriptFile: [
        data.url("js/jquery-1.8.0.js"),
        data.url("js/jquery-ui-1.8.22.custom.min.js"),
        data.url("panel.js")
        ]
});

这是触发自定义事件的调用：

panel.port.emit("loadingDataEvent", t );

在panel.js中，以下部分尝试使用JQuery 和JQuery UI。 JQuery 调用已成功完成，但是尝试更新滑块对象的 JQuery UI 调用对任何内容都没有任何影响：

self.port.on("loadingDataEvent", function (t) {
    $("#load-counter").html("<br />Not enough data yet. Approx. " + t + " secs. to go...");
    $( "#progressbar" ).progressbar( "option", "value", (60-t)/60*100 );
    document.defaultView.postMessage('{}', '*');
});

在我的 panel.html 中，通过以传统方式包含 JQuery 和 JQueryUI，我可以毫无问题地使用它们：

<link type="text/css" href="css/jquery-ui-1.8.22.custom.css" rel="Stylesheet" />    
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
 ...
<script>
  $(function() {
    $( "#tabs" ).tabs();
    ....
  });
</script>

关于我可能在哪里做错的任何想法？

Answer 1

找到答案的时间比我预期的要短得多。我的错误是在 html 文件中的脚本标记内使用 JQuery，例如声明滑块，因此内容脚本无法访问这些对象。将所有脚本分离到不同的文件并将其添加到内容脚本将使用的脚本文件列表中，即可解决问题：

var panel = require("panel").Panel({
    width: 350,
    height: 400,
    contentURL: require("self").data.url("panel.html"),
    contentStyleFile: data.url("css/jquery-ui-1.8.22.custom.css"),
    contentScriptFile: [
        data.url("js/jquery-1.8.0.js"),
        data.url("js/jquery-ui-1.8.22.custom.min.js"),
        data.url("panelpage.js"), // <------ this is the new file
        data.url("panel.js")
        ]
});

编辑：

写完这段时间后，我也发现了：一旦data.url("panelpage.js")被传入contentScriptFile，就需要从HTML文件中删除对脚本文件的对应引用在脚本标签之间包含它，否则似乎会导致一些冲突。