通过鼠标右键获取DOM和元素选择器

牛逼
目前为 2023-02-20 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         通过鼠标右键获取DOM和元素选择器
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  牛逼
// @author       Luhuipeng
// @match        *
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @license MIT
// ==/UserScript==

(function() {
    'use strict';
const arr = []
function deep (node) {
  const parent = node.parentElement
  if (!parent || parent.tagName === 'HTML') return
  const children = parent.children
  for (let i = 0; i < children.length; i++) {
    if (children[i].isSameNode(node)) {
      // console.log(`${parent.tagName} 节点的第${i}个子节点 :nth-child(${i + 1})`)
      arr.push(`:nth-child(${i + 1})`)
      break
    }
  }
  deep(node.parentElement)
}
function getRes (node) {
  deep(node)
  // 从body开始
  const tmp = 'body>'
  const res = arr.reverse().join('>')
  return tmp + res
}
// 写入剪贴板
function copyToClipboard (text) {
  var input = document.createElement('input');
  input.setAttribute('value', text);
  document.body.appendChild(input);
  input.select();
  if (document.execCommand('copy')) {
    document.execCommand('copy');
  }
  document.body.removeChild(input);
}
// 获取当前鼠标指向的元素
function get_current_element (event) {
  var x = event.clientX, y = event.clientY,
    element = document.elementFromPoint(x, y);
  return element
}
// 鼠标点击事件
function track_mouse (event) {
  //阻止默认事件

  if (event.button == 2) {
    arr.length = 0
    var elementMouseIsOver = get_current_element(event)
    console.log('当前鼠标指向的元素是：', elementMouseIsOver)
    const res = getRes(elementMouseIsOver)
    console.log('res:', res)
    copyToClipboard(res)
    showTip()
    // alert('querySelector已复制到剪贴板')
    // 写入剪贴板
    console.log(document.querySelector(res))
  }
}

// 悬浮提示
function showTip () {
  const tip = document.createElement('div')
  tip.innerHTML = '元素选择器 已复制到剪贴板'
  // 元素水平居中 位置固定


  tip.style.cssText = `
    position: fixed;
    top: 200px;
    left: 500px;
    background: #000;
    color: #fff;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 5px;
    z-index: 9999;
    opacity: 0.8;
  `
  document.body.appendChild(tip)
  setTimeout(() => {
    document.body.removeChild(tip)
  }, 2000)
}

window.oncontextmenu = function (e) {
  e.preventDefault()
}
window.onmousedown = track_mouse
    // Your code here...
})();