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.

Review Suggested Edit

You can't approve or reject suggested edits because you haven't yet earned the Edit Posts ability.

The default icon of the [Tunnelbear Firefox extension](https://addons.mozilla.org/en-GB/firefox/addon/tunnelbear-vpn-firefox) looks like this:
~~![Icon of the Tunnelbear extension depicting an empty tunnel opening, overlaid by a large badge with the word "Off"](https://powerusers.codidact.com/uploads/zdft1zsy1572o0j1b2xwewqymnha)~~
~~I would like to hide the "Off" badge so that it looks like this:~~
~~![Icon of the Tunnelbear extension depicting just an empty tunnel opening, the large badge with the word "Off" is missing](https://powerusers.codidact.com/uploads/65m9peb5jj3uq6bwkdukw1j9evrm)~~
~~Following a similar process as in the answer https://powerusers.codidact.com/posts/288206/288207#answer-288207 I put together the following code~~
```css
.webextension-browser-action[data-extensionid="browser@tunnelbear.com"] .toolbarbutton-badge {
display: none;
}
```
If I try this in the style editor of the browser toolbox, it successfully removes the badge.
To make this change permanent, I tried to add the code to my `userChrome.css` file, however after restarting firefox and opening the first webpage, the badge reappears. Any ideas why this works in the browser toolbox but not if used in the `userChrome.css` file?
Environment:
- Firefox 115.9 ESR
- macOS 14.4

The default icon of the [Tunnelbear Firefox extension](https://addons.mozilla.org/en-GB/firefox/addon/tunnelbear-vpn-firefox) looks like this:
![Icon of the Tunnelbear extension depicting a pipe mouth, overlaid by a large badge with the word "Off"](https://powerusers.codidact.com/uploads/zdft1zsy1572o0j1b2xwewqymnha)
I would like to hide the "Off" badge, so that it looks like this:
![Icon of the Tunnelbear extension depicting just a pipe mouth, the large badge with the word "Off" is missing](https://powerusers.codidact.com/uploads/65m9peb5jj3uq6bwkdukw1j9evrm)
Following a similar process as [hiding an extension from the address bar](https://powerusers.codidact.com/posts/288206/288207#answer-288207), I put together the following code
```css
.webextension-browser-action[data-extensionid="browser@tunnelbear.com"] .toolbarbutton-badge {
display: none;
}
```
If I try this in the style editor of the browser toolbox, it successfully removes the badge.
To make this change permanent, I tried to add the code to my `userChrome.css` file, however after restarting firefox and opening the first webpage, the badge reappears. Any ideas why this works in the browser toolbox but not if used in the `userChrome.css` file?
Environment:
- Firefox 115.9 ESR
- macOS 14.4

firefox

Communities

Review Suggested Edit