Как создать расширение браузера для отображения баннера HTML-формы, похожего на информационную панель, в Firefox и Google Chrome?

Я хотел бы создать расширение для браузера, которое будет отображать постоянный баннер, похожий на информационную панель, в веб-браузере Google Chrome или Firefox. Этот баннер должен толкать веб-сайт вниз, чтобы не блокировать какой-либо контент на веб-сайте.

Я хотел бы поместить форму HTML в баннер информационной панели с некоторыми переключателями, текстовыми полями, раскрывающимися списками и кнопкой для отправки данных формы HTML. Я хотел бы сделать баннер информационной панели постоянным на веб-страницах, т.е. пользователь может просматривать другие веб-страницы, но баннер информационной панели останется в верхней части окна браузера.

Когда пользователь нажимает кнопку и отправляет HTML-форму, информационная панель должна подпрыгивать вверх, а затем опускаться вниз, чтобы отобразить новую информационную панель с новой HTML-формой.

Кто-нибудь знает, можно ли создать такой информационный баннер в браузере Google Chrome или Firefox?

Я искал API браузера, но пока нашел только функцию Информационная панель Google Chrome. . Кажется, что он может отображать только 1 строку уведомлений.


javascript forms google-chrome-extension banner firefox-addon
person userpal    schedule 24.02.2013    source источник
comment
Вы хотите это в хроме или в документе?   -  person Paul S.    schedule 24.02.2013
comment
В хроме значит часть серого окна браузера? На самом деле его можно поместить как часть окна браузера или HTML-документа. Я просто хочу иметь баннер информационной панели, который можно использовать для отправки HTML-формы, и он не должен влиять на веб-сайт под баннером информационной панели. Спасибо.   -  person userpal    schedule 24.02.2013
comment
да. Для Google Chrome вам нужно будет внедрить скрипт в текущий документ — вы не можете поместить его в хром. Для Firefox вы можете, но вам придется написать его в XUL (аналогично XHTML); см. подобное руководство: borngeek.com/firefox/toolbar-tutorial   -  person Paul S.    schedule 24.02.2013
comment
Привет, Пол, пожалуйста, поместите свой ответ в раздел «Ответ», чтобы я мог выбрать его как лучший ответ. Спасибо.   -  person userpal    schedule 25.02.2013

Ответы (3)


arrow_upward
1
arrow_downward

  • Гугл Хром; вам нужно будет внедрить script в текущий документ - вы не можете поместить его в хром. Подробнее о сценариях контента для Google Chrome читайте здесь.

  • Fire Fox; вы можете, но вам придется написать это в XUL (аналогично XHTML) ; см. учебник, подобный этот.

Если вы хотите что-то, что работает на обоих, идите по маршруту сценария контента, поскольку его можно легко перенести на FireFox как < strong>пользовательский скрипт.

person Paul S.    schedule 25.02.2013

arrow_upward
3
arrow_downward

Что касается Google Chrome, похоже, что с 2014 года наконец-то появился chrome.infobars API доступен в Chrome.

Подробнее см.

person cnst    schedule 02.02.2014
comment
Обратите внимание, что по состоянию на 21 июня 2014 г. он работает только в ветке Dev. - person Derek 朕會功夫; 21.06.2014
comment
@Derek朕會功夫, да, согласно вопросу о графике выпуска, как указано выше, в настоящее время он постоянно привязан только к каналу Dev. - person cnst; 21.06.2014

arrow_upward
1
arrow_downward

Вы можете использовать следующее в content.js

var newSpan = document.createElement("newSpan");
newSpan.id = "newSpan";
newSpan.style.fontSize = "25px";
newSpan.style.fontWeight = "bold";
newSpan.textContent = "******Banner******"
newSpan.style.color = "red";
var elemDiv = document.createElement('div');
elemDiv.style.cssText = 'width:100%;height:10%;background:rgb(255,255,255);text-align: center;';
elemDiv.appendChild(newSpan);

window.document.body.insertBefore(elemDiv, window.document.body.firstChild);
person easycheese    schedule 11.05.2016