Improved extension toggle
-
This extension toggle keeps selected extension buttons visible, hides/shows others as normal.
/* Toggle mod */ function extensionToggle() { // Add extension IDs of buttons you want to keep permanently visible to the array. Remove example IDs. var selectIDs = [ 'ffhafkagcdhnhamiaecajogjcfgienom' ]; // 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" style="margin-left:0px" tabindex="0"><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 (startup[i].classList.contains('actionVisibility-hidden')) { startup[i].style.display = 'none'; } else 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 (buttons[i].classList.contains('actionVisibility-hidden')) { 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);
A few notes:
-
To display a button permanently, you have to add its extension ID to the top section of the code. Add as many IDs as you want, the example code contains two. Personally I'm only running with one visible button. The IDs can be looked up by inspecting the extension button with devtools, or by enabling developer mode on the extensions page.
-
You should disable Vivaldi's default extension toggle in
vivaldi://settings/addressbar/
. It is officially superfluous now ^^ -
This mod could potentially be used for toggling two different sets of extension buttons.
-
-
Thank you so much for coming up with this. Where should we place the js file?
-
@yes.aravind https://forum.vivaldi.net/topic/10549/modding-vivaldi
Read the first post of this thread -- "adding functionality" explains it step by step. -
@luetage You beauty! That works like a charm!
Just had to turn off the default extension toggle function to avoid the repeat of icons Is there something more than an upvote? Very happy with this!. -
It's nice, cheers!
-
Reporting a strange fact. For some reason, after some time of daily usage, the Toggle mod 3 dots icon disappeared, by itself, from my main window and all the extensions icon were there, while I left them hidden after setting this mod up.
I've only setup uBO's id as permanent icon, all the rest should be toggled. Opening a new window with Ctrl-N by the way the 3 dots toggle appear there. I've moved all my tabs to the new window hence destroying the old one. Let's see if it happens again.A sidenote, I'm noticing lately that extension popup windows on left click are often drawn with the wrong size and position. I have to click all the extensions icons multiple times to make their optional window appear correctly. I'm the only one noticing this?
-
I'm glad you guys like it.
I have made an update to the extension toggle. It will start up in the contracted state now (only showing your permanently visible extensions). Additionally I got rid of all the bugs concerning hiding and showing of buttons -- at least I hope so... tell me if encounter any issues.The downside is it's a bit more code, and you will have to add your extension IDs in two places instead of just one. Good news is you can just copy the code from one section to the next. Detailed instructions are in the original post -- it's been adjusted.
-
@luetage can't you declare on top an array of ids and use it instead of having to paste them in different places? It would be more easy to edit.
-
@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.