如何從Firefox擴展/插件動態添加div元素到任何頁面

我正在爲Firefox編寫一個擴展，它將用於通過服務在Web上註釋頁面。我想在頁面的底部有一個div或overlay元素（可能是基於XUL的），這會讓人們註釋一個頁面並保存它。就像Google朋友連接在this page上做的一樣，但是通過插件。如何從Firefox擴展/插件動態添加div元素到任何頁面

這個浮動div/overlay應該顯示在FF上的每個頁面上，並且應該呈現來自web服務的內容。我如何開始建設呢？

如果可以通過FF插件訪問DOM並修改它，那麼我希望能夠將浮動div添加到文檔正文。但那也行不通。示例發佈在這裏：Dynamically adding a floating div to a page

來源

2011-03-27 Ritesh M Nayak

您可以添加浮動div與螢火蟲。但是對於你所需要的，我想你會想要一個可以通過編程實現這個功能的API。我不知道螢火蟲是否支持。 – 2011-03-27 08:40:06

有你所要做的幾件事情：

你可能想添加一些自定義CSS樣式的DIV。您可以使用stylesheet service。
您必須將事件處理程序附加到load事件（或DOMContentLoaded），以在頁面加載完成時收到通知。看看Intercepting Page Loads和On page load。
您需要引用您希望新元素附加到的元素。 Tabbed Browser提供了一些有用的信息。例如。您可以獲得對當前選定標籤gBrowser.contentDocument.body的body的引用。

關於你的代碼示例：你忘了給該元素的CSS屬性position: absolute;或position: fixed;（你必須在你的代碼中的錯字，你寫postion），這取決於它是否應該出現在頁面的底部或屏幕。

來源

2011-03-27 08:51:10

該死！想象一下在關於SO的問題後意識到錯字。但是，感謝所有其他建議。 – 2011-03-29 07:00:45

@Felix Kling你能回答這個問題嗎？ http://stackoverflow.com/questions/1983654/firefox-extension-how-to-catch-onload-event – Volatil3 2013-08-06 09:35:35

你可以這樣做（因爲我有）。要做到這一點，您需要找到要更改內容的節點（如果您要添加到頁面底部，則可能需要使用我猜測的<主體>節點），然後調用以下其中一個節點：

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

還是可能的，但我不知道：

anExistingNode.innerHTML = anExistingNode.innerHTML + myNewContent;

這應該足以讓你開始。

來源

2011-03-27 08:40:59

如何從Firefox擴展/插件動態添加div元素到任何頁面

回答

相關問題