Greasy Fork is available in English.

提取HTML内容

利用此插件只需要按住alt/option键即可提取html元素 2022/8/19 15:35:23

// ==UserScript==
// @name        提取HTML内容
// @namespace   LiuZhengdong's Script
// @match       https://*/*// ==UserScript==
// @name        提取HTML内容
// @namespace   LiuZhengdong's Script
// @match       https://*/*
// @license     MIT
// @grant       none
// @version     1.4
// @author      Liu
// @run-at      document-body
// @description 利用此插件只需要按住alt/option键即可提取html元素 2022/8/19 15:35:23
// 
// ==/UserScript==

(() => {

  /**
   * 设置选取框的背景颜色
   */
  let backgroundColor = "rgba(255,0,0,0.5)"
  /**
   * 设置选取框的边框颜色
   */
  let borderColor = "rgba(255,0,0,0.9)"
  /**
   * 设置复制文本的前缀
   */
  let preffix = `Come from [${document.title}](${window.location.href});\n`

  /**
   * 此方法用于自定义html的净化方法
   */
  function purifyHTML(purehtml) {
    let purifiedhtml = purehtml
    return purifiedhtml;
  }

  /**
   * 此方法自定义最终的HTML如何处理
   */
  function handleHTML(finalhtml) {
    navigator.clipboard.writeText(finalhtml).then(() => {
      l("截取HTML成功")
    })
  }

  let selectBox = CreateSelectBox();
  window.onmousemove = (ev) => {
    /**
     * 如果没有按住alt/option键的话
     */
    if (!ev.altKey) {
      HideSelectBox(selectBox);
      return;
    }
    selectBox.style.display = ""


    let element = document.elementsFromPoint(ev.clientX, ev.clientY)[1];

    let eleRect = element.getBoundingClientRect();
    let clientX = eleRect.left;
    let clientY = eleRect.top;
    let margin = 5;

    /**
     * Box的点击事件
     */
    selectBox.onclick = () => {
      let purehtml = element.outerHTML;
      let purifiedhtml = purifyHTML(purehtml)
      let finalhtml = preffix + purifiedhtml
      // let finalhtml = ExtraPureText(element)
      handleHTML(finalhtml)
    }
    //console.log(clientX,clientY,window.scrollY)

    //console.log(eleRect.left - margin)


    selectBox.style.position = "absolute";
    selectBox.style.left = window.scrollX + clientX - margin + 'px';

    //console.log(eleRect)
    //console.log(selectBox)
    selectBox.style.top = window.scrollY + clientY - margin + 'px';
    selectBox.style.width = eleRect.width + 2 * margin + 'px';
    selectBox.style.height = eleRect.height + 2 * margin + 'px';
    selectBox.style.zIndex = "99"

    //console.log(selectBox)

  }




  function l(elements) {
    console.log(elements)
    return elements
  }

  /**
   * 初始化一个盒子
   */
  function CreateSelectBox() {
    let selectBox = document.createElement("div");
    selectBox.style.backgroundColor = backgroundColor
    selectBox.style.borderStyle = "dashed";
    selectBox.style.borderWidth = "5px";
    selectBox.style.borderRadius = "5px";
    selectBox.style.borderColor = borderColor;
    selectBox.style.opacity = "0.5";
    selectBox.style.transitionProperty = "all"
    selectBox.style.transitionDuration = "0.5s"
    document.body.appendChild(selectBox);
    return selectBox;
  }

  /**
   * 隐藏选择框
   */
  function HideSelectBox(selectBox) {
    selectBox.style.display = "none";
  }




  String.prototype.removeBlankLines = function () {

    return this.replace(/(\n[\s\t]*\r*\n)/g, '\n').replace(/^[\n\r\n\t]*|[\n\r\n\t]*$/g, '')
  }


  class htmlTools {
    /**
   * 获取纯文本
   */
    ExtraPureText(node) {
      let queue = []
      let output = ""
      function ExtraNode(node) {
        if (node.hasChildNodes()) {
          node.childNodes.forEach((childnode) => {
            let nodeName = childnode.nodeName.toLowerCase()
            if (nodeName == "a" || nodeName == "#text" || nodeName == "#comment") {
              queue.push(childnode)
            } else {
              ExtraNode(childnode)
            }
          })
        }
      }
      ExtraNode(node)

      queue.forEach((node) => {
        //l(node.nodeName)
        if (node.nodeName.toLowerCase() == "a") {
          output += `[${node.innerText}](${node.getAttribute("href")})`;
        } else if (node.nodeName == "#text") {
          output += node.nodeValue
        }
      })

      return output.removeBlankLines()
    }
  }

})()

// @grant       none
// @version     1.2
// @author      Liu
// @license     MIT
// @run-at      document-body
// @description 利用此插件只需要按住alt/option键即可提取html元素 2022/8/19 15:35:23
// 
// ==/UserScript==

(() => {

  /**
   * 设置选取框的背景颜色
   */
  let backgroundColor = "rgba(255,0,0,0.5)"
  /**
   * 设置选取框的边框颜色
   */
  let borderColor = "rgba(255,0,0,0.9)"
  /**
   * 设置复制文本的前缀
   */
  let preffix = `Come from [${document.title}](${window.location.href});\n`

  /**
   * 此方法用于自定义html的净化方法
   */
  function purifyHTML(purehtml) {
    let purifiedhtml = purehtml
    return purifiedhtml;
  }

  /**
   * 此方法自定义最终的HTML如何处理
   */
  function handleHTML(finalhtml) {
    navigator.clipboard.writeText(finalhtml).then(() => {
      l("截取HTML成功")
    })
  }

  let selectBox = CreateSelectBox();
  window.onmousemove = (ev) => {
    /**
     * 如果没有按住alt/option键的话
     */
    if (!ev.altKey) {
      HideSelectBox(selectBox);
      return;
    }
    selectBox.style.display = ""


    let element = document.elementsFromPoint(ev.clientX, ev.clientY)[2];
    let eleRect = element.getBoundingClientRect();
    let clientX = eleRect.left;
    let clientY = eleRect.top;
    let margin = 5;

    /**
     * Box的点击事件
     */
    selectBox.onclick = () => {
      let purehtml = element.outerHTML;
      let purifiedhtml = purifyHTML(purehtml)
      let finalhtml = preffix + purifiedhtml;
      handleHTML(finalhtml)
    }
    //console.log(clientX,clientY,window.scrollY)

    //console.log(eleRect.left - margin)


    selectBox.style.position = "absolute";
    selectBox.style.left = window.scrollX + clientX - margin + 'px';

    //console.log(eleRect)
    //console.log(selectBox)
    selectBox.style.top = window.scrollY + clientY - margin + 'px';
    selectBox.style.width = eleRect.width + 2 * margin + 'px';
    selectBox.style.height = eleRect.height + 2 * margin + 'px';
    selectBox.style.zIndex = "99"

    //console.log(selectBox)

  }




  function l(elements) {
    console.log(elements)
    return elements
  }

  /**
   * 初始化一个盒子
   */
  function CreateSelectBox() {
    let selectBox = document.createElement("div");
    selectBox.style.backgroundColor = backgroundColor
    selectBox.style.borderStyle = "dashed";
    selectBox.style.borderWidth = "5px";
    selectBox.style.borderRadius = "5px";
    selectBox.style.borderColor = borderColor;
    selectBox.style.opacity = "0.5";
    selectBox.style.transitionProperty = "all"
    selectBox.style.transitionDuration = "0.5s"
    document.body.appendChild(selectBox);
    return selectBox;
  }


  function HideSelectBox(selectBox) {
    selectBox.style.display = "none";
  }





})()