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

Question

我有一个附加组件，它绑定到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;
      }
    });