☰

Paper Clip (Save pages as XHTML/Markdown/Text)

Edit and save selection as clean XHTML, Markdown or Text file optimized for printing. Hotkey: Command + Shift + S.

  1. // ==UserScript== 
  2. // @name        Paper Clip (Save pages as XHTML/Markdown/Text)
  3. // @description Edit and save selection as clean XHTML, Markdown or Text file optimized for printing. Hotkey: Command + Shift + S.
  4. // @author      Schimon Jehudah, Adv.
  5. // @namespace   i2p.schimon.paperclip
  6. // @homepageURL https://greasyfork.org/scripts/465960-paper-clip
  7. // @supportURL  https://greasyfork.org/scripts/465960-paper-clip/feedback
  8. // @copyright   2023 - 2025, Schimon Jehudah (http://schimon.i2p)
  9. // @license     MIT; https://opensource.org/licenses/MIT
  10. // @require     https://unpkg.com/turndown/dist/turndown.js
  11. // @exclude     devtools://*
  12. // @match       file:///*
  13. // @match       *://*/*
  14. // @version     25.01.24
  15. // @run-at      document-end
  16. // @icon        data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48dGV4dCB5PSIuOWVtIiBmb250LXNpemU9IjkwIj7wn5OOPC90ZXh0Pjwvc3ZnPgo=
  17. // ==/UserScript==
  18.  
  19. /*
  20.  
  21. TODO
  22.  
  23. 0) ePUB and HTMLZ
  24.  
  25. 1) Display preview
  26.  
  27. 2) Bookmarklet
  28.  
  29. 3) jsPDF /parallax/jsPDF
  30.  
  31. 4) Remove style="background-image: url('https://torrentfreak.com/images/canada-featured.jpg');"
  32.    https://torrentfreak.com/movie-companies-cannot-use-piracy-notice-scheme-to-facilitate-class-action-230629/
  33.    
  34. 5) Save description too for MD and TXT. example: restoreprivacy.com
  35.  
  36. 6) Footnotes for TXT
  37.    * Collect all hyperlinks (array)
  38.    * Scan for text
  39.    NO
  40.    AGAIN
  41.    * For each hyperlink detected, enter an pointer of some sort
  42.    NO
  43.    AGAIN
  44.    * Detect hyperlink
  45.    * Place links into an array
  46.    * Replace each hyperlink by text and a number (i.e. [1])
  47.      * Replace hyperlink
  48.      * Append link to array
  49.    * Extract all links from array as footnotes
  50.  
  51. FIXME
  52.  
  53. 1) https://vision.gel.ulaval.ca/~klein/duke3d/
  54.  
  55. 2) Replace element-img enclosed in element-a by href of element-a
  56.    NO
  57.    Better use place these as footnotes
  58.  
  59. 3) Rense.com & epubbooks.com
  60.  
  61. 4) Replace element img with attribute alt to element span
  62.    https://datawrapper.dwcdn.net/qBzPR/6/
  63.  
  64. 5) Code (pre) is realized as one line questions/72294299/multiple-top-level-packages-discovered-in-a-flat-layout
  65.  
  66. */
  67.  
  68. // Check whether HTML; otherwise, exit.
  69. //if (!document.contentType == 'text/html')
  70. //if (document.doctype == null) return;
  71.  
  72. var
  73.   originalBackground, originalColor,
  74.   originalDisplay, originalOutline;
  75.  
  76. const time = new Date();
  77. const namespace = 'i2p.schimon.paperclip';
  78.  
  79. // FIXME set hotkey
  80. document.onkeyup = function(e) {
  81.   //if (e.ctrlKey && e.shiftKey && e.which == 49) { // Ctrl + Shift + 1
  82.   if (e.metaKey && e.shiftKey && e.which == 83) { // Command + Shift + S
  83.     console.info('Saving selection to HTML.')
  84.     generateXHTML();
  85.   }
  86. };
  87.  
  88. // TODO https://community.arm.com/support-forums/f/architectures-and-processors-forum/5814/what-is-difference-between-arm7-and-arm-cortex-m-series/13573#13573
  89. // event listener
  90. // event "click" and "mouseup" are the most sensible, albeit not accurate
  91. // event "mousemove" is the most manipulative (per user), yet (almost) the most accurate
  92. // event "select" seem to work only inside element input
  93. window.addEventListener('click',event => {
  94. //document.addEventListener('click',event => {
  95.   let selection = document.getSelection();
  96.   let btn = document.getElementById(namespace);
  97.   if (!btn && selection.toString().length) {
  98.     btn = createButton(event.pageX, event.pageY);
  99.     // TODO Move "append"s to a function
  100.     btn.append(actionButton('close'));
  101.     btn.append(actionButton('save'));
  102.     btn.append(actionButton('highlight'));
  103.     btn.append(actionButton('edit'));
  104.     btn.append(actionButton('send'));
  105.     document.body.append(btn);
  106.   } else
  107.   if (btn && !selection.toString().length) {
  108.     btn.remove();
  109.   }
  110. }, {passive: true});
  111.  
  112. // TODO declare variables once
  113. // NOTE consider "mousedown"
  114. // NOTE consider moving this functionality into function createButton()
  115. window.addEventListener('mousemove',function(){
  116.   let selection = document.getSelection();
  117.   let btn = document.getElementById(namespace);
  118.   if (btn && !selection.toString().length) {
  119.     btn.remove();
  120.   }
  121. });
  122.  
  123. function createButton(x, y) {
  124.   // create element
  125.   let btn = document.createElement(namespace);
  126.   // set content
  127.   btn.id = namespace;
  128.   // btn.textContent = '📎'; // 🖇️ 💾
  129.   // set position
  130.   btn.style.all = 'unset';
  131.   btn.style.position = 'absolute';
  132.   btn.style.left = x + 5 + 'px';
  133.   btn.style.top = y + 'px';
  134.   // set appearance
  135.   btn.style.direction = 'ltr';
  136.   btn.style.fontFamily = 'system-ui'; // cursive sans-serif emoji
  137.   btn.style.background = 'black'; // cornflowerblue, grey, rosybrown
  138.   btn.style.border = 'thin solid white';
  139.   //btn.style.borderWidth = 'thin';
  140.   //btn.style.border = 'solid'; // ridge
  141.   //btn.style.borderColor = 'darkred';
  142.   btn.style.borderRadius = '3px';
  143.   btn.style.padding = '1%';
  144.   //btn.style.marginTop = '100px';
  145.   //btn.style.marginLeft = '10px';
  146.   btn.style.minWidth = '30px';
  147.   btn.style.minHeight = '30px';
  148.   //btn.style.width = '10px';
  149.   //btn.style.height = '10px';
  150.   //btn.style.fontSize = '20px';
  151.   btn.style.zIndex = 10000;
  152.   btn.style.opacity = 0.7;
  153.   // center character
  154.   btn.style.justifyContent = 'center';
  155.   btn.style.alignItems = 'center';
  156.   btn.style.display = 'flex';
  157.   // disable selection marks
  158.   btn.style.outline = 'white'; // none
  159.   btn.style.userSelect = 'none';
  160.   btn.style.cursor = 'default';
  161.   btn.onmouseleave = () => {btn.style.opacity = 0.27;};
  162.   btn.onmouseover = () => {btn.style.opacity = 1;};
  163.   return btn;
  164. }
  165.  
  166. function actionButton(type) {
  167.   let content = getSelectedText().outerText; // textContent
  168.   content = content.replace(/%0D%0A%0D%0A/g, " ");
  169.   content = removeMultipleWhiteSpace(content);
  170.   let item = document.createElement('span');
  171.   item.id = `${namespace}-${type}`;
  172.   //item.style.borderRadius = '50%';
  173.   item.style.outline = 'none';
  174.   item.style.padding = '3px';
  175.   item.style.margin = '3px';
  176.   //item.style.fontSize = '10px';
  177.   item.style.fontWeight = 'bold';
  178.   item.style.color = 'white';
  179.   item.onmouseleave = () => {resetStyle();};
  180.   switch (type) {
  181.     case 'back':
  182.       item.textContent = '<';
  183.       item.onclick = () => {
  184.         item.parentElement.replaceChildren(
  185.           actionButton('close'),
  186.           actionButton('save'),
  187.           actionButton('highlight'),
  188.           actionButton('edit'),
  189.           actionButton('send')
  190.         )
  191.       };
  192.       break;
  193.     case 'close':
  194.       item.textContent = 'x';
  195.       item.title = 'Double-click to close';
  196.       item.ondblclick = () => {item.parentElement.remove();};
  197.       break;
  198.     case 'delete':
  199.       item.textContent = 'Delete';
  200.       item.title = 'Double-click to delete content';
  201.       item.ondblclick = () => {getSelectedText().remove();};
  202.       item.onmouseenter = () => {drawBorder('darkred', 'rgb(255 182 182)', '2px dashed hotpink');};
  203.       break;
  204.     case 'edit':
  205.       item.textContent = 'Edit';
  206.       //item.style.cursor = 'context-menu';
  207.       item.onclick = () => {
  208.         item.parentElement.replaceChildren(
  209.           actionButton('back'),
  210.           actionButton('delete'),
  211.           actionButton('editable')
  212.         )
  213.       };
  214.       break;
  215.     case 'editable':
  216.       item.onmouseenter = () => {drawBorder('darkblue', 'rgb(200 182 255)', '2px solid blue');};
  217.       if (getSelectedText().contentEditable == 'true') {
  218.         item.textContent = 'Stop Editing';
  219.         item.title = 'Turn off edit mode';
  220.       } else {
  221.         item.textContent = 'Start Editing';
  222.         item.title = 'Turn on edit mode';
  223.       }
  224.       item.onclick = () => {
  225.         let texts = toggleEditeMode();
  226.         item.textContent = texts[0];
  227.         item.title = texts[1];
  228.       }
  229.       break;
  230.     case 'email':
  231.       item.textContent = 'Email';
  232.       item.title = 'Send via Email as reference';
  233.       item.onclick = () => {window.location = `mailto:?subject=Content on ${location.hostname}&body=${document.title}%0D%0A%0D%0A${content}%0D%0A%0D%0A${location.hostname}${location.pathname}`};
  234.       break;
  235.     case 'highlight':
  236.       item.textContent = 'Mark';
  237.       item.title = 'Highlight text';
  238.       //item.onclick = () => {highlightSelection('black', 'khaki');};
  239.       item.onclick = () => {drawBorder('black', 'khaki', 'unset');};
  240.       break;
  241.     case 'irc':
  242.       item.textContent = 'IRC';
  243.       item.title = 'Send via IRC as reference';
  244.       item.onclick = () => {alert('This button will be supported in next update')};
  245.       break;
  246.     case 'markdown':
  247.       item.textContent = 'Markdown';
  248.       item.title = 'Save to Markdown';
  249.       item.onclick = () => {generateMD();}; //TODO URL reference to source URL
  250.       break;
  251.     case 'text':
  252.       item.textContent = 'Text';
  253.       item.title = 'Save to Plain Text';
  254.       item.onclick = () => {generateTXT();};
  255.       break;
  256.     case 'xhtml':
  257.       item.textContent = 'HTML';
  258.       item.title = 'Save to HTML (valid XHTML)';
  259.       item.onclick = () => {generateXHTML();};
  260.       break;
  261.     case 'xmpp':
  262.       item.textContent = 'XMPP';
  263.       item.title = 'Send via Jabber as reference';
  264.       item.onclick = () => {window.location = `xmpp:?subject=Content on ${location.hostname}&body=${document.title}%0D%0A%0D%0A${content}%0D%0A%0D%0A${location.hostname}${location.pathname}`};
  265.       break;
  266.     case 'save':
  267.       item.textContent = 'Save';
  268.       //item.style.cursor = 'context-menu';
  269.       item.onmouseenter = () => {drawBorder('black', 'rgb(250 250 210)', '2px double rosybrown');};
  270.       item.onclick = () => {
  271.       item.parentElement.replaceChildren(
  272.         actionButton('back'),
  273.         actionButton('xhtml'),
  274.         actionButton('markdown'),
  275.         actionButton('text')
  276.         )
  277.       };
  278.       break;
  279.     case 'send':
  280.       item.textContent = 'Send';
  281.       //item.style.cursor = 'context-menu';
  282.       item.onclick = () => {
  283.       item.parentElement.replaceChildren(
  284.         actionButton('back'),
  285.         actionButton('email'),
  286.         actionButton('irc'),
  287.         actionButton('xmpp')
  288.         )
  289.       };
  290.       break;
  291.   }
  292.   return item;
  293. }
  294.  
  295. function toggleEditeMode() {
  296.   let texts;
  297.   if (getSelectedText().contentEditable == 'true') {
  298.     getSelectedText().contentEditable = 'false';
  299.     texts = ['Continue Editing', 'Edit content'];
  300.   }
  301.   else {
  302.     getSelectedText().contentEditable = 'true';
  303.     texts = ['Stop Editing', 'Turn off edit mode'];
  304.   }
  305.   return texts;
  306. }
  307.  
  308. // FIXME
  309. function highlightSelection(color, background) {
  310.   let sel = document.getSelection();
  311.   originalColor = sel.style.color;
  312.   originalBackground = sel.style.background;
  313.   //sel.style.background = 'rgb(250 250 210)';
  314.   sel.style.background = background;
  315.   //sel.style.color = 'black'; // DarkRed
  316.   sel.style.color = color;
  317. }
  318.  
  319. function drawBorder(color, background, outline) {
  320. //function drawBorder(color, background, outline, method) {
  321.   let sel = getSelectedText();
  322.   //if (method == 'exactly') {
  323.   //  let sel = getSelectedText();
  324.   //} else {
  325.   //  let sel = document.getSelection();
  326.   //}
  327.   originalColor = sel.style.color;
  328.   originalOutline = sel.style.outline;
  329.   originalBackground = sel.style.background;
  330.   // Draw border around input without affecting style, layout or spacing
  331.   // /questions/29990319/draw-border-around-input-without-affecting-style-layout-or-spacing
  332.   //sel.style.outline = '3px solid';
  333.   //sel.style.background = 'lightgoldenrodyellow';
  334.   //sel.style.outline = '3px dashed';
  335.   //sel.style.background = 'rgba(250,250,210,0.3)';
  336.   //sel.style.outline = '3px double darkblue';
  337.   //sel.style.background = 'rgba(210,250,250,0.8)';
  338.   sel.style.outline = '2px double rosybrown';
  339.   sel.style.outline = outline;
  340.   //sel.style.background = 'rgba(250,250,210,0.7)';
  341.   sel.style.background = 'rgb(250 250 210)';
  342.   sel.style.background = background;
  343.   sel.style.color = 'black'; // DarkRed
  344.   sel.style.color = color;
  345. }
  346.  
  347. // TODO remove attribute 'style' of first element after 'body'
  348. // FIXME
  349. // http://gothicrichard.synthasite.com/what-i-fond-on-the-net.php
  350. // https://darknetdiaries.com/episode/65/
  351. function resetStyle() {
  352.   let sel = getSelectedText();
  353.   sel.style.color = originalColor;
  354.   sel.style.outline = originalOutline;
  355.   sel.style.background = originalBackground;
  356. }
  357.  
  358. function generateTXT() {
  359.   let data = getSelectedText().outerText;
  360.   data = `${data}
  361.  
  362. Created: ${time.toDateString()} ${time.toLocaleTimeString()}
  363. Source:  ${location.href}
  364. Title:   ${document.title}
  365.  
  366. Document generated using Paper Clip
  367. https://greasyfork.org/en/scripts/465960-paper-clip
  368. Save selected content into clean HTML, Markdown or Text
  369. `;
  370.   savePage(
  371.     data,
  372.     createFilename('txt'),
  373.     "text/plain"
  374.   );
  375. }
  376.  
  377. function generateMD() {
  378.   let domParser = new DOMParser();
  379.   let data = domParser.parseFromString('', 'text/html'); // Falkon: TrustedHTML
  380.   data.body.innerHTML = getSelectedText().outerHTML;
  381.   console.log(data)
  382.   let elementsToRemove = [
  383.     'button', 'form', 'frame', 'frameset', 'iframe', 'textarea',
  384.     //'svg', 'input', 'path',
  385.     'script', 'style',
  386.     'select'];
  387.   data = removeMediaElements(data, elementsToRemove);
  388.   let turndownService = new TurndownService();
  389.   data = turndownService.turndown(data);
  390.  
  391.   let title;
  392.   if (document.title) {
  393.     title = document.title;
  394.   } else {
  395.     title = location.pathname.split('/');
  396.     title = title[title.length-1];
  397.     //title = location.pathname.split('/');
  398.     //title = title[title.length-1];
  399.   }
  400.  
  401.   data = `# [${title}](${location.href})
  402. ${getDescription()}
  403. ${data}
  404.  
  405. ---
  406.  
  407. This page was saved at ${time.toDateString()} ${time.toLocaleTimeString()} from [${location.hostname}](${location.href})
  408. using [Paper Clip](https://greasyfork.org/en/scripts/465960-paper-clip) and converted into Markdown with [Turndown](https://mixmark-io.github.io/turndown/)
  409. `;
  410.   console.log(data)
  411.   savePage(
  412.     data,
  413.     createFilename('md'),
  414.     "text/plain"
  415.   );
  416. }
  417.  
  418. function generateXHTML() {
  419.   let domParser = new DOMParser();
  420.   let data = domParser.parseFromString('', 'text/html'); // Falkon: TrustedHTML
  421.   // set title
  422.   if (document.title.length > 0) {
  423.     data.title = document.title;
  424.   }
  425.   // set base
  426.   // NOTE do not "set base".
  427.   // TODO Complete links of ./ and / etc. by fetching complete
  428.   //      url and replace href with it (it = complete url)
  429.   base = data.createElement('base');
  430.   base.href = data.head.baseURI; // location.href;
  431.   data.head.append(base);
  432.   const metaTag = [
  433.     'url',
  434.     'date',
  435.     'creator',
  436.     'user-agent',
  437.     //'connection-type',
  438.     'content-type-sourced',
  439.     'charset-sourced'
  440.     //'character-count'
  441.     //'word-count'
  442.   ];
  443.   const metaValue = [
  444.     location.href,
  445.     time,
  446.     namespace,
  447.     navigator.userAgent,
  448.     //navigator.connection.effectiveType,
  449.     document.contentType,
  450.     document.charset
  451.   ];
  452.   for (let i = 0; i < metaTag.length; i++) {
  453.     let meta = document.createElement('meta');
  454.     meta.name = metaTag[i];
  455.     meta.content = metaValue[i];
  456.     data.head.append(meta);
  457.   }
  458.   const metaData = [
  459.     //'content-type',
  460.     'viewport',
  461.     'description',
  462.     'keywords',
  463.     'generator'
  464.   ];
  465.   for (let i = 0; i < metaData.length; i++) {
  466.     let meta = document.createElement('meta');
  467.     meta.name = metaData[i] + '-imported';
  468.        try {
  469.          meta.content = document.querySelector('meta[name="' + metaData[i] + '" i]')
  470.            // .querySelector('meta[http-equiv="' + metaData[i] + '" i]')
  471.            .content;
  472.        }
  473.        catch(err) {
  474.          console.warn(metaData[i] + ': Not found.');
  475.          continue;
  476.        }
  477.     data.head.append(meta);
  478.   }
  479.   if (document.dir == 'rtl') {
  480.     data.dir = 'rtl';
  481.   }
  482.   data.body.innerHTML = getSelectedText().outerHTML;
  483.   data = listMediaElements(data);
  484.   let elementsToRemove = [
  485.     'audio', 'embed', 'img', 'video', 'button',
  486.     'form', 'frame', 'frameset', 'iframe', 'textarea',
  487.     'svg', 'input', 'path',
  488.     'script', 'style',
  489.     'select'];
  490.   data = removeMediaElements(data, elementsToRemove);
  491.   data = removeAttributes(data);
  492.   //data = replaceMediaByLinks(data);
  493.   data = correctLinks(data);
  494.   data = removeEmptyElements(data);
  495.   data = removeCommentNodes(data);
  496.   //data = removeWhitespaceFromNodes(data, ['code', 'pre']);
  497.   //data = replaceCodeAndPre(data);
  498.   //data = setStylesheet(data);
  499.   data = new XMLSerializer().serializeToString(data);
  500.   //data = formatPage(data);
  501.   //data = minify(data);
  502.   //data = removeComments(data);
  503.   data = removeMultipleWhiteSpace(data);
  504.   savePage(
  505.     data,
  506.     createFilename('xhtml'),
  507.     "text/html"
  508.   );
  509. }
  510.  
  511. // FIXME
  512. // body::-webkit-scrollbar{width:10.666666666666666px;height:10.666666666666666px;}
  513. function setStylesheet(node) {
  514.   let cssStylesheet = document.createElement('style');
  515.   document.head.append(cssStylesheet);
  516.   cssStylesheet.type = 'text/css';
  517.   if (node.querySelector('code') ||
  518.       node.querySelector('pre')) {
  519.     cssStylesheet.textContent = 'code, pre {overflow: auto; display: grid; max-width: 100vw;}';
  520.   }
  521.   return node;
  522. }
  523.  
  524. // TODO Place plain text inside elements <code> <pre> (eliminate <span>, <br> etc.)
  525. // TODO Eliminate all elements without changing original text layout
  526. function replaceCodeAndPre(node) { // correctCodeElements
  527.   const codeElements = node.getElementsByTagName('code');
  528.   const preElements = node.getElementsByTagName('pre');
  529.   // Replace content of all code elements with their own outerText
  530.   for (let i = 0; i < codeElements.length; i++) {
  531.     const element = codeElements[i];
  532.     element.outerText = element.outerText;
  533.   }
  534.   // Replace content of all pre elements with their own outerText
  535.   for (let i = 0; i < preElements.length; i++) {
  536.     const element = preElements[i];
  537.     element.outerText = element.outerText;
  538.   }
  539.   return node;
  540. }
  541.  
  542. function replaceMediaByLinks(node) {
  543.   for (const imgElement of node.querySelectorAll('img')) {
  544.     // Create a new <a> element
  545.     const aElement = node.createElement('a');
  546.     aElement.setAttribute.href = imgElement.src;
  547.     // Copy the attributes and contents of the <img> element to the new <a> element
  548.     for (let i = 0, l = imgElement.attributes.length; i < l; i++) {
  549.       const name = imgElement.attributes.item(i).name;
  550.       const value = imgElement.attributes.item(i).value;
  551.       aElement.setAttribute(name, value);
  552.     }
  553.     aElement.textContent = imgElement.src;
  554.     // Replace the <img> element with the new <a> element
  555.     imgElement.parentNode.replaceChild(aElement, imgElement);
  556.   }
  557.   return node;
  558. }
  559.  
  560. // TODO
  561. // Catch all elements with attribute
  562. // contains URL, and
  563. // starts with / (add hostname), and
  564. // contains / (add hostname with first parent path), and
  565. // validate using URL API
  566. function listMediaElements(node) {
  567.   let unique = []
  568.   const elements = [
  569.     'audio', 'embed', 'img', 'svg', 'video',
  570.     'frame', 'frameset', 'iframe', '[data-source]',
  571.   ];
  572.   // Find element and add its URL as metadata
  573.   for (let i = 0; i < elements.length; i++) {
  574.     for (const element of node.querySelectorAll(elements[i])) {
  575.       const attributes = ['src', 'data-img-url', 'data-source'];
  576.       for (const attribute of attributes) {
  577.         if (element.getAttribute(attribute) &&
  578.             !unique.includes(element.getAttribute(attribute))) {
  579.           let attr = element.getAttribute(attribute)
  580.           unique.push(attr)
  581.           let meta = node.createElement('meta');
  582.           meta.name = `extracted-media-${element.nodeName.toLowerCase()}`; // Was ${elements[i]}
  583.           meta.content = attr;
  584.           node.head.append(meta);
  585.         }
  586.       }
  587.     }
  588.   }
  589.   return node;
  590. }
  591.  
  592. //Remove graphics, media and scripts
  593. function removeMediaElements(node, elements) {
  594.   /*
  595.   TODO Remove span and preserve its contents
  596.   Movespan content to its parent element/node
  597.   /questions/9848465/js-remove-a-tag-without-deleting-content
  598.  
  599.   FIXME Couldn't remove "iframe" for
  600.   https://www.dailymail.co.uk/health/article-3460321/How-Big-Pharma-greed-killing-tens-thousands-world-Patients-medicated-given-profitable-drugs-little-proven-benefits-leading-doctors-warn.html
  601.   */
  602.   media = ['audio', 'embed', 'frame', 'frameset', 'iframe', 'img', 'video'];
  603.   for (let i = 0; i < elements.length; i++) {
  604.     for (const element of node.querySelectorAll(elements[i])) {
  605.       if (media.includes(elements[i])) {
  606.         let ele = node.createElement('a');
  607.         //ele.textContent = `Click to view removed HTML <${elements[i]}> media element.`.toUpperCase();
  608.  
  609.         //ele.textContent = `[HIDDEN MEDIA]`;
  610.         //ele.title = `${elements[i]} media element`;
  611.         //ele.href = element.getAttribute('src');
  612.  
  613.         //let ele = node.createElement('pre')
  614.         //let ele = node.createElement('code')
  615.         //ele.textContent = `${element.getAttribute('src')}`;
  616.         //ele.title = 'Hidden media';
  617.         element.parentNode.insertBefore(ele, element.nextSibling); // insertAfter
  618.       }
  619.       element.remove();
  620.     }
  621.   }
  622.   return node;
  623. }
  624.  
  625. // Remove all attributes
  626. function removeAttributes(node) {
  627.   // /questions/1870441/remove-all-attributes
  628.   const removeAttributes = (element) => {
  629.     for (let i = 0; i < element.attributes.length; i++) {
  630.       if (element.attributes[i].name != 'href' &&
  631.           element.attributes[i].name != 'name' &&
  632.           element.attributes[i].name != 'id') {
  633.         element.removeAttribute(element.attributes[i].name);
  634.       }
  635.     }
  636.   };
  637.   for (const element of node.querySelectorAll('body *')) {
  638.     removeAttributes(element);
  639.   }
  640.   return node;
  641. }
  642.  
  643. // Correct links for offline usage
  644. function correctLinks(node) {
  645.   for (const element of node.querySelectorAll('a')) {
  646.     //if (element.hash) {
  647.     //if (element.hostname + element.pathname == location.hostname + location.pathname) {
  648.     if (element.href.startsWith(element.baseURI + '#')) {
  649.       element.href = element.hash;
  650.     }
  651.   }
  652.   return node;
  653. }
  654.  
  655. function removeEmptyElements (node) {
  656.   for (const element of node.body.querySelectorAll('*')) {
  657.     //if (/^\s*$/.test(element.outerText)) {
  658.     if (element.tagName.toLowerCase() != 'br' && /^\s*$/.test(element.textContent)) {
  659.       element.remove();
  660.     }
  661.   }
  662.   return node;
  663. }
  664.  
  665. function removeCommentNodes(node) {
  666.   const nodeIterator = node.createNodeIterator(
  667.     node,  // Starting node, usually the document body
  668.     NodeFilter.SHOW_ALL,  // NodeFilter to show all node types
  669.     null,  
  670.     false  
  671.   );
  672.   let currentNode;
  673.   // Loop through each node in the node iterator
  674.   while (currentNode = nodeIterator.nextNode()) {
  675.     if (currentNode.nodeName == '#comment') {
  676.       currentNode.remove();
  677.       console.log(currentNode.nodeName);
  678.     }
  679.   }
  680.   return node;
  681. }
  682.  
  683. function removeComments(str) {
  684.   return str.replace(/<!--[\s\S]*?-->/g, '');
  685. }
  686.  
  687. function removeWhitespaceFromNodes(node, excludedTags) {
  688.   const removeWhitespace = (node) => {
  689.     if (node.nodeType === Node.TEXT_NODE) {
  690.       node.textContent = node.textContent.trim();
  691.     } else if (
  692.       node.nodeType === Node.ELEMENT_NODE &&
  693.       !excludedTags.includes(node.tagName.toLowerCase())
  694.     ) {
  695.       for (let i = 0; i < node.childNodes.length; i++) {
  696.         removeWhitespace(node.childNodes[i]);
  697.       }
  698.     }
  699.   };
  700.   removeWhitespace(node);
  701.   return node;
  702. }
  703.  
  704. function removeMultipleWhiteSpace(str) {
  705.   //return str.replace(/\s+/g, ' ');
  706.   //return str.replace(/(?<!<code>)\s+(?![^<]*<\/code>)/g, " ");
  707.   /*
  708.   return str.replace(/(<(code|pre|code-[^\s]+)[^>]*>.*?<\/\2>)|(\s+)/gs, function(match, p1, p2, p3) {
  709.   if (p1) { // if the match is a code block
  710.     return p1; // return the complete code block as is
  711.   } else { // if the match is whitespace outside of a code block
  712.     return " "; // replace with a single space
  713.   }
  714.   });
  715.   */
  716.   return str.replace(/(<(code|pre)[^>]*>.*?<\/\2>)|(\s+)/gs, function(match, p1, p2, p3) {
  717.     if (p1) { // if the match is a code block
  718.       return p1; // return the complete code block as is
  719.     } else { // if the match is whitespace outside of a code block
  720.       return " "; // replace with a single space
  721.     }
  722.   });
  723. }
  724.  
  725. // Get parent element of beginning (and end) of selected text
  726. // /questions/32515175/get-parent-element-of-beginning-and-end-of-selected-text
  727. function getSelectedText() {
  728.   var selection = document.getSelection();
  729.   var selectionBegin = selection.anchorNode.parentNode;
  730.   var selectionEnd = selection.focusNode.parentNode;
  731.   var selectionCommon =
  732.     findFirstCommonAncestor
  733.     (
  734.       selectionBegin,
  735.       selectionEnd
  736.     );
  737.   return selectionCommon;
  738. }
  739.  
  740. // find common parent
  741. // /questions/2453742/whats-the-best-way-to-find-the-first-common-parent-of-two-dom-nodes-in-javascri
  742. function findFirstCommonAncestor(nodeA, nodeB) {
  743.   let range = new Range();
  744.   range.setStart(nodeA, 0);
  745.   range.setEnd(nodeB, 0);
  746.   // There's a compilication, if nodeA is positioned after
  747.   // nodeB in the document, we created a collapsed range.
  748.   // That means the start and end of the range are at the
  749.   // same position. In that case `range.commonAncestorContainer`
  750.   // would likely just be `nodeB.parentNode`.
  751.   if(range.collapsed) {
  752.     // The old switcheroo does the trick.
  753.     range.setStart(nodeB, 0);
  754.     range.setEnd(nodeA, 0);
  755.   }
  756.   return range.commonAncestorContainer;
  757. }
  758.  
  759. // minify html
  760. // /questions/23284784/javascript-minify-html-regex
  761. // TODO Don't apply on code/pre
  762. function minify( s ){
  763.   return s ? s
  764.     .replace(/\>[\r\n ]+\</g, "><")  // Removes new lines and irrelevant spaces which might affect layout, and are better gone
  765.     .replace(/(<.*?>)|\s+/g, (m, $1) => $1 ? $1 : ' ')
  766.     .trim()
  767.     : "";
  768. }
  769.  
  770. // format html
  771. // /questions/3913355/how-to-format-tidy-beautify-in-javascript
  772. // TODO Don't inset span in code/pre
  773. function formatPage(html) {
  774.   var tab = '\t';
  775.   var result = '';
  776.   var indent= '';
  777.   html.split(/>\s*</).forEach(function(element) {
  778.     if (element.match( /^\/\w/ )) {
  779.         indent = indent.substring(tab.length);
  780.     }
  781.     result += indent + '<' + element + '>\r\n';
  782.     if (element.match( /^<?\w[^>]*[^\/]$/ ) && !element.startsWith("input")  ) { 
  783.       indent += tab;              
  784.     }
  785.   });
  786.   return result.substring(1, result.length-3);
  787. }
  788.  
  789. function getDescription() {
  790.   let desc;
  791.   if (document.querySelector('meta[name=description]')) {
  792.     desc = '## ' + document.querySelector('meta[name=description]').content + '\n';
  793.   } else
  794.   if (document.querySelector('meta[itemprop=description]')) {
  795.     desc = '## ' + document.querySelector('meta[itemprop=description]').content + '\n';
  796.   } else {
  797.     desc = '';
  798.   }
  799.   return desc;
  800. }
  801.  
  802. function createFilename(extension) {
  803.  
  804.   let day, now, timestamp, title, filename;
  805.  
  806.   day = time
  807.     .toISOString()
  808.     .split('T')[0];
  809.  
  810.   now = [
  811.     time.getHours(),
  812.     time.getMinutes(),
  813.     time.getSeconds()
  814.   ];
  815.  
  816.   for (let i = 0; i < now.length; i++) { 
  817.     if (now[i] < 10) {now[i] = '0' + now[i];}
  818.   }
  819.  
  820.   timestamp = [
  821.     day,
  822.     now.join('-')
  823.   ];
  824.  
  825. /*
  826.   address = [
  827.     location.hostname,
  828.     location.pathname.replace(/\//g,'_')
  829.   ]
  830.  
  831.   filename =
  832.     address.join('') +
  833.     '_' +
  834.     timestamp.join('_') +
  835.     '.html';
  836. */
  837.  
  838.   if (document.title) {
  839.     title = document.title;
  840.   } else {
  841.     title = location.pathname.split('/');
  842.     title = title[title.length-1];
  843.   }
  844.  
  845.   // TODO ‘ ’ ·
  846.   title = title.replace(/[\/?<>\\:*|'"\.,]/g, '');
  847.   title = title.replace(/ /g, '_');
  848.   title = title.replace(/-/g, '_');
  849.   title = title.replace(/__/g, '_');
  850.  
  851.   filename =
  852.     title + // TODO replace whitespace by underscore
  853.     '_' +
  854.     timestamp.join('_') +
  855.     `.${extension}`;
  856.  
  857.   return filename.toLowerCase();
  858.  
  859. }
  860.  
  861. // export file
  862. // /questions/4545311/download-a-file-by-jquery-ajax
  863. // /questions/43135852/javascript-export-to-text-file
  864. var savePage = (function () {
  865.   var a = document.createElement("a");
  866.   // document.body.appendChild(a);
  867.   // a.style = "display: none";
  868.   return function (fileData, fileName, fileType) {
  869.     var blob = new Blob([fileData], {type: fileType}),
  870.         url = window.URL.createObjectURL(blob);
  871.     a.href = url;
  872.     a.download = fileName;
  873.     a.click();
  874.     window.URL.revokeObjectURL(url);
  875.   };
  876. }());