I use JavaScript bookmarklets in Mozilla Firefox to open my email, calendar, chat, etc. in pop-up child windows without a toolbar or menu bar. I do this in order to save screen real-estate, and to prevent me from using those windows for browsing and keep them visible all the time. I’ve been wondering how to have pop-up windows without the address bar....
Mozilla has a legitimate reason for ensuring the address bar is always visible - so that users can’t be misled by popups - thus, the address bar cannot be hidden by code. But, there is a way to work around this, proceed with caution, as it is a global change.
Problem
I’ve shared a few of my bookmarklets before, one of which is to open a browser window of a specific size using window.open()
. The parameter toolbar=0
will open a child window without a toolbar, e.g.
javascript:(()=>{window.open("https://www.google.com/","_g","width=800,height=400,toolbar=0")?.focus()})()
Firefox will open the window that looks like this - and as you can see the address bar is still visible though not editable:
Workaround
The workaround to hide the address bar involves creating a userChrome.css
style to override Firefox’s default behaviour, so that the address bar is hidden when the toolbar is hidden.
I found the solution on this Mozilla Support Forum, to which Jefferson Scher, jscher2000, provided the answer. Mr. Scher has a web site that goes into a lot more detail about customizing Firefox styling with userChrome to reduce whitespace, to hide unwanted menu items, and more!
Here is what I did for Firefox Developer Edition on macOS:
- First, to find out the current user profile folder:
- in the Firefox address bar, navigate to
about:support
, - hit the Show in Finder button to open the profile folder, which on macOS looks like
/Users/[user]/Library/Application Support/Firefox/Profiles/[some_random_string].dev-edition-default
.
- in the Firefox address bar, navigate to
- Next, in the profile folder (not in parent
Profiles
folder please), create a folder calledchrome
. - And, in the
chrome
folder, create a file calleduserChrome.css
which contains:
#main-window[chromehidden*="toolbar"] #nav-bar {
visibility:collapse;
}
- Then, to setup Firefox to use this configuration, navigate to
about:config
. - Note that editing the Firefox settings is not recommended - click Accept the Risk and Continue if you understand the risks and wish to proceed!
- Find the
toolkit.legacyUserProfileCustomizations.stylesheets
setting (search for foruserprofile
)... - And click the button (with the two arrows) to toggle
false
totrue
.
- Close the tab, and then close Firefox completely.
- Finally, re-start Firefox and re-try the bookmarklet, and this time you will get pop-up windows without the address bar:
Aside: You may also be interested to in a bookmarklet to make a Firefox window full-screen when using macOS split view mode, to hide the address bar, toolbar and tabs.