从上下文菜单打开 JQuery/Bootstrap 对话框答案

【问题标题】：Open JQuery/Bootstrap dialog from context-menu从上下文菜单打开 JQuery/Bootstrap 对话框
【发布时间】：2012-04-21 17:00:04
【问题描述】：

我有一个 Google Chrome 扩展程序，它通过上下文菜单项单击打开 Twitter Bootstrap 对话框（使用 JQuery 1.7.x，但不是 JQueryUI），我一直在尝试在 Firefox 版本中做同样的事情（使用附加 SDK 1.6)，无济于事。

我可以在我的lib/main.js 中使用context-menu 拦截菜单项单击“确定”，但我无法向包含创建对话框DOM 的函数的内容脚本（请参阅https://stackoverflow.com/a/8493844/954442）发送消息和显示它。我也不能从我的附加脚本创建对话框，因为那里没有 DOM（并且尝试通过 @mozilla.org/moz/jssubscript-loader;1 将 JQuery 加载到该对话框中失败并显示“未定义窗口”）

我已经广泛地寻找示例，但没有找到太多帮助。有没有人有一个context-menu项目点击打开对话框的例子？

（What are the advantages/disadvantages of using the Add-on SDK to develop my Firefox extension? 是我发现的最接近我的问题的东西。我觉得发帖者最终找到了答案，但没有更新问题以说明它是什么。）

（注意。我不准备考虑 XUL，非常不愿意回到 JQueryUI）

【问题讨论】：

让我理解：您想添加一个上下文项，当单击该项时，会在当前页面中显示“DOM 制作”面板/对话框。那是对的吗？请注意，您的附加代码中没有 DOM，但您在附加到页面的内容脚本中有 DOM。
简而言之，是的。我已经在插件脚本中获得了菜单点击，但需要能够调用内容脚本才能将我的对话框插入到内容 DOM 中。

标签： javascript jquery firefox-addon twitter-bootstrap firefox-addon-sdk

【解决方案1】：

好的，所以我相信你想做这样的事情：

https://builder.addons.mozilla.org/addon/1049738/latest/

基本上，您将contentScriptFile 属性添加到上下文菜单的Item。内容脚本不与页面共享 js 变量，但可以访问 DOM。因此，您可以添加面板并在单击上下文菜单项时显示它。

请注意，您可以使用 Array 将多个文件传递给 contentScriptFile，因此您也可以通过这种方式加载 jQuery。

希望对你有帮助。

【讨论】：

其实就是这么简单。关键是将self.on("click", function() { myShowDialogFunc() }) 添加到我的内容脚本中。现在我的上下文菜单的 Item 通过 contentScriptFile 加载了 JQuery、Bootstrap.min.js 和我的内容脚本，我的附加脚本中不需要任何点击或事件处理，这比我想会是这样。
很高兴听到！将来可能会帮助您知道在 IRC（服务器 irc.mozilla.org）中有一个 #jetpack 频道，其中包含 Add-on SDK 和 Builder Mozilla 开发人员；和一个活跃的mailing list。