如何将面板锚定到DOM元素？

Question

我有一个附加组件，它绑定到onKeyPress上所有文本控件的onKeyPress事件。 在输入一些文本时，我将从内容脚本向附加脚本发送消息，该脚本将显示包含一些数据的面板。 这很好用，但面板没有正确定位。 我想将面板定位到文本控件。

Panel的show()函数将DOM元素放在应该锚定的位置。 但我不确定将DOM元素从内容脚本传递给附加过程。 看起来我只能传递JSON可序列化值。

解决这个问题的任何帮助都会很棒。

Answer 1

将DOM节点从内容脚本传递到扩展脚本是不可能的。 这是设计 - 扩展脚本不应该直接处理DOM，它们甚至可能在一个单独的进程中运行（这是附加SDK的原始规划的一部分）。

目前，在扩展脚本中获取DOM节点的唯一方法是使用低级API直接访问DOM而不是通过内容脚本。 例如，您可以在活动的浏览器窗口中打开页面：

var windowUtils = require("window-utils");
var browser = windowUtils.activeBrowserWindow;
var wnd = browser.content;
var element = wnd.document.getElementById("foobar");

但是，这些低级API不能保证稳定，并且window-utils模块甚至没有完整记录（例如， 文档中未列出activeBrowserWindow属性）。 使用它们需要您自担风险，并准备好在SDK的未来版本中停止工作。 将HTML元素注入到仅仅看起来像面板的文档中（如canuckistani所建议的）可能确实是更好的选择。

Answer 2

而不是使用mainPanel.show() ，使用view.panel = mainPanel; ：

myWidget = require('widget').Widget({
      id: "text-entry",
      label: "StrikeBase",
      contentURL: data.url("icon.png"),
//    panel: mainPanel,
      // Instead using this
      onClick: function(view) { 
//        mainPanel.show();
         // Instead using this              
          view.panel = mainPanel;
      }
    });