|
|
@@ -0,0 +1,119 @@
|
|
|
+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;
|
|
|
+}
|
杨东明
9 tháng trước cách đây