☰

Directory Buttons for GitHub Material Icons

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

当前为 2022-11-04 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Directory Buttons for GitHub Material Icons
  3. // @namespace   https://github.com/DenverCoder1
  4. // @match       https://github.com/*
  5. // @grant       none
  6. // @version     1.0.0
  7. // @author      Jonah Lawrence
  8. // @license     MIT
  9. // @description Add border to directory icons with Material Icons chrome extension and make them clickable
  10. // ==/UserScript==
  11.  
  12. /*jshint esversion: 11 */
  13.  
  14. (function () {
  15. 	// add directory icon border styling
  16.   const styles = `
  17. 		img[aria-label="Directory"] {
  18. 			box-shadow: 0px 0px 0px 2px var(--color-canvas-default), 0px 0px 0px 3px var(--color-border-default);
  19. 			border-radius: 1px;
  20. 			transform: scale(1.15);
  21. 			background: var(--color-canvas-default);
  22. 			cursor: pointer;
  23. 		}
  24.  
  25. 		img[aria-label="Directory"]:hover {
  26.     	filter: brightness(1.25);
  27. 		}
  28.   `;
  29.   document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend", "<style>" + styles + "</style>");
  30.  
  31. 	// detect click on directory icons
  32.   document.addEventListener("click", (el) => {
  33. 		// if the click is in a directory icon, get the href of the first link in the containing row and redirect to it
  34. 		const link = el.target.closest('img[aria-label="Directory"]')?.closest(".Box-row")?.querySelector("a")?.href;
  35. 		if (link) {
  36. 			window.location.href = link;
  37. 		}
  38.   });
  39. })();