☰

Github HTML Preview Button (HTML 预览按钮)

Adds a button to preview HTML files on Github using htmlpreview. 添加一个按钮以使用 htmlpreview 在 Github 上预览 HTML 文件。

  1. // ==UserScript==
  2. // @name         Github HTML Preview Button (HTML 预览按钮)
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1.1
  5. // @description  Adds a button to preview HTML files on Github using htmlpreview. 添加一个按钮以使用 htmlpreview 在 Github 上预览 HTML 文件。
  6. // @author      cjm
  7. // @match        https://github.com/*
  8. // @grant        none
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     const func = ()=>{
  16.         var element = document.getElementById("wocao3");
  17.         element && element.parentNode.removeChild(element);
  18.  
  19.         if (window.location.href.endsWith('.htm') || window.location.href.endsWith('.html')) {
  20.             const url = window.location.href;
  21.             const btn1 = `<a id="wocao3" class="btn ml-2 d-none d-md-block" style="
  22. background: #171a1c;
  23.     color: white;
  24.     display: inline-block !important;
  25.     /*width: 48%;*/
  26.     text-align: center;
  27.     /*margin: 5px;*/
  28.     " target="_blank" href="${`http://htmlpreview.github.io/?${url}`}">` + 'HTML Preview' + '</a>'
  29.  
  30.             const parent = document.querySelector('.pagehead-actions > li:last-child');
  31.             //.pagehead-actions   //#repository-container-header
  32.             parent.insertAdjacentHTML('beforeBegin', btn1);
  33.         }
  34.     }
  35.  
  36.     func();
  37.  
  38.     window.addEventListener('hashchange', ()=>{
  39.         func();
  40.     }
  41.     )
  42.  
  43.     //修改native以拦截popstate事件
  44.     var pushState = history.pushState;
  45.     history.pushState = function() {
  46.         var ret = pushState.apply(history, arguments);
  47.         window.dispatchEvent(new Event("pushstate"));
  48.         window.dispatchEvent(new Event("locationchangefathom"));
  49.         return ret;
  50.     }
  51.  
  52.     window.addEventListener("popstate", function() {
  53.         window.dispatchEvent(new Event("locationchangefathom"))
  54.     });
  55.     window.addEventListener("locationchangefathom", trackPageview)
  56.     function trackPageview() {
  57.         func();
  58.     }
  59.  
  60. }
  61. )();