117 lines
4.3 KiB
JavaScript
117 lines
4.3 KiB
JavaScript
(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) {
|
|
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.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();
|
|
})();
|