Improved extension toggle



  • This extension toggle keeps selected extension buttons visible, hides/shows others as normal.

    /* Toggle mod */
    
    setTimeout(function wait() {
    	var wrapper = document.querySelector(".toolbar-addressbar.search.toolbar > .extensions-wrapper");
    	if (wrapper != null) {
    
    // Add extension IDs of buttons, you want to keep permanently visible, to the array. Remove example IDs.
    		var selectIDs =
    			[
    			"ffhafkagcdhnhamiaecajogjcfgienom",
    			"cjpalhdlnbpafiamejdnhcphjbkeiagm"
    			];
    
    		// create the button
    		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);
    
    		// startup setting
    		var startup = document.querySelectorAll("button.button-toolbar.browserAction-button");
    		var 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() {
    			var 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";
    				}
    			}
    		});
    
    	}
    	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.


  • Vivaldi Translator

    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.


  • Vivaldi Translator

    @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!


  • Banned

    Great.Thank you for sharing.



  • 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 :D



  • 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.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.