Mod Loader for Vivaldi

NeoCortex

This file will load any other tweaks into Vivaldi from user_mods directory.
How to use it:

Open vivaldi directory, then \Application<version_number>\resources\vivaldi
Create injectMods.js file and user_mods directory here
Insert <script src="injectMods.js"></script> after <script src="bundle.js"></script> in browser.html. Save browser.html.
Place any tweaks you like to user_mods directory. Subdirectories also supported (for example: you can make css and js directories in user_mods for easy navigation).
Done.

(function () {
	var jsToInject = []
	
	function injectCSS(file) {
		var link = document.createElement('link');
		link.rel = 'stylesheet';
		link.href = file;
		document.getElementsByTagName('head')[0].appendChild(link);
	}
	
	function injectJS(file) {
		var script = document.createElement('script');
		script.type = 'text/javascript';
		script.src = file;
		document.getElementsByTagName('body')[0].appendChild(script);
	}
	
	function injectMod(mod) {
		var modPath = mod.fullPath.replace('/crxfs/', '');
		console.log('Injecting mod "' + modPath)
		if (mod.isFile) {
			mod.name.toLowerCase().endsWith('.js') && jsToInject.push(modPath)
			mod.name.toLowerCase().endsWith('.css') && injectCSS(modPath)
		}
	}
	
	function readDirectoryAndInjectMods(directory) {
		if (directory.isDirectory) {
			directory.createReader().readEntries(e => {
				e.forEach(mod => {
					if (mod.isDirectory) {
						readDirectoryAndInjectMods(mod)
					} else injectMod(mod)
				})
			})
		}
	}
	
	function injectMods() {	
		chrome.runtime.getPackageDirectoryEntry(e => {
			e.createReader().readEntries(e => {
				e.forEach(e => {
					e.isDirectory && 'user_mods' === e.name && readDirectoryAndInjectMods(e)
				})
			})
		})
	}
	
	injectMods()
	setTimeout(function wait() {
		const browser = document.getElementById('browser');
		if (browser) {
			setTimeout(() => jsToInject.forEach(js => injectJS(js)), 100)
		}
		else {
			setTimeout(wait, 300);
		}
	}, 300);
})()

Some additional tweaks:

font_rendering_enhancer.css. Same as extension, but for whole UI. 0.6 here is 60% in Font Rendering Enhancer extension.

* {
    text-shadow: transparent 0px 0px 0px, rgba(0,0,0,0.6) 0px 0px 0px !important; 
}

strip_win10_buttons.css. Make window buttons smaller in Vivaldi on Windows 10.

#browser.win.win10 .window-buttongroup button {
	width: 30px !important;
}

#tabs-container .sync-and-trash-container {
    margin-right: -44px !important;
}

subtle_invisible_groups_fix.css. Tab groups indicator can become invisible in some cases (maximized window, white active tab, dark inactive tab, "Remove Tab Spacing in Maximized Windows" turned on, also "Apply Accent Color to Window" enabled). This tweak fixes that (can make this indicator ugly in some other themes).

div#browser.maximized > div#header > div#tabs-container > div.resize > div.tab-strip > span > div.tab-position > div.tab.active.tab-group > div.tab-group-indicator {
    filter: invert(100%);
}
div#browser.maximized > div#header > div#tabs-container > div.resize > div.tab-strip > span > div.tab-position > div.tab.active.tab-group > div.tab-group-indicator > div.tab-indicator.active {
    filter: invert(100%);
}

A little piece of code for this script taken from here. It's only few lines, but I think I must credit author of these lines.

iAN CooG

Interesting, I'll have a try

Hadden89

@neocortex Cool.

I cloned all the active mods I have on main vivaldi install to a test version with your injector and ~~almost~~ everything is in place (scaling mod, hooked images, css and js).

Thanks again for this.

sjudenim

@neocortex

Thanks for sharing.

2 things about your font smoothing,

This trick should only be used on Windows OS because OSX and Linux do a much better job rendering fonts, so adding a shadow on those systems actually makes them look blurry.
Using a dark shadow only works on light themes where the text is dark. It has no effect on dark themes that use a lighter font

Something like this should be a little more theme friendly,

/* Font smoothing */
* {
    text-shadow: text-shadow: var(--colorFgIntense) 0 0 1px !important; 
}

NeoCortex

@sjudenim this rule makes text blurry. I made script for that. It's requires restart after theme change (if previous theme was light and new is dark or vice versa), but fonts looks like as I expected.

(function() {
	var power = 0.68;
	var item = document.createElement('div');
	item.style.color = 'var(--colorFgIntense)';
	document.body.appendChild(item);
	var color = window.getComputedStyle(item).color;
	item.remove();
	color = color.slice(0, color.length - 1) + ",";
	var css = "* {\n text-shadow: transparent 0px 0px 0px, " + color + power + ") 0px 0px 0px !important; \n}";
	var heads = document.getElementsByTagName("head");
	if (heads.length > 0) {
		var node = document.createElement("style");
		node.type = "text/css";
		node.appendChild(document.createTextNode(css));
		heads[0].appendChild(node);
	}
})();

sjudenim

@neocortex

Yeah, this can be a tricky thing not just with different OS, monitors and how ClearType is set up all can yield different results.

That script isn't really necessary though. Vivaldi's ui has many colour variables that will change with the theme including alpha transparent ones. All of Vivaldi's colour variables can be found using the built in Developer tools when you inspect the ui.

I added a blur radius to soften the edges, which looks fine on my system but If it is too much on your end, try this

/* Font smoothing */
* {text-shadow: 0 0 0 var(--colorHighlightFgAlpha) !important}

NeoCortex

@sjudenim this doesn't change my fonts at all. Whatever, thanks for it. I think it doesn't necessary to change this script to style for me. Maybe I'll write configurable script for this, but not now.

sjudenim

@neocortex

No worries, whatever works.

This might be helpful https://cssgenerator.org/text-shadow-css-generator.html