☰

Directory Buttons for GitHub Material Icons

Add border to directory icons with Material Icons chrome extension and make them clickable

// ==UserScript==
// @name        Directory Buttons for GitHub Material Icons
// @namespace   https://github.com/DenverCoder1
// @match       https://github.com/*
// @grant       none
// @version     1.0.2
// @author      Jonah Lawrence
// @license     MIT
// @description Add border to directory icons with Material Icons chrome extension and make them clickable
// ==/UserScript==

/*jshint esversion: 11 */

(function () {
	// add directory icon border styling
  const styles = `
		img[aria-label="Directory"], img.icon-directory {
			box-shadow: 0px 0px 0px 2px var(--bgColor-default, var(--color-canvas-default)), 0px 0px 0px 3px var(--borderColor-default, var(--color-border-default));
			border-radius: 1px;
			transform: scale(1.15);
			background: var(--bgColor-default, var(--color-canvas-default));
			cursor: pointer;
		}

		img[aria-label="Directory"]:hover, img.icon-directory:hover {
    	filter: brightness(1.25);
		}
  `;
  document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend", "<style>" + styles + "</style>");

	// detect click on directory icons
  document.addEventListener("click", (el) => {
		// if the click is in a directory icon, get the href of the first link in the containing row and redirect to it
		const link = el.target.closest('img[aria-label="Directory"], img.icon-directory')?.closest(".Box-row, tr")?.querySelector("a")?.href;
		if (link) {
			window.location.href = link;
		}
  });
})();