登录极客版页面后,自动开启助手插件,显示设备与规则的关系,方便查看规则与设备的对应关系,支持快捷键折叠/展开,关闭,适应画布布局,设备高亮,日志高亮,自动适应画布、设置规则列表布局样式等功能。
< Commentaires sur 米家中枢极客版助手
高亮可以把循环查询改成callback触发: const targetNode = document.body; // 观察器的配置(需要观察哪些变动) const config = { childList: true, subtree: true, }; // 当观察到变动时执行的回调函数 const callback = function(mutationsList, observer) { for (let mutation of mutationsList) { if (mutation.type === 'childList' && mutation.addedNodes.length > 0) { mutation.addedNodes.forEach(node => { if (node.nodeType === Node.ELEMENT_NODE) { // 处理新添加的 .panel-log-card-blink 元素 if (node.classList.contains('panel-log-card-blink')) { node.style.backgroundColor = 'red'; // 修改背景颜色为红色 node.style.border = '2px solid yellow'; // 修改边框为黄色 } else { const blinkElement = node.querySelector('.panel-log-card-blink'); if (blinkElement) { blinkElement.style.backgroundColor = 'red'; // 修改背景颜色为红色 blinkElement.style.border = '2px solid yellow'; // 修改边框为黄色 } } // 处理新添加的 元素 if (node.tagName === 'ANIMATE') { const pathElement = node.parentElement; if (pathElement) { pathElement.setAttribute('stroke', 'red'); } } else { const animateElements = node.querySelectorAll('animate'); animateElements.forEach(animateElement => { const pathElement = animateElement.parentElement; if (pathElement) { pathElement.setAttribute('stroke', 'red'); } }); } } }); } } }; // 创建一个观察器实例并传入回调函数 const observer = new MutationObserver(callback); // 以上述配置开始观察目标节点 observer.observe(targetNode, config); // 你可以在适当的时候停止观察 // observer.disconnect();
嗯,刚开始试的MutationObserver监听,页面卡死了,后来就改轮询了。先完成功能,满足刚需,以后看看是否有必要优化~
感谢提供思路,v0.8.9版本已将轮询改为了事件监听机制
Connectez-vous pour poster une réponse.
高亮可以把循环查询改成callback触发:
const targetNode = document.body;
// 观察器的配置(需要观察哪些变动)
const config = {
childList: true,
subtree: true,
};
// 当观察到变动时执行的回调函数
const callback = function(mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
mutation.addedNodes.forEach(node => {
if (node.nodeType === Node.ELEMENT_NODE) {
// 处理新添加的 .panel-log-card-blink 元素
if (node.classList.contains('panel-log-card-blink')) {
node.style.backgroundColor = 'red'; // 修改背景颜色为红色
node.style.border = '2px solid yellow'; // 修改边框为黄色
} else {
const blinkElement = node.querySelector('.panel-log-card-blink');
if (blinkElement) {
blinkElement.style.backgroundColor = 'red'; // 修改背景颜色为红色
blinkElement.style.border = '2px solid yellow'; // 修改边框为黄色
}
}
// 处理新添加的 元素
if (node.tagName === 'ANIMATE') {
const pathElement = node.parentElement;
if (pathElement) {
pathElement.setAttribute('stroke', 'red');
}
} else {
const animateElements = node.querySelectorAll('animate');
animateElements.forEach(animateElement => {
const pathElement = animateElement.parentElement;
if (pathElement) {
pathElement.setAttribute('stroke', 'red');
}
});
}
}
});
}
}
};
// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);
// 以上述配置开始观察目标节点
observer.observe(targetNode, config);
// 你可以在适当的时候停止观察
// observer.disconnect();