Steam Community modals as links

README.md

Steam Community modals as links

Converts pseudo-links from Steam Community into real anchor tags. Advantages:

• No JavaScript needed for opening Steam Community items. They are now plain links.
• We can open them as a full page, instead of being constrained to the clunky modal dialog.
• We can open them as a new tabs or as a new windows.
• We can right-click to copy the link to each item.
• We can click-and-drag the link.
• We can open many items as background tabs (by middle-clicking on them) and let them load in the background, instead of forcing us to wait for them to load.

Frankly, they should have been links in the first place.

This is also available at:

• https://greasyfork.org/en/scripts/498305-steam-community-modals-as-links
• https://gist.github.com/denilsonsa/c18dd78cba66832720176728f33f0c01

steamcommunity-modals-as-links.user.js

// ==UserScript==
// @name            Steam Community modals as links
// @namespace       https://denilson.sa.nom.br/
// @author          Denilson Sá Maia
// @version         1.0
// @description     Converts pseudo-links from Steam Community into real anchor tags. Instead of opening them as iframes inside modal dialogs, they now open as a full page, they can be opened in another tab, and their URLs can be copied.
// @match           *://steamcommunity.com/*
// @run-at          document-end
// @icon            https://steamcommunity.com/favicon.ico
// @license         MIT
// ==/UserScript==

(function () {
	"use strict";

	//////////////////////////////////////////////////
	// Convenience functions

	// Returns a new function that will call the callback without arguments
	// after timeout milliseconds of quietness.
	function debounce(callback, timeout = 500) {
		let id = null;
		return function() {
			clearTimeout(id);
			id = setTimeout(callback, timeout);
		};
	}

	const active_mutation_observers = [];

	// Returns a new MutationObserver that observes a specific node.
	// The observer will be immediately active.
	function debouncedMutationObserver(rootNode, callback, timeout = 500) {
		const func = debounce(callback, timeout);
		func();
		const observer = new MutationObserver(func);
		observer.observe(rootNode, {
			subtree: true,
			childList: true,
			attributes: false,
		});
		active_mutation_observers.push(observer);
		return observer;
	}

	// Adds a MutationObserver to each root node matched by the CSS selector.
	function debouncedMutationObserverSelectorAll(rootSelector, callback, timeout = 500) {
		for (const root of document.querySelectorAll(rootSelector)) {
			debouncedMutationObserver(root, callback, timeout);
		}
	}

	function stopAllMutationObservers() {
		for (const mo of active_mutation_observers) {
			mo.disconnect();
		}
		active_mutation_observers.length = 0;
	}

	//////////////////////////////////////////////////

	function main() {
			debouncedMutationObserverSelectorAll("#AppHubContent", function() {
				for (const card of document.querySelectorAll(".apphub_Card.modalContentLink[data-modal-content-url]")) {
					const a = document.createElement("a");
					a.href = card.dataset.modalContentUrl;
					a.append(...card.childNodes);
					card.append(a);
					card.classList.remove('modalContentLink');
				}
			});
	}

	main();

})();