GitHub Monitor
缺陷
由于该开源项目已停止维护,当前任务极大概率会匹配到噪音结果,如:
## 关键词:llo
## 结果: hello , yellow 等包含关键词的内容与仓库
## 若结果为乱码,也会有: llllllloooooooooiiiiiiii
高亮关键词的部分 — 油候实现
功能效果图:(暂无)
文件代码如下:
// ==UserScript==
// @name GithubMonitor_ER
// @namespace http://tampermonkey.net/
// @version v0.1
// @description try to take over the world!
// @grant GM.xmlHttpRequest
// @grant GM_addStyle
// @connect *
// @author You
// @match http://<Monitor_HOST>/*
// @icon https://github.com/favicon.ico
// @grant unsafeWindow
// @lastmodified 2025-2-11
// @run-at document-end
// @note 2025-2-11 添加了 unsafeWindow,document-end
// ==/UserScript==
(function() {
'use strict';
/**
* 获取页面中间的 '.ant-card-body' 类的 div 元素
* 排除第一个和最后一个元素
* @returns {Element[]} 返回过滤后的元素数组
*/
const getTargetCardBodies = () =>
Array.from(document.querySelectorAll('.ant-card-body')).slice(1, -1);
/**
* 在所有 `<code>` 元素中高亮显示指定的关键词
* @param {string} keyword - 关键词
*/
const highlightKeywordInCodeElements = (keyword) => {
const regex = new RegExp(`(${keyword})`, 'gi');
document.querySelectorAll('code').forEach(code => {
code.innerHTML = code.innerHTML.replace(regex, `<strong style="background-color: yellow;">$1</strong>`);
});
};
/**
* 处理页面加载后的操作
* @param {Element[]} targetCardBodies - 经过筛选的目标卡片元素数组
*/
const handlePageLoaded = (targetCardBodies) => {
const targetTags = targetCardBodies.flatMap(cardBody =>
Array.from(cardBody.querySelectorAll('.ant-tag.ant-tag-blue'))
);
if (targetTags.length >= 3) {
const keyword = targetTags[2].textContent.trim();
highlightKeywordInCodeElements(keyword);
}
};
/**
* MutationObserver 回调函数,处理 DOM 变化
* @param {MutationRecord[]} mutationsList - 变动记录数组
*/
const observerCallback = (mutationsList) => {
mutationsList.forEach(mutation => {
if (mutation.type === 'childList' && mutation.addedNodes.length) {
clearTimeout(observer.debounce);
observer.debounce = setTimeout(() => {
const targetCardBodies = getTargetCardBodies();
handlePageLoaded(targetCardBodies);
}, 500); // 防抖,500ms延迟
}
});
};
// 创建并启动 MutationObserver 实例
const observer = new MutationObserver(observerCallback);
observer.observe(document.body, { childList: true, subtree: true });
})();
最后更新于
这有帮助吗?