用Bookmarklet批量删除GitHub无用分支

还在为GitHub上堆积如山的无用分支头疼吗？本文教你如何利用Bookmarklet，一键批量清理已合并或已关闭的GitHub分支，告别手动删除的繁琐！通过简洁的JavaScript代码，Bookmarklet能自动查找并点击删除按钮，省时省力。更巧妙地运用了MutationObserver，确保在删除操作完成后再进行下一步，避免因按钮禁用导致的删除失败。详细代码解析和使用方法，让你轻松上手，保持代码仓库的整洁。但请注意，使用前务必仔细检查分支列表，并留意GitHub的API速率限制哦！

本文介绍如何编写一个 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();
}
})();

代码解析

1. waitTillNotDisabled(elm) 函数：

   • 此函数接受一个 DOM 元素 elm 作为输入，并返回一个 Promise。
   • 如果 elm 当前未禁用 (!elm.disabled)，Promise 立即 resolve。
   • 如果 elm 当前已禁用，则创建一个 MutationObserver 来监听 DOM 树的变化。
   • MutationObserver 观察 document.body 及其子树 (subtree: true) 中子节点的添加和删除 (childList: true)。
   • 当观察到变化时，检查 elm 是否不再禁用。如果是，则 resolve Promise 并断开 MutationObserver 的连接。
   • 这个函数的作用是确保在点击删除按钮之前，该按钮已经可用。

2. document.querySelectorAll('span[title="Status: Merged"], span[title="Status: Closed"]')：

   • 这行代码使用 querySelectorAll 方法选择所有 span 元素，这些元素的 title 属性值为 "Status: Merged" 或 "Status: Closed"。这些 span 元素通常表示已合并或已关闭的分支。

3. 循环遍历删除按钮：

   • 使用 for 循环遍历所有找到的 span 元素。
   • 对于每个 span 元素，使用 node.parentNode.parentNode.querySelector('.js-branch-delete-button') 找到对应的删除按钮。此代码假定删除按钮位于 span 元素的祖父节点的子节点中，并且具有类名 js-branch-delete-button。
   • await waitTillNotDisabled(deleteButton)：在点击删除按钮之前，等待 waitTillNotDisabled 函数返回的 Promise resolve。这确保了在点击按钮之前，按钮是可用的。
   • deleteButton.click()：点击删除按钮。

使用方法

1. 创建 Bookmarklet： 在浏览器的书签栏中，创建一个新的书签。
2. 编辑书签： 将上述 JavaScript 代码复制到书签的 URL 字段中。
3. 访问 GitHub 分支页面： 导航到 GitHub 项目的分支页面，确保显示了所有需要删除的分支。
4. 点击 Bookmarklet： 点击刚刚创建的书签，Bookmarklet 将开始自动删除已合并或已关闭的分支。

注意事项

• 权限： 确保你的 GitHub 账户具有删除分支的权限。
• 确认： 在运行 Bookmarklet 之前，请仔细检查页面上的分支列表，确保只删除不需要的分支。
• 网络延迟： 由于网络延迟等原因，删除过程可能需要一些时间。请耐心等待，直到所有分支都被删除。
• 错误处理： 该代码没有包含错误处理机制。如果在删除过程中出现错误，可能需要手动处理。
• API Rate Limit: 大量删除操作可能会触发 GitHub 的 API 速率限制。 如果发生这种情况，脚本可能会停止工作，并且您可能需要稍后重试。

总结

通过使用 Bookmarklet 和 MutationObserver，可以有效地批量删除 GitHub 项目中已合并或已关闭的分支。这可以节省大量时间和精力，并保持代码仓库的整洁。请务必谨慎使用，并确保在运行 Bookmarklet 之前仔细检查分支列表。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~