Solved Trying to figure out if it's possible to force a tab's thumbnail to refresh

SubwaysOf

I'm trying to work around a bug in Vivaldi where depending upon how a site does navigation, the tab thumbnail won't update (such as when navigating between pages on Youtube).

I can get as far as using chrome.tabs.update() to replace or remove a tab's thumbnail but I can't seem to figure how to force it to refresh, if that's even possible.

SubwaysOf

Learned that chrome already has an API for tab captures so I was able to solve this.

(function () {
    let timer = null;

    // Tab URL changes -> capture the tab after a delay and update Vivaldi's thumbnail
    chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
        if (changeInfo.url && timer === null && tab.active) {
            timer = setTimeout(async () => {
                try {
                    const tabCapture = await chrome.tabs.captureVisibleTab(tab.windowId);

                    const vivExtData = JSON.parse(tab.vivExtData);
                    vivExtData.thumbnail = tabCapture;

                    await chrome.tabs.update(tabId, {
                        vivExtData: JSON.stringify(vivExtData),
                    });
                } catch (error) {
                    console.error(error);
                } finally {
                    timer = null;
                }
            }, 1000 / chrome.tabs.MAX_CAPTURE_VISIBLE_TAB_CALLS_PER_SECOND);
        }
    });

    // Switch tabs -> clear the timer
    chrome.tabs.onActivated.addListener(() => {
        if (timer !== null) {
            clearTimeout(timer);
            timer = null;
        }
    });

})();

Takes a screenshot and updates the thumbnail ~0.5 seconds after the url updates. Could also be extended to refresh the thumbnail more actively when you're in a tab with an active video or something fancy like that.

sjudenim

@SubwaysOf

Nice work by a fellow vertical(?) tab user. Youtube was especially annoying when making a quick glance to identify.

Thanks for sharing

lorenzostf

Hi @SubwaysOf! I was wondering how you implemented it. Did you create an extension and include a .json file along with the .js code, or did you use another approach?

sjudenim

@lorenzostf

you can load the js file into Vivaldi directly. Just put the script into a new folder at the same level as window.html. Then add it to the window.html file

here's mine for example

<!-- Vivaldi window document -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Vivaldi</title>
  <link rel="stylesheet" href="style/common.css" />
  <link rel="stylesheet" href="chrome://vivaldi-data/css-mods/css" />
</head>

<body>
  <script src="mods/domain-tab-groups.js"></script>
  <script src="mods/element-capture.js"></script>
  <script src="mods/markdown-toolbar.js"></script>
  <script src="mods/mono-webpanel-icon.js"></script>
  <script src="mods/search-dropdown.js"></script>
  <script src="mods/tab-thumbnail-reload.js"></script>
  <script src="mods/theme-plus.js"></script>
  <script src="mods/global-media-controls.js"></script>  
  <script src="mods/addressfield-reload.js"></script>
</body>

</html>

mib2berlin

@lorenzostf
Hi, in addition of @sjudenim, copy the code, create a text file in a text editor and save the file as tab-thumbnail-reload.js like in the example of @sjudenim.
Create a folder mods in /opt/vivaldi/resources/vivaldi/, this is a Linux path.
On Windows it is in \App Data\Local\Vivaldi\Application\7.1.3570.50\resources\vivaldi\
Move the file tab-thumbnail-reload.js there.
Edit the windows.html.

Cheers, mib