☰

viewsource

View and beauty website source code. Support to see the source code by holding the right mouse and drag. Shortcut: Alt+U.

As of 2016-04-23. See the latest version.

  1. // ==UserScript==
  2. // @id           view-source@devs.forumvi.com
  3. // @name         viewsource
  4. // @namespace    devs.forumvi.com
  5. // @description  View and beauty website source code. Support to see the source code by holding the right mouse and drag. Shortcut: Alt+U.
  6. // @version      2.3.6
  7. // @icon         http://i.imgur.com/6yZMOeH.png
  8. // @author       Zzbaivong
  9. // @license      MIT
  10. // @match        http://*/*
  11. // @match        https://*/*
  12. // @resource     light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/github-gist.min.css
  13. // @resource     dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/monokai-sublime.min.css
  14. // @require      https://greatest.deepsurf.us/scripts/18530-beautify-html/code/beautify-html.js?version=117787
  15. // @require      https://greatest.deepsurf.us/scripts/18531-beautify-js/code/beautify-js.js?version=117786
  16. // @require      https://greatest.deepsurf.us/scripts/18528-beautify-css/code/beautify-css.js?version=117789
  17. // @require      https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js
  18. // @noframes
  19. // @connect      self
  20. // @supportURL   https://github.com/baivong/Userscript/issues
  21. // @run-at       document-idle
  22. // @grant        GM_addStyle
  23. // @grant        GM_getResourceText
  24. // @grant        GM_xmlhttpRequest
  25. // @grant        GM_registerMenuCommand
  26. // ==/UserScript==
  27.  
  28. (function () {
  29.  
  30.     'use strict';
  31.  
  32.     var theme = 'light', // light|dark
  33.  
  34.         win = window,
  35.         urlpage = location.href,
  36.         doc = document,
  37.         wrapcontent = doc.documentElement,
  38.         content = doc.body;
  39.  
  40.     function scrollByDragging(container, disableH, disableV) {
  41.  
  42.         function mouseUp(e) {
  43.             if (e.which !== 3) return;
  44.  
  45.             window.removeEventListener('mousemove', mouseMove, true);
  46.             container.style.cursor = 'default';
  47.         }
  48.  
  49.         function mouseDown(e) {
  50.             if (e.which !== 3) return;
  51.  
  52.             pos = {
  53.                 x: e.clientX,
  54.                 y: e.clientY
  55.             };
  56.  
  57.             window.addEventListener('mousemove', mouseMove, true);
  58.             container.style.cursor = 'move';
  59.         }
  60.  
  61.         function mouseMove(e) {
  62.             if (!disableH) container.scrollLeft -= (-pos.x + (pos.x = e.clientX));
  63.             if (!disableV) container.scrollTop -= (-pos.y + (pos.y = e.clientY));
  64.         }
  65.  
  66.         var pos = {
  67.             x: 0,
  68.             y: 0
  69.         };
  70.  
  71.         container.oncontextmenu = function (e) {
  72.             e.preventDefault();
  73.         };
  74.  
  75.         container.addEventListener('mousedown', mouseDown, false);
  76.         window.addEventListener('mouseup', mouseUp, false);
  77.  
  78.     }
  79.  
  80.     function removeEvents(ele, attr) {
  81.         var events = 'onafterprint onbeforeprint onbeforeunload onerror onhashchange onload onmessage onoffline ononline onpagehide onpageshow onpopstate onresize  onstorage onunload onblur onchange oncontextmenu onfocus oninput oninvalid onreset onsearch onselect onsubmit onkeydown onkeypress onkeyup onclick ondblclick ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop onmousedown onmousemove onmouseout onmouseover onmouseup onmousewheel onscroll onwheel oncopy oncut onpaste onerror onshow ontoggle'.split(' '),
  82.             x;
  83.         for (x in events) {
  84.             var _event = events[x];
  85.             ele[_event] = null;
  86.             if (attr) {
  87.                 ele.removeAttribute(_event);
  88.             }
  89.         }
  90.     }
  91.  
  92.     function viewsource() {
  93.         GM_xmlhttpRequest({
  94.             method: 'GET',
  95.             url: urlpage,
  96.             onload: function (response) {
  97.  
  98.                 removeEvents(win);
  99.                 removeEvents(doc);
  100.                 removeEvents(wrapcontent, true);
  101.                 removeEvents(content, true);
  102.  
  103.                 var txt = html_beautify(response.response);
  104.  
  105.                 doc.head.innerHTML = '';
  106.                 content.innerHTML = '';
  107.                 content.removeAttribute('id');
  108.                 content.removeAttribute('class');
  109.                 content.removeAttribute('style');
  110.                 doc.title = 'view-source:' + urlpage;
  111.  
  112.                 GM_addStyle(GM_getResourceText(theme) + 'html,body,pre{margin:0;padding:0}.hljs{word-wrap:normal!important;white-space:pre!important;padding-left:4em;line-height:100%}.hljs::before{content:attr(data-lines);position:absolute;color:#d2d2d2;text-align:right;width:3.5em;left:-.5em;border-right:1px solid rgba(221, 221, 221, 0.36);padding-right:.5em}');
  113.  
  114.                 var output = doc.createElement('PRE');
  115.                 output.setAttribute('class', 'xml');
  116.                 output.textContent = txt;
  117.  
  118.                 content.appendChild(output);
  119.  
  120.                 hljs.highlightBlock(output);
  121.  
  122.                 var lines = txt.split('\n'),
  123.                     l = '';
  124.                 lines = lines ? lines.length : 0;
  125.                 for (var i = 0; i < lines; i++) {
  126.                     l += (i + 1) + '\n';
  127.                 }
  128.  
  129.                 output.setAttribute('data-lines', l);
  130.                 output.style.width = output.scrollWidth + 'px';
  131.  
  132.                 scrollByDragging(content);
  133.                 scrollByDragging(wrapcontent);
  134.  
  135.                 var attrUrl = doc.getElementsByClassName('hljs-attr');
  136.                 for (var j = 0; j < attrUrl.length; j++) {
  137.                     if (/\b(src|href\b)/.test(attrUrl[j].textContent)) {
  138.                         var link = attrUrl[j].nextSibling.nextSibling;
  139.                         var url = link.textContent.slice(1, -1);
  140.                         link.innerHTML = '<a href="' + url + '" target="_blank">' + url + '</a>';
  141.                     }
  142.                 }
  143.  
  144.             }
  145.         });
  146.     }
  147.  
  148.     GM_registerMenuCommand('View source', viewsource, 'u');
  149.  
  150.     if (/^application\/(xhtml+xml|xml|rss+xml)|text\/(html|xml)$/.test(doc.contentType)) {
  151.         doc.onkeydown = function (e) {
  152.  
  153.             // Alt+U
  154.             if (e.which === 85 && e.altKey) {
  155.                 e.preventDefault();
  156.  
  157.                 viewsource();
  158.             }
  159.         };
  160.     }
  161.  
  162. }());