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 = []; // 使用 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) {
          const url = new URL(node.src);
          if (url.pathname.startsWith("/lib")) return;
          fetch(node.src)
            .then((res) => res.text())
            .then((data) => {
              jsRequests.push({
                fileName: getFileName(node.src),
                url: node.src,
                data,
              });
            });

          //jsRequests.add(node.src);
        }
      });
    }
  }
});

function getFileName(url) {
  // 创建一个URL对象
  const urlObj = new URL(url);
  // 获取路径部分
  const pathname = urlObj.pathname;
  // 提取文件名
  const fileName = pathname.substring(pathname.lastIndexOf("/") + 1);
  return fileName;
}

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

// 获取当前加载的脚本
const scripts = Array.from(document.getElementsByTagName("script"));
scripts.forEach((script) => {
  if (script.src) {
    const url = new URL(script.src);
    if (url.pathname.startsWith("/lib")) return;
    fetch(script.src)
      .then((res) => res.text())
      .then((data) => {
        jsRequests.push({
          fileName: getFileName(script.src),
          url: script.src,
          data,
        });
      });
    // jsRequests.add(script.src);
  }
});

let isOpen = false;

function clickHandler(e) {
  // console.log(jsRequests);
  // console.log(oldTarget);
  chrome.runtime.sendMessage({
    action: "show_popup",
    jslist: jsRequests,
    targe: oldTarget.outerHTML,
    csslist: Array.from(document.styleSheets).map(({ href, cssRules, ownerNode }, index) => {
      return {
        href: href === null ? "自定义样式" + index : href,
        selectorTexts: Array.from(cssRules).map(({ selectorText }) => selectorText),
        styleCode: ownerNode instanceof HTMLStyleElement ? ownerNode.innerHTML : "" // 自定义的样式，需要提前存储
      }
    }),
    path: getNodePosition(oldTarget),
  });
}

function getNodePosition(element) {
  let id = [];
  if (element === document) {
    return [];
  } else {
    let parentNode = element.parentNode;
    let index = 0;
    for (let i = 0; parentNode.childNodes.length; i++) {
      let child = parentNode.childNodes[i];
      if (child.nodeName === "#text") continue;
      if (child === element) {
        id = [index];
        break;
      }
      index++;
    }
    return getNodePosition(element.parentNode).concat(id);
  }
}

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