米家中枢极客版助手

登录极客版页面后,自动开启助手插件,显示设备与规则的关系,方便查看规则与设备的对应关系,支持快捷键折叠/展开,关闭,适应画布布局,设备高亮,日志高亮,自动适应画布、设置规则列表布局样式等功能。

< Σχολιασμός για τον κώδικα 米家中枢极客版助手

Αναφορά: Καλός - ο κώδικας λειτουργεί

§
Δημοσιεύτηκε: 23/05/2024

高亮可以把循环查询改成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();

sk 163Δημιουργός
§
Δημοσιεύτηκε: 23/05/2024

嗯,刚开始试的MutationObserver监听,页面卡死了,后来就改轮询了。先完成功能,满足刚需,以后看看是否有必要优化~

sk 163Δημιουργός
§
Δημοσιεύτηκε: 25/05/2024

感谢提供思路,v0.8.9版本已将轮询改为了事件监听机制

Δημοσίευση απάντησης

Συνδεθείτε για να δημοσιεύσετε μια απάντηση.