Fixing Extension Panel Icons

  • Moderator

    Hello all

    I've got sick and tired of the bug where if you have an extension panel, its icon sometimes disappears and is replaced by either a broken page icon or no icon at all.

    So, I've attempted to make this custom mod (added as a <script> in the browser.html) to try and solve the issue:

    setInterval(function () {
    // Test if panels have been loaded in yet
    var panelSwitch = document.querySelector("#switch");
    if (panelSwitch != null) {
        // Check all panel buttons
        var buttons = document.getElementById("switch").children;
    	for(var i = 0; i < buttons.length; i++) {
            // If they are a user added web view
            if (buttons[i].className.indexOf("webviewbtn") >= 0){
                var icon = buttons[i].children[0];
                // If they have the wrong protocol
                if (icon.src.substring(0, 24) === "http://chrome-extension/"){
                    // Replace with correct protocol
                    icon.src = "chrome-extension://" + icon.src.substring(24);
    // Repeat on sparse interval as I dont know what exactly causes the bug
    }, 10000);

    Hopefully this helps anyone out there with the same problem.

  • There is a pure css approach to this too, just for reference.

    I tried fixing this in devtools btw, and looked at a working and non-working favicon (google translate vs ublock origin). It seems to be fixed by putting chrome://favicon/ in front of chrome-extension://
    eg. chrome://favicon/chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/img/icon_16.png

  • Moderator

    @luetage I didn't know about that way, but good to know it exists. My approach is more just to automate the fix of broken icons than to customise them further.


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