Geek Answers Handbook

How to create a browser extension to display a banner in the form of an HTML form in Firefox and Google Chrome?

I would like to create a browser extension that displays a permanent banner as a browser in Google Chrome or Firefox. This banner should push the site down so as not to block any content on the website.

I would like to put an HTML form in an infobar banner with some radio buttons, text boxes, drop-down lists and a button to submit HTML form data. I would like to make the infobar banner permanent on web pages, that is, the user can view other web pages, but the infobar banner will remain at the top of the browser window.

When the user clicks the button and submits the HTML form, the infobar should bounce up and then bounce down to show a new infobar with a new HTML form.

Does anyone know if this banner can be created in Google Chrome or Firefox?

I was looking for a browser API, but so far I have found the Google Chrome Infobar feature . It seems that it can only display one line of notification.

+4
source share
3 answers

  • Google Chrome you need to enter a script in the current document - you cannot put it in chrome. Learn more about content scripting for Google Chrome here .

  • Firefox you can, but you will have to write it in XUL (similar to XHTML); see a tutorial like this .

If you want something that works on both, follow the outline of the script, as it can easily be ported to FireFox as usercript .

+1
source

As for Google Chrome, it seems that since 2014, there is currently a chrome.infobars API available in Chrome.

See details

+3
source

You can use the following in 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);
+1
source

More articles:


All Articles