您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
A userscript that adds preview links to HTML files
当前为
// ==UserScript== // @name GitHub HTML Preview // @version 0.1.1 // @description A userscript that adds preview links to HTML files // @license MIT // @author Rob Garrison // @namespace https://github.com/Mottie // @include https://github.com/* // @run-at document-idle // @grant none // @require https://greasyforks.org/scripts/28721-mutations/code/mutations.js?version=666427 // @icon https://github.githubassets.com/pinned-octocat.svg // ==/UserScript== (() => { "use strict"; // Example page: https://github.com/codrops/DecorativeLetterAnimations // Source: https://github.com/htmlpreview/htmlpreview.github.com const prefix = "http://htmlpreview.github.io/?"; // html & htm extensions const regex = /\.html?$/; const link = document.createElement("a"); link.className = "ghhp-btn btn btn-sm py-0 px-1 mx-1 v-align-baseline tooltipped tooltipped-n"; link.setAttribute("aria-label", "Open in new tab"); link.target = "_blank"; link.innerHTML = ` <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"> <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"/> </svg>`; function addLink(el) { const cell = el.closest(".js-navigation-item div:nth-child(2) span"); if (!$(".ghhp-btn", cell)) { const preview = link.cloneNode(true); preview.href = prefix + el.href; cell.appendChild(preview); } } function init() { if ($(".js-details-container")) { const files = $("#files").parentElement; $$(".js-navigation-item div:nth-child(2) .js-navigation-open", files).forEach(el => { if (regex.test(el.title)) { addLink(el); } }); } } function $(str, el) { return (el || document).querySelector(str); } function $$(str, el) { return [...(el || document).querySelectorAll(str)]; } document.addEventListener("ghmo:container", () => { // init after a short delay to allow rendering of file list setTimeout(() => { init(); }, 200); }); init(); })();