chrome-plugin/content.js

let overDiv;
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "highlight") {
    if (request.message && !isOpen) {
      overDiv = document.createElement("div");
      overDiv.classList.add("bg-overDiv");
      // CSS样式内容
      var css = `
        .bg-overDiv{
            position: fixed;
            opacity: 0.5;
            background: rgb(20 122 218 / 85%);
            backdrop-filter: blur(5px);
            cursor: pointer;
            z-index: 99999999999;
            display: none;
        }`;

      // 创建一个style元素
      var style = document.createElement("style");
      style.classList.add("bg-style");

      // 为style元素添加CSS内容
      if (style.styleSheet) {
        style.styleSheet.cssText = css;
      } else {
        style.appendChild(document.createTextNode(css));
      }

      // 将style元素添加到body的末尾
      document.body.appendChild(style); //把这个样式加入body的最后

      document.body.appendChild(overDiv);
      isOpen = true;

      window.addEventListener("click", clickHandler);
      window.addEventListener("mousemove", mouseMoveHandler);
    }

    if (!request.message && isOpen) {
      document.querySelector(".bg-overDiv")?.remove();
      document.querySelector(".bg-style")?.remove();
      window.removeEventListener("click", clickHandler);
      window.removeEventListener("mousemove", mouseMoveHandler);
      isOpen = false;
    }
  }
});

let isOpen = false;

function clickHandler(e) {
  console.log(oldTarget);
}

// window.addEventListener("click", function (e) {
//   // e.preventDefault();
//   // e.stopPropagation();
//   console.log("点击");
// });
let oldTarget;

function mouseMoveHandler(e) {
  if (!isOpen) return;
  let target =
    findTarget(document.elementsFromPoint(e.clientX, e.clientY)) || e.target;
  if (oldTarget !== target) {
    overDiv.style.cssText = "";
    oldTarget = target;
    let rect = target.getClientRects();
    if (rect.length > 0) {
      rect = rect[0];
      overDiv.style.cssText =
        "display: block; top:" +
        rect.top +
        "px;left: " +
        rect.left +
        "px; width: " +
        rect.width +
        "px; height: " +
        rect.height +
        "px;";
    }
  }
  oldTarget = target;
  let oldEle = document.querySelector(".bg-overlay");
  if (oldEle) {
    oldEle.classList.remove("bg-overlay");
  }
  target.classList.add("bg-overlay");
}

function findTarget(eles) {
  for (let i = 0; i < eles.length; i++) {
    if (eles[i].classList.contains("bg-overDiv") === false) return eles[i];
  }
}
function findChildren(ele, x, y) {
  let clds = ele.children;
  let findEle = ele;
  if (clds.length > 0) {
    let len = clds.length;
    let cur = null;
    for (let i = 0; i < len; i++) {
      let rect = clds[i].getClientRects();
      if (!rect[0]) continue;
      if (
        rect[0].x + rect[0].width >= x &&
        rect[0].x <= x &&
        rect[0].y + rect[0].height >= y &&
        rect[0].y <= y
      ) {
        findEle = findChildren(clds[i], x, y);
        break;
      }
    }
  }
  return findEle;
}