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;
    }
  }
});

const jsRequests = new Set(); // 使用 Set 以避免重复的 URL

// 观察 DOM 的变化
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.type === "childList") {
      mutation.addedNodes.forEach((node) => {
        if (node.nodeName === "SCRIPT" && node.src) {
          jsRequests.add(node.src);
        }
      });
    }
  }
});

// 观察整个文档
observer.observe(document, { childList: true, subtree: true });

// 获取当前加载的脚本
const scripts = Array.from(document.getElementsByTagName("script"));
scripts.forEach((script) => {
  if (script.src) {
    jsRequests.add(script.src);
  }
});

let isOpen = false;

function clickHandler(e) {
  chrome.runtime.sendMessage({ action: "show_popup", data: "打开新页面" });
  console.log(jsRequests);
}

// 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;
}