☰

GitHub HTML Preview

A userscript that adds preview links to HTML files

当前为 2020-09-08 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        GitHub HTML Preview
  3. // @version     0.1.1
  4. // @description A userscript that adds preview links to HTML files
  5. // @license     MIT
  6. // @author      Rob Garrison
  7. // @namespace   https://github.com/Mottie
  8. // @include     https://github.com/*
  9. // @run-at      document-idle
  10. // @grant       none
  11. // @require     https://greasyfork.org/scripts/28721-mutations/code/mutations.js?version=666427
  12. // @icon        https://github.githubassets.com/pinned-octocat.svg
  13. // ==/UserScript==
  14. (() => {
  15. 	"use strict";
  16. 	// Example page: https://github.com/codrops/DecorativeLetterAnimations
  17. 	// Source: https://github.com/htmlpreview/htmlpreview.github.com
  18. 	const prefix = "http://htmlpreview.github.io/?";
  19. 	// html & htm extensions
  20. 	const regex = /\.html?$/;
  21.  
  22. 	const link = document.createElement("a");
  23. 	link.className = "ghhp-btn btn btn-sm py-0 px-1 mx-1 v-align-baseline tooltipped tooltipped-n";
  24. 	link.setAttribute("aria-label", "Open in new tab");
  25. 	link.target = "_blank";
  26. 	link.innerHTML = `
  27. 		<svg class="octicon v-align-text-bottom" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
  28. 			<path d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
  29. 		</svg>`;
  30.  
  31. 	function addLink(el) {
  32. 		const cell = el.closest(".js-navigation-item div:nth-child(2) span");
  33. 		if (!$(".ghhp-btn", cell)) {
  34. 			const preview = link.cloneNode(true);
  35. 			preview.href = prefix + el.href;
  36. 			cell.appendChild(preview);
  37. 		}
  38. 	}
  39.  
  40. 	function init() {
  41. 		if ($(".js-details-container")) {
  42. 			const files = $("#files").parentElement;
  43. 			$$(".js-navigation-item div:nth-child(2) .js-navigation-open", files).forEach(el => {
  44. 				if (regex.test(el.title)) {
  45. 					addLink(el);
  46. 				}
  47. 			});
  48. 		}
  49. 	}
  50.  
  51. 	function $(str, el) {
  52. 		return (el || document).querySelector(str);
  53. 	}
  54.  
  55. 	function $$(str, el) {
  56. 		return [...(el || document).querySelectorAll(str)];
  57. 	}
  58.  
  59. 	document.addEventListener("ghmo:container", () => {
  60. 		// init after a short delay to allow rendering of file list
  61. 		setTimeout(() => {
  62. 			init();
  63. 		}, 200);
  64. 	});
  65. 	init();
  66.  
  67. })();