Как динамически добавить элемент div на любую страницу из расширения Firefox / Addon

Question

Я пишу расширение для Firefox, которое будет использоваться для комментирования страниц в Интернете с помощью службы. Я хотел бы иметь элемент div или overlay (возможно, на основе XUL) внизу страницы, который позволит людям аннотировать страницу и сохранять ее. Что-то вроде того, что делает Google Friend Connect на этой странице , но через аддон.

Этот плавающий div / overlay должен отображаться для каждой страницы в FF и отображать содержимое из веб-службы. Как мне начать строить это?

Если есть возможность получить доступ к DOM через плагин FF и изменить его, тогда я хотел бы иметь возможность добавить плавающий div в тело документа. Но это тоже не работает. Пример размещен здесь: Динамическое добавление плавающего div на страницу

Answer 1

Есть несколько вещей, которые вы должны сделать:

1. Возможно, вы захотите добавить собственный CSS для стилизации div. Вы можете использовать сервис таблиц стилей .

2. Вы должны прикрепить обработчик события к событию load (или DOMContentLoaded), чтобы получать уведомления о завершении загрузки страницы. Взгляните на Перехват загружаемых страниц и При загрузке страницы .

3. Вам нужна ссылка на элемент, к которому вы хотите добавить новый элемент. Браузер с вкладками предоставляет полезную информацию. Например. Вы можете получить ссылку на body текущей выбранной вкладки gBrowser.contentDocument.body.

Относительно вашего примера кода: вы забыли дать элементу свойство CSS position: absolute; или position: fixed; (в вашем коде есть опечатка, вы написали postion), в зависимости от того, должно ли оно отображаться в нижней части страница или экран.

Answer 2

Вы можете сделать это (потому что у меня есть). Чтобы сделать это, вам нужно найти узел, для которого вы хотите изменить содержимое (если вы добавляете в конец страницы, вы можете использовать узел , я думаю), а затем вызвать один из:

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

Или возможно, но я не уверен:

 anExistingNode.innerHTML = anExistingNode.innerHTML + myNewContent;

Этого должно быть достаточно, чтобы начать.