Firefox extension : how to use the entire screen space for display?

Question

I am relatively new to Firefox extensions development.

I want to implement an add-on on the lines of "clearly". (https://addons.mozilla.org/en-US/firefox/addon/clearly/)

How does one get the addon to have an overlay on top of the displayed webpage? i.e. on button click, the addon should display some custom text on a layer above the currently open web-page.

Also, Is it possible to set the display of this overlay with HTML?

What are the available options to achieve this?

Help greatly appreciated.

Answer 1

create a panel and insert to chrom document. then open it with this code: https://developer.mozilla.org/en-US/docs/XUL/Method/openPopup

set anchor to gBrowser.selectedTab.linkedBrowser

set panel width and height to same as the linked browser so: panel.height = gBrowser.selectedTab.linkedBrowser.getBoundingClientRect().height do same for width

https://developer.mozilla.org/en-US/docs/XUL/panel

if u need more help let me know ill write the code, its real simple

Answer 2

Technically you wouldn't even need to make it a Firefox extension, see https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode