如何从Firefox扩展/插件向任何页面动态添加div元素

Question

我正在为firefox编写一个扩展，它将用于通过服务在Web上注释页面。我想在页面底部有一个div或overlay元素（可能是基于XUL的），它可以让人们注释页面并保存它。类似于Google朋友群在this page上所做的事情，但是通过插件。

此浮动div / overlay应显示在FF上的每个页面，并应从Web服务呈现内容。我该如何开始构建它？

如果可以通过FF插件访问DOM并更改它，那么我希望能够在文档正文中添加浮动div。但这也不起作用。此处发布的示例：Dynamically adding a floating div to a page

Answer 1

您需要做几件事：

1. 您可能想要添加一些自定义CSS来设置div的样式。您可以使用stylesheet service。

2. 您必须将事件处理程序附加到load事件（或DOMContentLoaded），以便在页面加载完成时收到通知。请查看Intercepting Page Loads和On page load。

3. 您需要对要添加新元素的元素的引用。 Tabbed Browser提供了一些有用的信息。例如。您可以获得对当前所选标签body的{​​{1}}的引用。

关于你的代码示例：你忘了给元素提供CSS属性gBrowser.contentDocument.body或position: absolute;（你的代码中有一个拼写错误，你写了position: fixed;），具体取决于它是否应出现在页面底部或屏幕上。

Answer 2

你可以这样做（因为我有）。要做到这一点，你需要找到你想要更改内容的节点（如果你要添加到页面底部，你可能想要使用＆lt; body＆gt;节点我猜）然后调用其中一个：

 insertBefore(theNewNode, afterThisNode);
 insertAfter(theNewNode, thisNode);

或者可能，但我不确定：

 anExistingNode.innerHTML = anExistingNode.innerHTML + myNewContent;

这应该足以让你开始。