init

scripts/content.js

@@ -0,0 +1,102 @@
+(function () {
+    // 清除之前的高亮样式
+    let previousHighlight = null;
+    let copyButton = null;
+    let isCopyModeEnabled = false;
+
+    // 创建复制按钮
+    function createCopyButton() {
+        const button = document.createElement('button');
+        button.innerHTML = '📋'; // 使用图标展示拷贝
+        button.style.position = 'absolute';
+        button.style.zIndex = '1000';
+        button.style.display = 'none';
+        button.style.background = 'transparent';
+        button.style.border = 'none';
+        button.style.cursor = 'pointer';
+        button.style.fontSize = '16px';
+        button.addEventListener('click', function () {
+            if (previousHighlight) {
+                const xpath = getElementXPath(previousHighlight);
+                const action = previousHighlight.tagName.toLowerCase() === 'input' ? 'input("your_text")' : 'click()';
+                const command = `web.find_by_xpath("${xpath}").${action}`;
+                navigator.clipboard.writeText(command).then(() => {
+                    console.log('Command copied to clipboard:', command);
+                });
+            }
+        });
+        document.body.appendChild(button);
+        return button;
+    }
+
+    // 获取元素的 XPath
+    function getElementXPath(element) {
+        let path = [];
+        while (element) {
+            let index = 1;
+            let sibling = element.previousElementSibling;
+            while (sibling) {
+                if (sibling.nodeName === element.nodeName) {
+                    index++;
+                }
+                sibling = sibling.previousElementSibling;
+            }
+            path.unshift(`${element.nodeName.toLowerCase()}[${index}]`);
+            element = element.parentNode;
+        }
+        return path.length ? '/' + path.join('/') : null;
+    }
+
+    // 监听鼠标移动事件
+    document.addEventListener('mousemove', function (event) {
+        if (!isCopyModeEnabled) return;
+
+        // 移除上一次高亮
+        if (previousHighlight) {
+            previousHighlight.style.border = '';
+            previousHighlight.style.borderRadius = '';
+            previousHighlight.style.boxShadow = '';
+            copyButton.style.display = 'none';
+        }
+
+        // 获取鼠标位置
+        const mouseX = event.clientX;
+        const mouseY = event.clientY;
+
+        // 获取鼠标下的元素
+        const element = document.elementFromPoint(mouseX, mouseY);
+
+        // 如果有元素，添加高亮样式并输出对应的 XPath
+        if (element && element !== document.body) {
+            previousHighlight = element;
+            element.style.border = '2px solid red';
+            element.style.borderRadius = '5px';
+
+            // 设置复制按钮位置并显示
+            const rect = element.getBoundingClientRect();
+            copyButton.style.left = `${rect.right + window.scrollX - 20}px`;
+            copyButton.style.top = `${rect.top + window.scrollY}px`;
+            copyButton.style.display = 'block';
+
+            // 输出 XPath
+            const xpath = getElementXPath(element);
+            console.log('Element XPath:', xpath);
+        }
+    });
+
+    // 监听消息以启用或禁用拷贝模式
+    chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
+        if (request.action === 'toggleCopyMode') {
+            isCopyModeEnabled = !isCopyModeEnabled;
+            if (!isCopyModeEnabled && previousHighlight) {
+                previousHighlight.style.border = '';
+                previousHighlight.style.borderRadius = '';
+                previousHighlight.style.boxShadow = '';
+                copyButton.style.display = 'none';
+            }
+            sendResponse({ copyModeEnabled: isCopyModeEnabled });
+        }
+    });
+
+    copyButton = createCopyButton();
+})();