Improved extension toggle
-
@iAN-CooG Yeah, I thought about how to make this easier, and I'm sure it's possible, but I simply don't know how.
The problem is there is no fixed amount for IDs for each user. One might have one extension permanently visible, the next five. I don't know how to put this into code. And you can't really save a statement as variable as far as I know.I looked on stackoverflow but didn't really find anything instructive. If anyone knows a way do tell.
-
@iAN-CooG Oh, I just read this now, no idea, haven't encountered a problem with pop-up windows, the code shouldn't really have influence on them -- it's just hiding and showing buttons. But try the new version and see if it persists.
-
@luetage you could save th earray of IDs as a variable, and then do an index lookup. For example:
var chosen_ids = ["jfkkwejfjwfjwe","jfieowfiowfjwiofjew"]; //chosen ids to make visible ... if (chosen_ids.indexOf(buttons[i].id) >= 0) { buttons[i].style.display = "flex"; } else { buttons[i].style.display = "none"; }
-
@luetage I tried to do it and it works, one can add their ids on the addID array
setTimeout(function wait() { var wrapper = document.querySelector(".toolbar-addressbar.search.toolbar > .extensions-wrapper"); if (wrapper != null) { // input permanently visible extension buttons IDs below var arrID=[ "egojmoickcledhhfmkjjhgkboflnhlhf" , "hkhcjamebchhnoddfipklniglomopkcm" ]; var button = document.createElement('button'); var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); var path = document.createElementNS("http://www.w3.org/2000/svg", "path"); button.classList.add('button-toolbar', 'toggle-extensions-group'); button.id = 'togglemod'; button.setAttribute("title", "Toggle mod"); button.setAttribute("tabindex", "-1"); svg.setAttributeNS(null, "width", "4"); svg.setAttributeNS(null, "height", "16"); svg.setAttributeNS(null, "viewBox", "0 0 4 16"); path.style = "d: path('M2 4c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm0 6c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm0 6c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z')"; wrapper.appendChild(button); button.appendChild(svg); svg.appendChild(path); document.getElementById('togglemod').addEventListener('click', function() { var buttons = document.querySelectorAll(".button-toolbar.browserAction-button"); for (var i=0; i < buttons.length; i++) { if (buttons[i].classList.contains('actionVisibility-hidden')) { buttons[i].style.display = "none"; } else if ( arrID.indexOf(buttons[i].id) > -1 ) { buttons[i].style.display = "flex"; } else if (buttons[i].style.display == "none") { buttons[i].style.display = "flex"; } else { buttons[i].style.display = "none"; } } }); } else { setTimeout(wait, 300); } }, 300);
Edit: damn, @LonM already posted a similar solution while I was writing
-
nice, thanks for sharing. I usually hide those ugly icons
-
@luetage said in Improved extension toggle:
@iAN-CooG Oh, I just read this now, no idea, haven't encountered a problem with pop-up windows, the code shouldn't really have influence on them -- it's just hiding and showing buttons. But try the new version and see if it persists.
The problem was there way before I started trying your mod, it's already a bug in Vivaldi IMHO.
-
@LonM said in Improved extension toggle:
@luetage you could save th earray of IDs as a variable, and then do an index lookup. For example:
var chosen_ids = ["jfkkwejfjwfjwe","jfieowfiowfjwiofjew"]; //chosen ids to make visible ... if (chosen_ids.indexOf(buttons[i].id) >= 0) { buttons[i].style.display = "flex"; } else { buttons[i].style.display = "none"; }
Oh wow, that's exactly what I was looking for, and it works perfectly. Thanks! Will update OP.
-
I made a small update. Starting up it will now handle the fringe case of a hidden permanently visible button. And I removed some unnecessary logic regarding the state of the extension wrapper. Code is a little lighter overall now.
-
works better, sometimes all the extensions icons reappear by themselves, or by moving the icons they didn't hide anymore, but now the toggle takes care of it nicely.
-
@iAN-CooG
Ahh, yeah, these problems occurred when I introduced the startup code and the toggle state to fix other issues with hiding and showing buttons. But I noticed the problem and fixed it about an hour later. You have been using a buggy version for the last 2 days, despite a fully working version being up. Sorry, I should have been more vocal about that.A list of all current minor inconsistencies:
- When hiding a button, the icon will disappear, but the space will remain -- because the display of this button is set to
flex
. - When showing a button, while the wrapper is expanded, the button won't appear -- because the display of this button is set to
none
.
Both issues are fixed by just clicking the toggle (-- because the display of the button is reevaluated at this moment), and I don't really consider them bugs.
Moving extension buttons around just works as expected, there shouldn't be any issues.But yeah, if one of you notices something else, please tell me.
- When hiding a button, the icon will disappear, but the space will remain -- because the display of this button is set to
-
I have slightly altered the code in the OP. It turns out Vivaldi changed something in the extensions wrapper coding, therefore hiding/showing buttons made them appear after our toggle now. Additionally toggling the user interface made the extension toggle disappear. I fixed this, but the toggle isn't part of the extensions wrapper anymore, but simply the last child in the address bar. Therefore if you have a custom setup in your address bar, you will have to move the toggle too.
-
I'm glad I encountered this thread, since for a long time I've been wondering why it wasn't like this in Vivaldi already. It works well.
Until it is, Vivaldi out of the box is actually behind Chrome, which does let you drag icons in and out of its similar area.
-
I wanted to share the version of the extension toggle I'm currently using. With the introduction of chrome 67 it's currently not possible to hide an extension button, without automatically showing the real extension toggle, which shows hidden buttons in a dropdown. Here is how to work around this: Hide them with the help of this mod instead. There is a second array which lets you input buttons you want to keep hidden. Just as a reminder: Do not hide buttons with the right click menu when using this mod – all extension buttons should be set to "show".
function extensionToggle() { // Add extension IDs of buttons you want to keep permanently visible to the array. Remove example IDs. var selectIDs = [ 'ffhafkagcdhnhamiaecajogjcfgienom' ]; // Add extension IDs of buttons you want to hide to the array. Remove example IDs. var hideIDs = [ 'pgdnlhfefecpicbbihgmbmffkjpaplco' ]; // create the button const adr = document.querySelector('.toolbar-addressbar.toolbar'); var div = document.createElement('div'); div.classList.add('button-group'); div.innerHTML = '<button id="togglemod" class="button-toolbar toggle-extensions-group" title="Toggle mod" tabindex="0" style="margin-left:0px"><svg width="4" height="16" viewBox="0 0 4 16" xmlns="http://www.w3.org/2000/svg"><path d="M2 4c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm0 6c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm0 6c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z"></path></svg></button>'; adr.appendChild(div); // startup setting const startup = document.querySelectorAll('button.button-toolbar.browserAction-button'); const togstat = document.getElementById('togglemod'); for (var i=0; i < startup.length; i++) { if (selectIDs.indexOf(startup[i].id) != -1) { startup[i].style.display = 'flex'; } else { startup[i].style.display = 'none'; } } // toggle logic togstat.addEventListener('click', function() { const buttons = document.querySelectorAll('button.button-toolbar.browserAction-button'); if (togstat.classList.contains('expanded')) { togstat.classList.remove('expanded'); } else { togstat.classList.add('expanded'); } for (var i=0; i < buttons.length; i++) { if (hideIDs.indexOf(buttons[i].id) != -1) { buttons[i].style.display = 'none'; } else if (selectIDs.indexOf(buttons[i].id) != -1 || togstat.classList.contains('expanded')) { buttons[i].style.display = 'flex'; } else { buttons[i].style.display = 'none'; } } }); }; // Loop waiting for the browser to load the UI. You can call all functions from just one instance. setTimeout(function wait() { const browser = document.getElementById('browser'); if (browser) { extensionToggle(); } else { setTimeout(wait, 300); } }, 300);
-
@luetage well done!
-
I found a request from reddit yesterday to toggle sets of extension icons. Since this is easy to do and already mentioned in OP I'll throw this in here. This setup uses 3 sets of buttons, but this could easily be expanded. If you want a button hidden, just don't input it in any of these sets (which solves the current chromium 67 problem too).
function extensionToggle() { // Add extension IDs of buttons. On each click of the toggle another set of buttons is being shown. You can leave any one of these empty. In this example no extensions are being shown on start, 3 extensions are being shown in set2 and 3 in set3. Extension that are installed and enabled but not entered will be hidden from all sets. var set1 = [ ]; var set2 = [ 'ffhafkagcdhnhamiaecajogjcfgienom', 'aapbdbdomjkkjkaonfhkkikfgjllcleb', 'nngceckbapebfimnlniiiahkandclblb' ]; var set3 = [ 'cjpalhdlnbpafiamejdnhcphjbkeiagm', 'pgdnlhfefecpicbbihgmbmffkjpaplco', 'hipnollokpifchndpfhnlfjbdnkhiigg' ]; // create the button const adr = document.querySelector('.toolbar-addressbar.toolbar'); var div = document.createElement('div'); div.classList.add('button-group'); div.innerHTML = '<button id="togglemod" class="button-toolbar toggle-extensions-group" title="Toggle mod" tabindex="0" style="margin-left:0px"><svg width="4" height="16" viewBox="0 0 4 16" xmlns="http://www.w3.org/2000/svg"><path d="M2 4c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm0 6c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm0 6c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z"></path></svg></button>'; adr.appendChild(div); // startup setting const startup = document.querySelectorAll('button.button-toolbar.browserAction-button'); const togstat = document.getElementById('togglemod'); togstat.classList.add('SET1'); for (var i=0; i < startup.length; i++) { if (set1.indexOf(startup[i].id) != -1) { startup[i].style.display = 'flex'; } else { startup[i].style.display = 'none'; } } // toggle logic togstat.addEventListener('click', function() { const buttons = document.querySelectorAll('button.button-toolbar.browserAction-button'); if (togstat.classList.contains('SET1')) { togstat.classList.remove('SET1'); togstat.classList.add('SET2'); } else if (togstat.classList.contains('SET2')) { togstat.classList.remove('SET2'); togstat.classList.add('SET3'); } else { togstat.classList.remove('SET3'); togstat.classList.add('SET1'); } for (var i=0; i < buttons.length; i++) { if (togstat.classList.contains('SET1') && set1.indexOf(buttons[i].id) != -1) { buttons[i].style.display = 'flex'; } else if (togstat.classList.contains('SET2') && set2.indexOf(buttons[i].id) != -1) { buttons[i].style.display = 'flex'; } else if (togstat.classList.contains('SET3') && set3.indexOf(buttons[i].id) != -1) { buttons[i].style.display = 'flex'; } else { buttons[i].style.display = 'none'; } } }); }; // Loop waiting for the browser to load the UI. You can call all functions from just one instance. setTimeout(function wait() { const browser = document.getElementById('browser'); if (browser) { extensionToggle(); } else { setTimeout(wait, 300); } }, 300);
It would probably be a good idea to add the names of the extensions as comment in the same line, so you can shuffle/delete/replace them when your setup changes.
-
@luetage: I installed this mod (original version without 3 sets) alongside the panel overlay, the status bar overlay and the guides.
It works, meaning it shows the narrow button with the three vertical dots and it hides the extensions I selected to be hidden. If I click the button, nothing happens. If I then move one extension button, one of the hidden extension buttons appears (and vanishes on clicking the thee dots again).
Should all hidden extension button appear? Should they do so by themselves?
I was expecting to be able to hide them and show "on demand". If this doesn't work, would it be possible to remove the three-dotted-button completely und just silently hide selected extensions? Basically, this would work similarly to the Vivaldi-own method of right-clicking and "hide"ing the extensions, just not showing the V-three-dot-button...
(Hope this isn't too confusing? Not sure I understand all I wrote... )
-
@morg42 Yeah, I don't understand it either
What I can tell you is this: The original version (first post) doesn't work too good on snapshot right now, because you can't hide buttons with right click menu. Use the second version instead.Generally the toggle is meant to show selected extensions always and toggle others as expected. The second version gives you the ability to additionally hide selected extensions on a permanent basis. That's all there is to it. The third version is something different, you have to input every extension you want to have visible in a specific set.
-
I am using this version.
I want some extensions to be always visible, others either not at all (then I don't need the button with the three dots) or on demand via toggle.
This toggle does nothing visible. After moving one extension, one of the hidden shows, but not all. Toggling again hides the one newly visible extension...
I put all I want to see in the visible list, all I want hidden/toggled in the hidden list. Correct?
-
@morg42 When using this mod the improved toggle is always visible. That's the same version I'm using and it does what you want. Make sure you input the extension IDs in the right place and separate them with commas and unhide any button you have hidden with right click menu, then it will work out fine. But I don't know your setup and what other mods you are running, maybe something interferes, although I'm not sure what that could be.
Edit: I just read your last sentence. Only put the ones you want to be hidden permanently in the second list, nothing else. The rest will hide/show as you toggle – that's your mistake.
-
@luetage That was it... thanks! Works now as expected