☰

GitHub HTML Preview

A userscript that adds preview links to HTML files

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

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