Improved extension toggle

  • @luetage said in Improved extension toggle:

    @hadden89 This works:

    Is that the current one? It shows two toggle buttons for me with no icons, and neither toggle works.

    I upgraded from 1.15 today, so suddenly had the two-toggle issue with the original one (an earlier post mentioned this is a thing with Chromium 67+, so I guess it was expected), but at least the (select) icons did show and one of the toggles worked. So I'll stick with that one for now and ignore the decoy toggle button until I can figure out what's going on.

  • @rseiler I have since updated all my posts, forget the pastebin link – just take the originals. You have to do three things for the improved extension toggle to work (2nd version top of page 2

    • disable the vivaldi extension toggle in settings
    • never hide a button with the right mouse click menu
    • input the IDs of extensions you want to permanently show and permanently hide

  • @luetage Thanks, I had missed that you edited the post there.

    I always have had the built-in toggle unchecked in the UI, and it still is unchecked, but it always shows for me since I've been on 2.0 (version of the script hasn't mattered). Sounds like it's a problem just here though. I can live with it, since there's no way I'm rebuilding the whole profile for whatever that's about.

  • @rseiler You have a button hidden with right mouse click menu. Click on the other extension toggle and unhide whatever is in there, then the 2nd toggle will disappear.

  • @luetage Ah, that explains the "missing" icons when I clicked the toggle. Right, doing that solved it.

    I could have sworn they were all unhidden, since I thought that's been a requirement all along, but clearly not, since a couple weren't. Thanks.

    I kinda think that this feature needs to be built in at some point. πŸ™‚

  • @rseiler Yeah, Vivaldi needs to do something about the extension icons, because we currently have the most confusing implementation compared to all other popular browsers out there. Especially since 2.0 people are posting about issues almost on a daily basis. I don't particularly mind, because we can fix this ourselves with mods, but for those who can't a better out of the box experience should be provided.

  • I tested the new extension toggle in snapshot and it's quite decent with a few simple css modifications. First of all extension toggle needs to be disabled in settings, then just hide the buttons you want to toggle – to make it look good with color behind tabs on and off, to give all buttons the same background and to fix some focus issues you can use following code:

    button.button-toolbar.toggle-extensions-group:focus:not(:hover), .extensions-wrapper .actionVisibility-hidden:not(:hover) {
        background-color: unset;
    .color-behind-tabs-off .toolbar-addressbar .button-toolbar.browserAction-button.popup-visible {
        background-color: var(--colorAccentBgDark);

    The only remaining downside is that you can't have it all: keep buttons visible, keep buttons hidden and toggle the rest. Either you toggle all, or you toggle the hidden ones. If you want more, a js modification is still the way to go. Personally I'll probably be switching over to Vivaldi's version, because I only had one button permanently hidden and it doesn't bother me that much.

  • I am not a developer or a coder, but I "copied" the instructions given and the result is amazing. Now the extensions bar and toggle works as I like πŸ™‚
    Thank you very much to all contributors and the OP of course 😁

  • HI. The extensions are always visible no matter what. The button is drawn but it does nothing. I'm using this version:

    • Already disabled the default extensions toggle
    • leaving only one extension visible
    • placing the "extensions-toggle.js" before other "*.js" in the "browser.html" file.
    • All the buttons are visible i.e. "show"
      My version of Vivaldi for windows is 2.4.1488.38 (Stable channel) (64-bit)

  • @ertwro The extension toggle was last updated a very long time ago. I would have been surprised if it still worked out fine. Especially the update to 2.4 shook up everything, it probably has to be rewritten.

    But I can assure you it used to work in all its iterations before 2.4 ^^

  • Hi. This extension is great.
    When I updated to 2.4 two weeks ago or so, it stopped working and I had to downgrade to 2.3 to work again (the improvements of new version where less important for me that this extension).
    Thank you for your work.

  • @ignotus Try this:

    function extensionToggle() {
    // Add extension IDs of buttons you want to keep permanently visible to the array. Remove example IDs.
        var selectIDs =
    // Add extension IDs of buttons you want to hide to the array. Remove example IDs.
        var hideIDs =
        // create the button
        const adr = document.querySelector('.toolbar-addressbar');
        var div = document.createElement('div');
        div.classList.add('button-toolbar', 'button-narrow'); = 'togglemod';
        div.innerHTML = '<button title="Toggle extensions" class=""><svg width="26" height="26" viewBox="0 0 26 26" xmlns=""><path d="M13 9C14.1046 9 15 8.10457 15 7C15 5.89543 14.1046 5 13 5C11.8954 5 11 5.89543 11 7C11 8.10457 11.8954 9 13 9Z"></path><path d="M13 15C14.1046 15 15 14.1046 15 13C15 11.8954 14.1046 11 13 11C11.8954 11 11 11.8954 11 13C11 14.1046 11.8954 15 13 15Z"></path><path d="M15 19C15 20.1046 14.1046 21 13 21C11.8954 21 11 20.1046 11 19C11 17.8954 11.8954 17 13 17C14.1046 17 15 17.8954 15 19Z"></path></svg></button>';
        // startup setting
        const startup = document.querySelectorAll('.toolbar-extensions div');
        const togstat = document.getElementById('togglemod');
        for (var i=0; i < startup.length; i++) {
            if (selectIDs.indexOf(startup[i].classList.item(1)) != -1) {
                startup[i].style.display = 'flex';
            else {
                startup[i].style.display = 'none';
        // toggle logic
        togstat.addEventListener('click', function() {
            const buttons = document.querySelectorAll('.toolbar-extensions div');
            if (togstat.classList.contains('expanded')) {
            else {
            for (var i=0; i < buttons.length; i++) {
                if (hideIDs.indexOf(buttons[i].classList.item(1)) != -1) {
                    buttons[i].style.display = 'none';
                else if (selectIDs.indexOf(buttons[i].classList.item(1)) != -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) {
        else {
            setTimeout(wait, 300);
    }, 300);

    It seems to work. Remaining issues: togglemod button shows up when UI is hidden. Togglemod button is moved in front of extensions and profile button, when UI is enabled again… Both can be solved by adding following code to your custom.css file:

    #browser.address-off #togglemod {
        display: none;
    #togglemod {
        order: 1;

  • @luetage

    Works with latest stable version.
    Thank you very much!

Log in to reply

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