Firefox extension - How to display an html block that overlaps the browser window? - firefox

I'd like to have my firefox extension display a block of html that overlaps the users browser window. I can currently do this by having some JS that inserts html into the DOM of the page, but I'd like the html to be displayed at a higher level within the browser so that the block remains if the user browses to a new page or switches tabs. Is this possible?

You should take a look at the XUL PopupGuide. Popups can be used for elements floating above the user-interface.
I think Panels, a special type of XUL popup, are what you are looking for. The panel itself is XUL and not HTML, but inside the panel you can safely mix both or just use HTML if you want to.
Cheers.

Related

How can I create a persistent extension page?

Is it possible to make the browserAction popup persistent so that it's not reloaded every time? Failing that, is it possible to have any viewable extension page that can be hidden instead of closed?
I have a complex layout involving a large number of elements that I'm currently saving and loading as a string or using importNode to work around the issue but neither option is great.
No, you can not cause an actual browserAction or pageAction popup to persist. However, just like any HTML page in your extension, you can open that HTML page in either a tab or window.
As to hiding an extension page: A tab does not need to be currently viewed. A window displaying the HTML page could be hidden by minimizing the window you desire to hide. Alternately, you could placed the window you desire to hide under another window by bringing the other window into focus. A third option would be to move the to-be-hidden window to coordinates that are off the screen. All of these are accomplished with windows.update().

How to display popup with html in firefox bootstrapped extensions?

I developed a firefox bootstrapped extension (without add-on sdk). I need to display a popup with html content, something like panel in add-on sdk. Also, it is necessary that the extension could interact with content in the popup. Also, I need a way to display html content in separate tab and interact with this content. So what can I use to implement what I need?
You can append an iframe to that panel, and then load a page into that iframe. That's what I did in this simple addon here - https://github.com/Noitidart/AwesomeBar-Power-Tip/
Here's another gist that does something similar - https://gist.github.com/Noitidart/9445992
I think this is how the SDK does it as well.
but I can not understand how it is possible to implement the interaction between expansion and content inside the panel.
The panel or its frameLoader property should have a messageManager, which can be used to load frame scripts and pass messages to them.

Open new xul tab without showing the address (like google chrome)

is it possible to open a xul page (chrome://myext/content/page.xul) with a blank address page?
I want to have a xul page in a new tab to collect some information to my extension, but i wanted to hide the chrome address.
in chrome, some extension pages are shown without an address, like follows:
Evernote Clearly:
Contextinator:
Is it possible on firefox to open the chrome://myext/content/page.xul without showing this address on the address bar?
In firefox, this is usually done by hiding browser chrome.
If you're using addon-sdk, this can be accomplished by including the addon-page like so:
require("sdk/addon-page");
When not using addon-sdk (ie, XUL based extension), then you might need to look into hideChromeForLocation() and inContentWhitelist members of XULBrowser. Hiding browser chrome is explained here and the source code for the members can be found in browser.js: hideChromeForLocation, inContentWhitelist.
Note: XULBrowserWindow itself is a property of window.
var {XULBrowserWindow}=window;
An example of a location with hidden chrome is the Addon Manager (about:addons), which hides the navigation bar when viewing that particular location.

N2CMS: how to add popup conent

I have a news-type website that I am looking to create using N2CMS, but besides the regular operations (being able to see a calendar, viewing lists of news, viewing news details etc.), part of the content in the website is displayed in "modal" popups (similar to the ModalPopupExtender from the AjaxToolkit) inside the page (for example if you click Login, a popup panel appears with the login controls).
My question is: is there a way of adding a handler for a link, and displaying a "modal" popup when the link is clicked? If so, can this be done from the template GUI editor (and how)?
Thank you
N2CMS doesn't have any built-in handlers to create modal pop-ups for links. However, N2CMS does ship with the Jquery JavaScript library. My suggestion would be to use JavaScript in your site template to select and format the desired links with modal dialogs -- but that can't be done from the GUI editor, you'd need to do it in the template code directly.

Manipulate Html from Firefox Extension

I am creating a Firefox extension that is somewhat similar to Firebug. There is a panel (or vbox) at the bottom of the browser that allows users to specify colors to certain Html elements. When they click the OK button, I would like these colors to get updated on the current web page.
I have my JavaScript working when I click the button (i am just throwing an alert), however when I change that JavaScript to change the css or styles of an element (by either using document.getElementById or jquery), nothing changes.
Is there something with Firefox extensions that I am missing? Any help is appreciated.
Let me know if you have any questions. Thanks
https://developer.mozilla.org/en/Extension_Frequently_Asked_Questions#Accessing_the_document_of_a_webpage_doesn%27t_work
You want content.document.getElementById() and similarly for every other construct you use.

Resources