diff --git a/index.html b/index.html index 126e983..b5578f4 100644 --- a/index.html +++ b/index.html @@ -1,63 +1,63 @@ - - - - 影刀 PY 助手 - - - - -

Copy mode is off

- - - + + + + 影刀 PY 助手 + + + + +

Copy mode is off

+ + + diff --git a/manifest.json b/manifest.json index bbdd9d9..85f8012 100644 --- a/manifest.json +++ b/manifest.json @@ -1,40 +1,40 @@ -{ - "name": "Xbot PY Helper", - "description": "自动生成 网页自动化代码", - "version": "0.1.2", - "manifest_version": 3, - "permissions": [ - "activeTab", - "scripting", - "clipboardWrite" - ], - "background": { - "service_worker": "scripts/background.js" - }, - "action": { - "default_popup": "index.html", - "default_icon": "images/yingdao-16x16.png" - }, - "content_scripts": [ - { - "matches": [ - "" - ], - "js": [ - "scripts/content.js" - ], - "run_at": "document_idle", - "all_frames": true - } - ], - "web_accessible_resources": [ - { - "resources": [ - "scripts/popup.js" - ], - "matches": [ - "" - ] - } - ] -} +{ + "name": "Xbot PY Helper", + "description": "自动生成 网页自动化代码", + "version": "0.1.2", + "manifest_version": 3, + "permissions": [ + "activeTab", + "scripting", + "clipboardWrite" + ], + "background": { + "service_worker": "scripts/background.js" + }, + "action": { + "default_popup": "index.html", + "default_icon": "images/yingdao-16x16.png" + }, + "content_scripts": [ + { + "matches": [ + "" + ], + "js": [ + "scripts/content.js" + ], + "run_at": "document_idle", + "all_frames": true + } + ], + "web_accessible_resources": [ + { + "resources": [ + "scripts/popup.js" + ], + "matches": [ + "" + ] + } + ] +} diff --git a/readme.md b/readme.md index 062dad8..8d91dfc 100644 --- a/readme.md +++ b/readme.md @@ -1,12 +1,12 @@ -# 影刀YD助手 -## 项目介绍 - - -## 功能介绍 -鼠标悬浮到元素上, 自动生成影刀代码 - -## 优化项目 - -1. 生成xpath的规则 -2. 支持跨域 -3. 支持开始和关闭拷贝模式 +# 影刀YD助手 +## 项目介绍 + + +## 功能介绍 +鼠标悬浮到元素上, 自动生成影刀代码 + +## 优化项目 + +1. 生成xpath的规则 +2. 支持跨域 +3. 支持开始和关闭拷贝模式 diff --git a/scripts/background.js b/scripts/background.js index 05d0674..22c13fb 100644 --- a/scripts/background.js +++ b/scripts/background.js @@ -1,32 +1,32 @@ -let isCopyModeEnabled = false; - -chrome.action.onClicked.addListener(function (tab) { - chrome.scripting.executeScript({ - target: { tabId: tab.id }, - function: toggleCopyMode - }); -}); - -chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { - if (request.action === 'toggleCopyMode') { - isCopyModeEnabled = !isCopyModeEnabled; - chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) { - chrome.tabs.sendMessage(tabs[0].id, { action: 'toggleCopyMode' }, function (response) { - sendResponse({ copyModeEnabled: isCopyModeEnabled }); - }); - }); - return true; // Keep the message channel open for sendResponse - } else if (request.action === 'getCopyModeStatus') { - sendResponse({ copyModeEnabled: isCopyModeEnabled }); - } -}); - -function toggleCopyMode() { - chrome.runtime.sendMessage({ action: 'toggleCopyMode' }, function (response) { - if (response.copyModeEnabled) { - console.log('Copy mode enabled'); - } else { - console.log('Copy mode disabled'); - } - }); -} +let isCopyModeEnabled = false; + +chrome.action.onClicked.addListener(function (tab) { + chrome.scripting.executeScript({ + target: { tabId: tab.id }, + function: toggleCopyMode + }); +}); + +chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { + if (request.action === 'toggleCopyMode') { + isCopyModeEnabled = !isCopyModeEnabled; + chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) { + chrome.tabs.sendMessage(tabs[0].id, { action: 'toggleCopyMode' }, function (response) { + sendResponse({ copyModeEnabled: isCopyModeEnabled }); + }); + }); + return true; // Keep the message channel open for sendResponse + } else if (request.action === 'getCopyModeStatus') { + sendResponse({ copyModeEnabled: isCopyModeEnabled }); + } +}); + +function toggleCopyMode() { + chrome.runtime.sendMessage({ action: 'toggleCopyMode' }, function (response) { + if (response.copyModeEnabled) { + console.log('Copy mode enabled'); + } else { + console.log('Copy mode disabled'); + } + }); +} diff --git a/scripts/content.js b/scripts/content.js index de84f51..a86221b 100644 --- a/scripts/content.js +++ b/scripts/content.js @@ -1,191 +1,191 @@ -(function () { - - console.log("Content script injected into:", window.location.href); - - // 清除之前的高亮样式 - let previousHighlight = null; - let copyButton = null; - let isCopyModeEnabled = false; - let copyMessage = null; - - // 创建复制按钮 - 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); - copyMessage.style.display = 'block'; - setTimeout(() => { - copyMessage.style.display = 'none'; - }, 3000); - }); - } - }); - document.body.appendChild(button); - 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 = '#1E3A8A'; - message.style.color = '#F9FAFB'; - 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) { - return `//*[@id="${element.id}"]`; - } - - const parts = []; - while (element && element.nodeType === Node.ELEMENT_NODE) { - let selector = element.nodeName.toLowerCase(); - if (element.className) { - selector += `[@class="${element.className}"]`; - } else if (element.textContent.trim()) { - selector += `[text()="${element.textContent.trim()}"]`; - } else if (element.id) { - selector += `[@id="${element.id}"]`; - } else { - let sibling = element; - let index = 1; - while (sibling.previousElementSibling) { - sibling = sibling.previousElementSibling; - if (sibling.nodeName.toLowerCase() === selector) { - index++; - } - } - selector += `[${index}]`; - } - parts.unshift(selector); - element = element.parentNode; - } - return parts.length ? '/' + parts.join('/') : null; - } - - // 监听鼠标移动事件 - document.addEventListener('mousemove', function (event) { - if (!isCopyModeEnabled) return; - - // 移除上一次高亮 - if (previousHighlight) { - previousHighlight.style.background = ''; - previousHighlight.style.backgroundImage = ''; - previousHighlight.style.border = ''; - 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.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'; - - // 设置复制按钮位置并显示 - 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 }); - } - }); - - // 监听键盘事件以启用或禁用拷贝模式 - 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(); -})(); +(function () { + + console.log("Content script injected into:", window.location.href); + + // 清除之前的高亮样式 + let previousHighlight = null; + let copyButton = null; + let isCopyModeEnabled = false; + let copyMessage = null; + + // 创建复制按钮 + 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); + copyMessage.style.display = 'block'; + setTimeout(() => { + copyMessage.style.display = 'none'; + }, 3000); + }); + } + }); + document.body.appendChild(button); + 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 = '#1E3A8A'; + message.style.color = '#F9FAFB'; + 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) { + return `//*[@id="${element.id}"]`; + } + + const parts = []; + while (element && element.nodeType === Node.ELEMENT_NODE) { + let selector = element.nodeName.toLowerCase(); + if (element.className) { + selector += `[@class="${element.className}"]`; + } else if (element.textContent.trim()) { + selector += `[text()="${element.textContent.trim()}"]`; + } else if (element.id) { + selector += `[@id="${element.id}"]`; + } else { + let sibling = element; + let index = 1; + while (sibling.previousElementSibling) { + sibling = sibling.previousElementSibling; + if (sibling.nodeName.toLowerCase() === selector) { + index++; + } + } + selector += `[${index}]`; + } + parts.unshift(selector); + element = element.parentNode; + } + return parts.length ? '/' + parts.join('/') : null; + } + + // 监听鼠标移动事件 + document.addEventListener('mousemove', function (event) { + if (!isCopyModeEnabled) return; + + // 移除上一次高亮 + if (previousHighlight) { + previousHighlight.style.background = ''; + previousHighlight.style.backgroundImage = ''; + previousHighlight.style.border = ''; + 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.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'; + + // 设置复制按钮位置并显示 + 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 }); + } + }); + + // 监听键盘事件以启用或禁用拷贝模式 + 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(); +})(); diff --git a/scripts/popup.js b/scripts/popup.js index 7a57f68..034b2bb 100644 --- a/scripts/popup.js +++ b/scripts/popup.js @@ -1,20 +1,20 @@ -document.addEventListener('DOMContentLoaded', function () { - const toggleSwitch = document.getElementById('toggleCopyMode'); - const statusText = document.getElementById('statusText'); - - toggleSwitch.addEventListener('change', function () { - chrome.runtime.sendMessage({ action: 'toggleCopyMode' }, function (response) { - if (response.copyModeEnabled) { - statusText.textContent = 'Copy mode enabled'; - } else { - statusText.textContent = 'Copy mode disabled'; - } - }); - }); - - // Initialize switch state based on current mode - chrome.runtime.sendMessage({ action: 'getCopyModeStatus' }, function (response) { - toggleSwitch.checked = response.copyModeEnabled; - statusText.textContent = response.copyModeEnabled ? 'Copy mode enabled' : 'Copy mode disabled'; - }); -}); +document.addEventListener('DOMContentLoaded', function () { + const toggleSwitch = document.getElementById('toggleCopyMode'); + const statusText = document.getElementById('statusText'); + + toggleSwitch.addEventListener('change', function () { + chrome.runtime.sendMessage({ action: 'toggleCopyMode' }, function (response) { + if (response.copyModeEnabled) { + statusText.textContent = 'Copy mode enabled'; + } else { + statusText.textContent = 'Copy mode disabled'; + } + }); + }); + + // Initialize switch state based on current mode + chrome.runtime.sendMessage({ action: 'getCopyModeStatus' }, function (response) { + toggleSwitch.checked = response.copyModeEnabled; + statusText.textContent = response.copyModeEnabled ? 'Copy mode enabled' : 'Copy mode disabled'; + }); +});