From 98f8d002a848a59189e0346a79405dabccd0e11b Mon Sep 17 00:00:00 2001 From: woni <320753691@qq.com> Date: Tue, 17 Dec 2024 20:21:07 +0800 Subject: [PATCH] opt exp --- scripts/content.js | 78 ++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 75 insertions(+), 3 deletions(-) diff --git a/scripts/content.js b/scripts/content.js index aa9f0cc..a4c624e 100644 --- a/scripts/content.js +++ b/scripts/content.js @@ -3,6 +3,7 @@ let previousHighlight = null; let copyButton = null; let isCopyModeEnabled = false; + let copyMessage = null; // 创建复制按钮 function createCopyButton() { @@ -22,6 +23,10 @@ const command = `web.find_by_xpath("${xpath}").${action}`; navigator.clipboard.writeText(command).then(() => { console.log('Command copied to clipboard:', command); + copyMessage.style.display = 'block'; + setTimeout(() => { + copyMessage.style.display = 'none'; + }, 3000); }); } }); @@ -29,6 +34,28 @@ return button; } + // 创建复制消息提示 + function createCopyMessage() { + const message = document.createElement('div'); + message.innerHTML = '已拷贝! x '; + message.style.position = 'fixed'; + message.style.top = '10px'; + message.style.left = '50%'; + message.style.transform = 'translateX(-50%)'; + message.style.background = '#98FB98'; // 更好看的浅绿色背景 + message.style.color = 'white'; + message.style.padding = '10px'; + message.style.borderRadius = '5px'; + message.style.display = 'none'; + message.style.zIndex = '1001'; + message.style.fontSize = '16px'; // 增大字体 + message.querySelector('span').addEventListener('click', function () { + message.style.display = 'none'; + }); + document.body.appendChild(message); + return message; + } + // 获取元素的 XPath function getElementXPath(element) { if (element.id) { @@ -67,9 +94,9 @@ // 移除上一次高亮 if (previousHighlight) { + previousHighlight.style.background = ''; + previousHighlight.style.backgroundImage = ''; previousHighlight.style.border = ''; - previousHighlight.style.borderRadius = ''; - previousHighlight.style.boxShadow = ''; copyButton.style.display = 'none'; } @@ -83,7 +110,10 @@ // 如果有元素,添加高亮样式并输出对应的 XPath if (element && element !== document.body) { previousHighlight = element; - element.style.border = '2px solid red'; + element.style.background = 'rgba(255, 182, 193, 0.5)'; // 浅红色背景 + element.style.backgroundImage = 'linear-gradient(45deg, rgba(255, 182, 193, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 182, 193, 0.5) 50%, rgba(255, 182, 193, 0.5) 75%, transparent 75%, transparent)'; // 浅红色斜线 + element.style.backgroundSize = '10px 10px'; + element.style.border = '2px solid rgba(255, 105, 135, 0.8)'; // 边框颜色稍深 element.style.borderRadius = '5px'; // 设置复制按钮位置并显示 @@ -112,5 +142,47 @@ } }); + // 监听键盘事件以启用或禁用拷贝模式 + document.addEventListener('keydown', function (event) { + console.log(event.key); + if (event.altKey && event.key === 'r') { + isCopyModeEnabled = true; + console.log('Copy mode enabled'); + } else if (event.key === 'Escape') { + isCopyModeEnabled = false; + if (previousHighlight) { + previousHighlight.style.background = ''; + previousHighlight.style.backgroundImage = ''; + previousHighlight.style.border = ''; + copyButton.style.display = 'none'; + previousHighlight = null; + } + console.log('Copy mode disabled'); + } else if (event.ctrlKey && event.key === 'c' && 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); + const truncatedXPath = xpath.length > 20 ? xpath.substring(0, 20) + '...' : xpath; + document.getElementById('copied-xpath').innerText = truncatedXPath; + copyMessage.style.display = 'block'; + setTimeout(() => { + copyMessage.style.display = 'none'; + }, 3000); + isCopyModeEnabled = false; + if (previousHighlight) { + previousHighlight.style.background = ''; + previousHighlight.style.backgroundImage = ''; + previousHighlight.style.border = ''; + copyButton.style.display = 'none'; + previousHighlight = null; + } + console.log('Copy mode disabled'); + }); + } + }); + copyButton = createCopyButton(); + copyMessage = createCopyMessage(); })();