如何将面板锚定到DOM元素？ [英] How to anchor a panel to a DOM element?

问题描述

我有一个插件，它绑定了页面上所有文本控件的 onKeyPress 事件。当输入一些文本时，我正在向内容脚本发送一条消息给附加脚本，该脚本将显示一个包含一些数据的面板。这工作得很好，但面板没有正确定位。我想将面板定位到文本控件。
$ b

面板的 show（）函数使用DOM元素来定位它。但我不确定是否将DOM元素从内容脚本传递到附加过程。它看起来像我只能通过JSON序列化的值。

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

解决方案

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

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

var windowUtils =要求（ 窗口-utils的）;
var browser = windowUtils.activeBrowserWindow;
var wnd = browser.content;
var element = wnd.document.getElementById（foobar）;


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

I have an add-on which binds to the onKeyPress event of all the text controls on the page. When typing some text, I am sending a message to add-on script from the content script, which will show a panel with some data. This works well, but the panel is not properly positioned. I would like to position the panel anchored to the text control.

Panel's show() function takes DOM element where it should anchor. But I am not sure about passing the DOM element from content script to add-on process. It looks like I can pass only JSON serializable values.

Any help to address this issue will be great.

解决方案

Passing a DOM node from content scripts to extension scripts is impossible. This is by design - extension scripts should never deal with the DOM directly, they might even run in a separate process (something that was part of the original planning for the Add-on SDK).

Currently, the only way to get a DOM node in extension scripts is to use low-level APIs to access the DOM directly rather than via content scripts. For example, you can get to the page open in the active browser window:

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

However, these low-level APIs aren't guaranteed to be stable and the window-utils module isn't even fully documented (e.g. activeBrowserWindow property isn't listed in the documentation). Use them at your own risk and be prepared that they might stop working in a future version of the SDK. Injecting an HTML element into the document that merely looks like a panel (as suggested by canuckistani) might indeed be a better choice.

这篇关于如何将面板锚定到DOM元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！