Hello,
Several users of my addon asks me how to hide or at least make shorter the text in the addressbar. My addon is called Group Speed Dial so the text in there is quite long and on smaller screens can take like 1/4 of whole bar.
Is there a way to change that? Nasty solutions using hacks of user css files in a profile folders are very welcomed (I know this is a security measure, that’s why self-hacking is good enough)
No, you can not hide that, as it’s there to show the user that this is in fact a page from an extension they are viewing, like you can’t hide the secure lock for web content.
Users can apply custom style rules to modify Firefox’s toolbar area by creating a userChrome.css file. This takes about 10 minutes so when you have time to take it slowly and carefully:
(1) Set up your chrome folder and userChrome.css file following the five six steps in this article:
https://www.userchrome.org/how-create-userchrome-css.html
I have a boring video there if you like demonstrations.
(2) This is the code to paste into the file. You can edit the file using Notepad or a better editor. Make sure to keep it in a plain text format with a .css file extension (not .css.txt).
See improved rule down in: Make addressbar text "Extension (Name Of The Extension)" shorter or hide - #11 by NilkasG
/*
Hide Extension Name in the identity area unless
hovered for half a second (updated for Fx80)
*/
#identity-box.extensionPage #identity-icon-labels,
#identity-box.extensionPage #identity-icon-label {
visibility: collapse !important;
transition: visibility 250ms ease-in-out;
}
#identity-box.extensionPage:hover #identity-icon-labels,
#identity-box.extensionPage:hover #identity-icon-label {
visibility: visible !important;
transition: visibility 250ms ease-in-out 500ms;
}
(3) Firefox should read the file at its next startup and apply it to every extension page you load.
Here’s a “before and after” comparison screenshot.
Success?
Maybe hide the extension name and show it via hover, leaving “Extension”, which would be a lot shorter than “Extension (This is a super long extension name)”?
Thank you! This is exactly what I was looking for! And it works 
How do you even know this? Is there some html file of Firefox layout where you just check the element you wan to change?
Pretty much. You can open chrome://browser/content/browser.xul in a tab and inspect it like any page. It isn’t properly interactive, though, so you may also want to inspect the main UI with the Browser Toolbox (Ctrl + Shift + Alt + I).
I second the use of the Browser Toolbox when you need to discover selectors for elements in the UI and to understand how their appearance is determined (it’s sometimes tricky to suss out): Browser Toolbox — Firefox Source Docs documentation
I hoped that leaving the “puzzle piece” icon was enough of a visual cue that the user was not on a normal web page.
As far as I know, CSS doesn’t offer a way to slice and dice text within elements to hide only part of the text. However, you could change the rule so that instead of completely hiding the label, it reduces its width to only wide enough for the first part of the text to fit. I haven’t tried to do that because… busy.
I have same problem with “moz-extension://URI”. Can we shorter it to extension://URI??? The prefix moz- is not any meaning in this case
Custom style rules cannot edit the URL in the address bar.
What would be the value of seeing more of the extension page address in the address bar?
The local ID after moz-extension:// is meaningless unless the user calls up the about:debugging page to link it with a particular extension.
The address within the extension probably is only of interest to the developer.
Seems the whole address is not very useful other than for troubleshooting. But perhaps that’s okay since Firefox displays the extension name in the identity area.
As long as they don’t hide it.
Doh!
By the way, only numeric properties can be animated/transitioned from one value to another:
#identity-box.extensionPage #identity-icon-labels {
max-width: 0px !important;
transition: max-width 250ms ease-in-out 500ms;
}
#identity-box.extensionPage:hover #identity-icon-labels {
max-width: 300px !important;
transition: max-width 250ms ease-in-out;
}
Some other properties flip at 50%, but that’s not really what one would want here.
For anyone still looking for this option to work in newer versions of Firefox (v80.0.1 and above), the code needs to be modified slightly.
“#identity-icon-labels” is no longer plural, so the trailing “s” is removed. Also, the second line containing “visibility:collapse” is crucial in making sure that when the extension ID box is minimized, the space is reclaimed by the URL bar.
#identity-box.extensionPage #identity-icon-label {
visibility: collapse !important;
transition: visibility 250ms ease-in-out;
}
#identity-box.extensionPage:hover #identity-icon-label {
visibility: visible !important;
transition: visibility 250ms ease-in-out 500ms;
}
Thanks, I added the new selector to the earlier code, too.
Is the userChrome.css code still working in Firefox 95 or 96? I tried all of the codes in this thread including statitech’s from sept of 2020, but I can not get it to remove or shorten extension text in the address bar. My userChrome.css file codes work correctly for other unrelated issues, but no luck here.
Firefox 96.0
macOS 10.15.7
It works for me, just make sure you have toolkit.legacyUserProfileCustomizations.stylesheets enabled in the about:config page and that you use the updated CSS. It must work…
OK, thanks. I got it working, I just had to keep the new userChrome.css separate from a userContent.css file in my chrome folder.