Improved extension toggle



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



  • @luetage I'm trying to get a toggle based on the first version - the one with "three dots" - but with three statuses:

    var selectIDs = extensions always shown
    var clickIDs(?) = show clicking on three dots button
    var hideIDs = always hidden

    It'd possible? 🙂
    This will avoid to use a separate css to hide specific buttons, as toggle already do this.
    For some awkard reason, I only can load the first version of the toggle. 😞



  • @hadden89 I probably don't understand you, but I think that's exactly what the version further above does –––> https://forum.vivaldi.net/topic/20373/improved-extension-toggle/21 and that's the one I'm currently using.

    You show selected extension always, you hide selected extensions always, you toggle the rest with the extension toggle.



  • @luetage Yup. I'm testing new toggle versions on modless snapshot, and they works.
    So I fear I have to discover why the first version is the only which work on main profile, while other doesn't load the button at all 🙂
    I'll start doing some checks around other codes to discover the culprit in the meanwhile.



  • @hadden89 Check the console, if the button doesn't show you got a major error in there and this will reveal the issue.



  • @luetage
    toggle.js:1 Uncaught SyntaxError: Identifier 'adr' has already been declared at toggle.js:1

    I get this (I was testing toggle with set script) 😕



  • @hadden89 Yeah, you're using multiple loops, which wouldn't be bad, but I have the adr declaration in front of every loop in the scripts and this gives you the error. Just combine all the loops into one:

    if (adr) {
        mod1();
        nextmod();
        someothermod();
    }
    else {
        setTimeout(wait, 300);
    }
    

    I will probably get rid of the declaration in all these mods, it's a bit superfluous and you are not the only one who has faced this problem.



  • @luetage I'm a bit lost. So how I combine them?
    Toggle seems to be only mod to use adr, so what I have to put between the () or change in the script?

    Ok, I guess is your other mod which add scroll on top with tab .title click) and use adr.



  • @hadden89 Make a paste of your whole custom.js file on https://pastebin.com/ and give me the link. I'll take a look at it.



  • @luetage Thanks a lot.
    I will send only tab scroll + toggle code, as I keep the js mod separated (having in a single custom.js would be a nightmare, as I actually don't know the JS).

    Disabling the tab scroll (which use adr) made work the toggle.
    So, here the code.





  • @luetage Nice, now work as expected ^^
    Probably this edit "will fix" any toggle version which use adr 😉



  • @hadden89 I edited most of my posts on the forum board now to omit adr in the loop. It made sense for my personal setup but not for anyone else. Going forward just copy pasting any of the mods I posted around here should cause no issues.


Log in to reply
 

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