Welcome to the Power Users community on Codidact!
Power Users is a Q&A site for questions about the usage of computer software and hardware. We are still a small site and would like to grow, so please consider joining our community. We are looking forward to your questions and answers; they are the building blocks of a repository of knowledge we are building together.
Remove extension icon from Firefox url bar
I'm using the firefox extension metrication. I only ever use it via its entry in the context menu, therefore I would like to remove its icon from the url bar to gain more space:
I tried the suggestion from https://www.reddit.com/r/FirefoxCSS/comments/zcapzr/add_css_to_remove_addon_icon_from_the_address_bar/
I looked up the id of the extension in about:debugging#/runtime/this-firefox
and added
#pageAction-urlbar-_670400a3-bbd4-4846-88c9-929844eee39a_{
display: none !important;
}
to my userChrome.css. Unfortunately, the icon is still there after restarting the browser.
I also tried
#pageAction-urlbar-_metrication@deltamikecharlie_{
display: none !important;
}
just to cover all bases, but this did not remove the icon either.
I suspect the name of the element I am trying to change is not correct. How to get the correct name? For "normal" elements on a webpage, I would use the element picker to look up the name, but how to do this with UI elements?
I'm using
- Firefox 102 ESR
- macOS 13.4
1 answer
TL;DR
Turns out the correct name is
#pageAction-urlbar-metrication_deltamikecharlie {
display: none !important;
}
Long version:
How to find the name?
There is actually a nice guide at https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html
To summarise:
-
open the web developer tools, click on the
...at the top right and open the settings -
under "Advanced settings", activate "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging"
-
Use
Cmd+Opt+Shift+Ito open the browser toolbox -
choose the element picker and select the UI element you are interested in and you'll be show the corresponding position in the html code to look up the name.
-
Undo step 2 if you are finished
0 comment threads
0 comment threads