Prompt for a dom

dom_select.js

function selectAnyElement() {
    return new Promise((resolve, reject) => {
        if(document.querySelector('.tinyNCM-Selected')){
            reject("Already selecting");
            return;
        }
        // create fixed tips
        let tips = dom("div",
            {
                style: {
                    position: "fixed", left: "10px",
                    margin: "10px",
                    top: "10px", width: "200px", height: "50px", background: "#ffffff88", border:  "1px solid #ffffff33",
                    pointerEvent: "none",
                    padding: "10px", zIndex: 9999, overflow: "auto",
                    boxShadow: "0 0 10px 0 rgba(0,0,0,0.5)",
                    color: "black",
                    borderRadius: "4px"
                }
                , innerText: "按 [Enter] 确定选择标红元素，按 [↑] 扩大选区，按 [↓] 缩小选区，按 [Esc] 取消"
            }, dom("style", { innerHTML: `.tinyNCM-Selected{ background: #ff000033; border: 3px solid red; box-sizing: border-box; }` }));
        document.body.appendChild(tips);

        let range = 0;
        let lastSelectedElement, lastHoveredElement;
        const updateSelectedElement = (selectedElement) => {
            if (lastSelectedElement !== selectedElement) {
                lastSelectedElement?.classList.remove("tinyNCM-Selected");
                selectedElement.classList.add("tinyNCM-Selected");
                lastSelectedElement = selectedElement;
            }
        }
        const mouseMoveListener = e => {
            const hoveredElement = document.elementFromPoint(e.clientX, e.clientY);
            if (lastHoveredElement !== hoveredElement) {
                lastHoveredElement = hoveredElement;
                range = 0;
                updateSelectedElement(getSelectedElement(hoveredElement, range))
            }
        }

        const generateQuerySelector = function (el) {
            if (el.tagName.toLowerCase() == "body")
                return "body";

            if (el.tagName.toLowerCase() == "html")
                return "HTML";
            var str = el.tagName;
            str += (el.id != "" && !el.id.startsWith("auto-")) ? "#" + el.id : "";
            if (el.className) {
                var classes = el.className.split(/\s/);
                for (var i = 0; i < classes.length; i++) {
                    str += "." + classes[i]
                }
            }
            return generateQuerySelector(el.parentNode) + " > " + str;
        }

        const getSelectedElement = (baseEle, r) => {
            for (let i = 0; i < r; i++)baseEle = baseEle.parentElement;
            return baseEle
        }

        const keydownListener = e => {
            // if is up or down
            if (e.key === "ArrowUp") {
                range++;
                e.preventDefault();
                updateSelectedElement(getSelectedElement(lastHoveredElement, range))
            } else if (e.key === "ArrowDown") {
                range--;
                console.log(range)
                if (range < 0) range = 0;
                e.preventDefault();
                updateSelectedElement(getSelectedElement(lastHoveredElement, range))
            } else if (e.key === "Enter") {
                document.removeEventListener("keydown", keydownListener);
                document.removeEventListener("mousemove", mouseMoveListener);
                tips.remove();
                lastSelectedElement.classList.remove("tinyNCM-Selected");
                let selector = generateQuerySelector(lastSelectedElement);
                resolve(selector);
            } else if (e.key === "Escape") {
                document.removeEventListener("keydown", keydownListener);
                document.removeEventListener("mousemove", mouseMoveListener);
                tips.remove();
                lastSelectedElement.classList.remove("tinyNCM-Selected");
                reject("Cancelled");
            }
        }

        document.addEventListener("mousemove", mouseMoveListener);
        document.addEventListener("keydown", keydownListener);
    });
}