103 lines
3.7 KiB
JavaScript
103 lines
3.7 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) {
|
|
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();
|
|
})();
|