☰

GitHub HTML Preview

A userscript that adds preview links to HTML files

当前为 2021-07-21 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        GitHub HTML Preview
  3. // @version     1.0.5
  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=952601
  12. // @require     https://greasyfork.org/scripts/398877-utils-js/code/utilsjs.js?version=952600
  13. // @icon        https://github.githubassets.com/pinned-octocat.svg
  14. // @supportURL  https://github.com/Mottie/GitHub-userscripts/issues
  15. // ==/UserScript==
  16. /* global $ $$ on */
  17. (() => {
  18. 	"use strict";
  19. 	// Example page: https://github.com/codrops/DecorativeLetterAnimations
  20. 	// Source: https://github.com/htmlpreview/htmlpreview.github.com
  21. 	const prefix = "https://htmlpreview.github.io/?";
  22. 	// html & htm extensions
  23. 	const regex = /\.html?$/;
  24.  
  25. 	const link = document.createElement("a");
  26. 	link.className = "ghhp-btn py-0 v-align-baseline tooltipped tooltipped-e";
  27. 	link.setAttribute("aria-label", "Open in new tab");
  28. 	link.target = "_blank";
  29. 	link.innerHTML = `
  30. 		<svg class="octicon v-align-text-bottom" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
  31. 			<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"/>
  32. 		</svg>`;
  33. 	link.style.marginRight = ".25rem";
  34.  
  35. 	function addLink(el) {
  36. 		const cell = el.closest(".js-navigation-item div[role='rowheader'] span");
  37. 		if (cell && !$(".ghhp-btn", cell)) {
  38. 			const preview = link.cloneNode(true);
  39. 			preview.href = prefix + el.href;
  40. 			cell.prepend(preview);
  41. 		}
  42. 	}
  43.  
  44. 	function init() {
  45. 		if ($("#files")) {
  46. 			const files = $("#files").parentElement;
  47. 			$$(".js-navigation-item div[role='rowheader'] .js-navigation-open", files).forEach(el => {
  48. 				if (regex.test(el.title)) {
  49. 					addLink(el);
  50. 				}
  51. 			});
  52. 		}
  53. 	}
  54.  
  55. 	on(document, "ghmo:container", () => {
  56. 		// init after a short delay to allow rendering of file list
  57. 		setTimeout(() => {
  58. 			init();
  59. 		}, 200);
  60. 	});
  61. 	init();
  62.  
  63. })();