![Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
Hide or show elements of a webpage with a hotkey?
Hello. I’ve recently made the switch to Firefox due to its deep UI customizability and its open ended scripting capabilities.
I find myself using browser hosted “Apps” more and more these days and have recently realised they are open to being customised through developer tools. Hiding elements such as a side bar or a persistent website header you don’t really care for.
I am wondering is it possible to automate this processes? So instead of opening the developer tools every time you visit a site, instead you configure it once and then its automatically hidden from view.
Secondly, would it be possible to trigger the hiding of elements through a hotkey? So for example you can show or hide a side bar just when you need it?
Just trying to get consensus on what is possible or not and see which direction I need to go. Thanks!
Kiválasztott megoldás
The bookmarklet I posted above works as a toggle as it checks the current display state (defaultView.getComputedStyle). You click it once to run the code to hide the element specified by the selector, in this case ".questions-sidebar". You click the bookmarklet another time to run the code once again and it will re-display this element. This only works if you run the bookmarklet on the page where you want to hide this specific content and this is similar to running JavaScript code in the Web Console. This code works in the Web Console, but it is more convenient to have such a bookmarklet available as a button on the Bookmarks Toolbar.
Using code in userContent.css is only convenient if you want to hide specific content permanently although in some case it is possible to unhide the content via a bookmarklet (only possible if the !important flag isn't used) or by using the Inspector to override rule(s) in userContent.css.
Válasz olvasása eredeti szövegkörnyezetben 👍 1Összes válasz (6)
Hi, we're using uBlock Origin for hiding things.
You can alternatively use rules in userContent.css to hide content on specific domains or pages or otherwise modify the appearance.
An example with code in the userContent.css file.
@-moz-document domain(support.mozilla.org){ .questions-sidebar {display: none !important;} /* hide sidebar*/ }
- https://www.userchrome.org/what-is-userchrome-css.html
- https://www.userchrome.org/how-create-userchrome-css.html
In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.
- toolkit.legacyUserProfileCustomizations.stylesheets = true
See:
Another possibility is to use a JavaScript bookmarklet to toggle a specific element.
javascript:/*toggle style*/(function(){ var d=document,s=[{s:'.questions-sidebar',o:0}],aP=[{p:'display',t:'none',v:'block',i:1},{p:'visibility',t:'hidden',v:'visible',i:1}],pP,i,j,n,N,S; for(j=0;S=s[j];j++){ pP=aP[S.o];n=d.querySelectorAll(S.s);for(i=0;N=n[i];i++){ N.style.setProperty(pP.p,((d.defaultView.getComputedStyle(N,'').getPropertyValue(pP.p))==pP.t)?pP.v:pP.t,pP.i?'important':''); }} })()
Guys, thank allot for your help
Cor-el Thank you so much with your two suggestions. I have been using pre configured CSS files to mostly controll Firefox/Thunderbird appearances, So its great to know that you can extend it to control web content as well. I definetly plan to learn more about it now.
Your first code example is excellent but I have a follow up question to your second one. I did a qucik rudimentary read up on bookmarklets, apparently they are Javascript code you add to a URL before hitting enter
Do bookmarklets require to reload the page in order to toggle the elements visibility?
Lastly, Can bookmarklets be excuted outside of a browser, say from a folder on File explorer just like you would execute a .url file? I have allot more controll over windows with scripting language such as Authotkey and some Python as well. So it would be really nice to know.
Módosította: heday33967,
Kiválasztott megoldás
The bookmarklet I posted above works as a toggle as it checks the current display state (defaultView.getComputedStyle). You click it once to run the code to hide the element specified by the selector, in this case ".questions-sidebar". You click the bookmarklet another time to run the code once again and it will re-display this element. This only works if you run the bookmarklet on the page where you want to hide this specific content and this is similar to running JavaScript code in the Web Console. This code works in the Web Console, but it is more convenient to have such a bookmarklet available as a button on the Bookmarks Toolbar.
Using code in userContent.css is only convenient if you want to hide specific content permanently although in some case it is possible to unhide the content via a bookmarklet (only possible if the !important flag isn't used) or by using the Inspector to override rule(s) in userContent.css.
Cor-el I am intrested both in toggling and hidding permanently. Thanks allot for fleshing this out for me. Now I know which many routes are available to me as I learn more about CSS and JS.