Home

Custom Thumbnails

Vivaldi Speed Dial Generator 2.0 came with the possibility of creating custom thumbnail extractors and generators. There's no settings page, you'll have to edit the script directly, that's because reading the settings would take so long that the script would fail to extract any thumbnail.

Attention

The easiest way is by using the extension from a git clone of my repository, this way, if I update the extension you can just pull the changes, I wrote the custom thumbnail parts in a way to minimise conflicts.

If you installed the crx file from the releases page and want to create custom extractors, you'll have to be more careful as your changes will be lost if you are not careful. First, the file you'll have to edit is in
<Vivaldi dir>/User Data/Default/Extensions/ikbofimpjhombaknmifhlpfljdccgcmm
If you later update the extension by dropping the new crx in the extensions page, all your custom extractors will be gone. Backup your custom extractors and add them again after update.

Adding custom thumbnail extractors

Everything you'll do is made in the VivaldiSDgen.js file. The custom generators will be added inside the const custom = {} object. This object is a dictionary where the key is the website domain and the value the function that will do the heavy work of extracting the thumbnail image.

Example 1 - Getting an image from the page

If the page has some image somewhere you can easily extract that using the provided setImageTagAsSD function. You basically pass a CSS selector to tell the function where's the image to use. The function will extract the src and apply that as a custom thumbnail.

"www.example.com": async () => await setImageTagAsSD(".title img"),

In this example it will try to find an image under .title img and use that image source as the thumbnail.

Example 2 - Getting multiple possibilities from the page

What if the page doesn't always have an image in that part and you want to try another one if the first fails? Well you can easily do that by checking multiple images at once. All you have to do is use a Promise.all calling setImageTagAsSD with a second argument. The second argument is a number that defines which should be selected if multiple are found, a higher number means higher preference to that image.

Important: Don't use negative numbers

"www.example.com": async () => await Promise.all([
	setImageTagAsSD("img.a", 3),
	setImageTagAsSD("img.b", 2),
	setImageTagAsSD("img.c", 1),
	setImageTagAsSD("img.d", 0),
]),

Example 3 - Complex functions

As you might have noticed, the value of domain key is a function, and as you might have guessed, this function can do anything. While setImageTagAsSD is a convenient function for most situations, there are some cases where you'll need more control.

For example, you may need to read some custom parameter because there's a script to lazyload images and the URL is inside a data-url parameter, or you may need to inject a script on the page as the image URL itself is lazy loaded and you'll need to intercept when this call is done.

In those cases you can add the custom and complex function a few lines above the custom object between these two lines:

/* Add custom functions below this line to avoid merge conflicts */

async function callSomeThing() {...}

/* Add custom functions above this line to avoid merge conflicts */

And then use it in the custom object:

"www.example.com": callSomeThing,