本文介绍如何编写一个 Bookmarklet，用于批量删除 GitHub 项目中已合并或已关闭的分支。该 Bookmarklet 通过 JavaScript 代码自动查找并点击删除按钮，简化了手动删除大量分支的繁琐过程。通过使用 MutationObserver，可以确保在删除操作完成后再点击下一个按钮，避免因按钮禁用而导致删除失败的问题。
批量删除 GitHub 分支的 Bookmarklet
在 GitHub 项目中，如果存在大量已合并或已关闭的分支，手动删除它们会非常耗时。Bookmarklet 是一种便捷的工具，可以执行自定义 JavaScript 代码，从而自动化一些常见的任务。下面介绍如何创建一个 Bookmarklet，用于批量删除这些分支。
Bookmarklet 代码
以下代码提供了一个 Bookmarklet，它可以自动查找并点击所有已合并或已关闭分支的删除按钮。
javascript:(async function(){
function waitTillNotDisabled(elm) {
return new Promise(resolve => {
if (!elm.disabled) {
return resolve();
}
const observer = new MutationObserver(mutations => {
if (!elm.disabled) {
resolve();
observer.disconnect();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
}
const deleteButtons = document.querySelectorAll('span[title="Status: Merged"], span[title="Status: Closed"]');
for (let i=0;i<deleteButtons.length;i++) {
const deleteButton = deleteButtons[i].parentNode.parentNode.querySelector('.js-branch-delete-button');
await waitTillNotDisabled(deleteButton);
deleteButton.click();
}
})();代码解析
-
waitTillNotDisabled(elm) 函数：
- 此函数接受一个 DOM 元素 elm 作为输入，并返回一个 Promise。
- 如果 elm 当前未禁用 (!elm.disabled)，Promise 立即 resolve。
- 如果 elm 当前已禁用，则创建一个 MutationObserver 来监听 DOM 树的变化。
- MutationObserver 观察 document.body 及其子树 (subtree: true) 中子节点的添加和删除 (childList: true)。
- 当观察到变化时，检查 elm 是否不再禁用。如果是，则 resolve Promise 并断开 MutationObserver 的连接。
- 这个函数的作用是确保在点击删除按钮之前，该按钮已经可用。
-
document.querySelectorAll('span[title="Status: Merged"], span[title="Status: Closed"]')：
- 这行代码使用 querySelectorAll 方法选择所有 span 元素，这些元素的 title 属性值为 "Status: Merged" 或 "Status: Closed"。这些 span 元素通常表示已合并或已关闭的分支。
-
循环遍历删除按钮：
- 使用 for 循环遍历所有找到的 span 元素。
- 对于每个 span 元素，使用 node.parentNode.parentNode.querySelector('.js-branch-delete-button') 找到对应的删除按钮。此代码假定删除按钮位于 span 元素的祖父节点的子节点中，并且具有类名 js-branch-delete-button。
- await waitTillNotDisabled(deleteButton)：在点击删除按钮之前，等待 waitTillNotDisabled 函数返回的 Promise resolve。这确保了在点击按钮之前，按钮是可用的。
- deleteButton.click()：点击删除按钮。
使用方法
- 创建 Bookmarklet： 在浏览器的书签栏中，创建一个新的书签。
- 编辑书签： 将上述 JavaScript 代码复制到书签的 URL 字段中。
- 访问 GitHub 分支页面： 导航到 GitHub 项目的分支页面，确保显示了所有需要删除的分支。
- 点击 Bookmarklet： 点击刚刚创建的书签，Bookmarklet 将开始自动删除已合并或已关闭的分支。
注意事项
- 权限： 确保你的 GitHub 账户具有删除分支的权限。
- 确认： 在运行 Bookmarklet 之前，请仔细检查页面上的分支列表，确保只删除不需要的分支。
- 网络延迟： 由于网络延迟等原因，删除过程可能需要一些时间。请耐心等待，直到所有分支都被删除。
- 错误处理： 该代码没有包含错误处理机制。如果在删除过程中出现错误，可能需要手动处理。
- API Rate Limit: 大量删除操作可能会触发 GitHub 的 API 速率限制。 如果发生这种情况，脚本可能会停止工作，并且您可能需要稍后重试。
总结
通过使用 Bookmarklet 和 MutationObserver，可以有效地批量删除 GitHub 项目中已合并或已关闭的分支。这可以节省大量时间和精力，并保持代码仓库的整洁。请务必谨慎使用，并确保在运行 Bookmarklet 之前仔细检查分支列表。
