☰

鼠标右键获取DOM&元素选择器(开关版)

从luhuipeng代码上修改（https://greasyfork.org/zh-CN/scripts/460376），1. 增加开关 2. 支持mac control + 右键 唤起插件功能

// ==UserScript==
// @name        鼠标右键获取DOM&元素选择器(开关版)
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  从luhuipeng代码上修改（https://greasyfork.org/zh-CN/scripts/460376），1. 增加开关 2. 支持mac control + 右键 唤起插件功能
// @author       heyapeng
// @match        *://*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @license MIT
// ==/UserScript==

(function() {
    'use strict';
// 通过DOM元素获取元素选择器
let selector, x, y, scrollTop, visible = false
// 开关flag
let openFlag = true;
const openDiv = document.createElement('div')
const toggleCircle = document.createElement('div')

// 添加样式类
openDiv.className = 'toggle-switch'
toggleCircle.className = 'toggle-circle'

// 设置小圆的位置为打开状态
toggleCircle.style.left = '25px';

// 鼠标移入时展示开关
openDiv.addEventListener('mouseenter', () => {
    // openDiv.style.backgroundColor = '#aaa'
})

openDiv.addEventListener('mouseleave', () => {
    // openDiv.style.backgroundColor = '#ccc'
})

// 点击开关切换状态
openDiv.addEventListener('click', () => {
    const toggleSwitch = document.querySelector('.toggle-switch')
    openFlag = !openFlag
    toggleCircle.style.left = openFlag ? '25px' : '0' // 切换小圆的位置
    toggleSwitch.style.backgroundColor = openFlag ? 'rgba(57,219,86)' : 'rgba(250,52,74)'
})

// 拖拽功能
let isDragging = false;
let offsetX, offsetY;

openDiv.addEventListener('mousedown', (event) => {
    isDragging = true;
    offsetX = event.clientX - openDiv.getBoundingClientRect().left;
    offsetY = event.clientY - openDiv.getBoundingClientRect().top;
});

document.addEventListener('mousemove', (event) => {
    if (isDragging) {
        openDiv.style.position = 'fixed'; // 确保开关是固定定位
        openDiv.style.left = `${event.clientX - offsetX}px`;
        openDiv.style.top = `${event.clientY - offsetY}px`;
    }
});

document.addEventListener('mouseup', () => {
    isDragging = false; // 停止拖拽
});

// 将小半圆添加到开关中
openDiv.appendChild(toggleCircle)
document.body.appendChild(openDiv)

// 添加样式
const style = document.createElement('style')
style.textContent = `
    .toggle-switch {
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 25px;
        border-radius: 25px;
        background-color: rgba(57,219,86);
        cursor: pointer;
        transition: width 0.3s, background-color 0.3s;
        overflow: hidden;
        width: 50px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    }
    .toggle-switch:hover {
        background-color: #aaa;
    }
    .toggle-circle {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        transition: left 0.3s;
    }
`
document.head.appendChild(style)

if(openFlag){
    function getSelectorRes (el) {
  if (!(el instanceof Element)) return
  const path = []
  while (el.nodeType === Node.ELEMENT_NODE) {
    let selector = el.nodeName.toLowerCase()
    if (el.id) {
      selector += '#' + el.id
      path.unshift(selector)
      break
    } else {
      let sib = el,
        nth = 1
      while ((sib = sib.previousElementSibling)) {
        if (sib.nodeName.toLowerCase() == selector) nth++
      }
      if (nth != 1) selector += ':nth-of-type(' + nth + ')'
    }
    path.unshift(selector)
    el = el.parentNode
  }
  return path.join('>')
}
// 写入剪贴板
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) {
  x = event.clientX, y = event.clientY;
  let element = document.elementFromPoint(x, y);
  console.log('x:', x, 'y:', y)
  return element
}
// 鼠标点击事件
function track_mouse (event) {
  if (event.button == 2) {
    if (visible) return
    visible = true
    var elementMouseIsOver = get_current_element(event)
    console.log('当前鼠标指向的元素是：', elementMouseIsOver)
    scrollTop = getScrollTop()
    selector = getSelectorRes(elementMouseIsOver)
    console.log('result:', selector)
    const matchResult = elementMouseIsOver
    if (matchResult) {
      console.log(document.querySelector(selector))
      showConfirm()
    } else {
      // 写入剪贴板
      console.log('未匹配到元素')
    }
  }
  // 鼠标左键点击，不是弹窗区域就关闭弹窗
  if(event.button == 0) {
    var elementMouseIsOver = get_current_element(event)
    const confirm = document.querySelector('#confirm')
    if(confirm){
      if(confirm.contains(elementMouseIsOver)) return
      removeConfirm()
    }
  }
}

// 获取页面滚动条高度
function getScrollTop() {
  var scroll_top = 0;
  if (document.documentElement && document.documentElement.scrollTop) {
      scroll_top = document.documentElement.scrollTop;
  }
  else if (document.body) {
      scroll_top = document.body.scrollTop;
  }
  return scroll_top;
}

// 选择按钮的弹窗
function showConfirm () {
  const confirm = document.createElement('div')
  confirm.id = 'confirm'
  confirm.innerHTML = `
    <div class="confirm">
      <div class="confirm-content">
        <h3 style="text-align: center">当前鼠标选中的值</h3>
        <p>元素选择器 or x/y坐标 or 滚动条高度(scrollTop)？</p>
      </div>
      <div class="confirm-btn">
        <button class="btn confirm-btn-cancel">复制选择器</button>
        <button class="btn confirm-btn-ok">复制x、y坐标</button>
        <button class="btn confirm-btn-scroll">复制scrollTop</button>
      </div>
    </div>
  `
  confirm.style.cssText = `
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #000;
    color: #fff;
    padding: 10px 16px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    z-index: 9999;
    opacity: 1;
  `
  document.body.appendChild(confirm)
  const buttonGroup = confirm.querySelector('.confirm-btn')
  const cancel = confirm.querySelector('.confirm-btn-cancel')
  const ok = confirm.querySelector('.confirm-btn-ok')
  const scroll = confirm.querySelector('.confirm-btn-scroll')
  buttonGroup.style.cssText = `
    display: flex;
    justify-content: space-around;
    gap: 10px;
    margin: 10px;
  `
  for(let i = 0; i < buttonGroup.children.length; i++) {
    buttonGroup.children[i].style.cssText = `
      padding: 5px 10px;
      border-radius: 5px;
      color: #000;
      opacity: 1;
      background: #fff`
  }
  cancel.addEventListener('click', () => {
    copyToClipboard(selector)
    removeConfirm()
  })
  ok.addEventListener('click', () => {
    copyToClipboard(`${x} ${y}`)
    removeConfirm()
  })
  scroll.addEventListener('click', () => {
    copyToClipboard(scrollTop)
    removeConfirm()
  })
}

// 关闭弹窗
function removeConfirm () {
  if(!visible) return
  document.querySelector('#confirm').remove()
  visible = false
}

// 监听键盘esc键
document.onkeydown = function (e) {
  if (e.keyCode === 27){
    removeConfirm()
  }
}

window.oncontextmenu = function (e) {
  if(!openFlag)return
  e.preventDefault()
}
window.onmousedown = function(event) {
    if(!openFlag)return
    // 检查是否按下了Control键
    if (event.button === 0 && event.ctrlKey) {
        // 创建一个新的MouseEvent，模拟右键点击
        const rightClickEvent = new MouseEvent('mousedown', {
            button: 2,
            bubbles: true,
            cancelable: true,
            clientX: event.clientX,
            clientY: event.clientY,
        });
        track_mouse(rightClickEvent); // 触发右键点击逻辑
    } else {
        track_mouse(event); // 处理正常的鼠标事件
    }
}
}

})();