GitHub Repo Size Display

Display repository size on GitHub repository pages

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         GitHub Repo Size Display
// @namespace    http://tampermonkey.net/
// @version      0.1
// @license      MIT
// @description  Display repository size on GitHub repository pages
// @author       RainbowBird
// @match        https://github.com/*
// @grant        GM_xmlhttpRequest
// @connect      api.github.com
// ==/UserScript==

(function() {
    'use strict';

    // 工具函数:转换文件大小为人类可读格式
    function convertSizeToHumanReadableFormat(bytes) {
        const units = ['B', 'KB', 'MB', 'GB', 'TB'];
        let size = bytes;
        let unitIndex = 0;

        while (size >= 1024 && unitIndex < units.length - 1) {
            size /= 1024;
            unitIndex++;
        }

        return {
            size: size.toFixed(1),
            measure: units[unitIndex]
        };
    }

    // 工具函数:从 URL 获取用户名和仓库名
    function getUsernameWithReponameFromGithubURL() {
        const pathnameParts = window.location.pathname.split('/').filter(Boolean);
        return {
            user: pathnameParts[0],
            repo: pathnameParts[1]
        };
    }

    // 添加仓库大小到页面
    function appendRepoSizeElement(repoSize) {
        // 移除已存在的仓库大小显示(如果有)
        const existingSize = document.querySelector('.eg-repo-size');
        if (existingSize) {
            existingSize.remove();
        }

        // 寻找插入位置
        const sidebarElement = document.querySelector('.Layout-sidebar .hide-sm.hide-md');
        if (!sidebarElement) return;

        const formattedFileSize = convertSizeToHumanReadableFormat(repoSize * 1024); // GitHub API 返回的大小单位是 KB

        const html = `
            <h3 class="sr-only">Repo Size</h3>
            <div class="mt-2 eg-repo-size">
                <a href="javascript:void(0);" data-view-component="true" class="Link Link--muted">
                    <svg class="octicon octicon-database mr-2" mr="2" aria-hidden="true" height="16" version="1.1" viewBox="0 0 12 16" width="16">
                        <path d="M6 15c-3.31 0-6-.9-6-2v-2c0-.17.09-.34.21-.5.67.86 3 1.5 5.79 1.5s5.12-.64 5.79-1.5c.13.16.21.33.21.5v2c0 1.1-2.69 2-6 2zm0-4c-3.31 0-6-.9-6-2V7c0-.11.04-.21.09-.31.03-.06.07-.13.12-.19C.88 7.36 3.21 8 6 8s5.12-.64 5.79-1.5c.05.06.09.13.12.19.05.1.09.21.09.31v2c0 1.1-2.69 2-6 2zm0-4c-3.31 0-6-.9-6-2V3c0-1.1 2.69-2 6-2s6 .9 6 2v2c0 1.1-2.69 2-6 2zm0-5c-2.21 0-4 .45-4 1s1.79 1 4 1 4-.45 4-1-1.79-1-4-1z"></path>
                    </svg>
                    <strong>${formattedFileSize.size}</strong>
                    <span>${formattedFileSize.measure}</span>
                </a>
            </div>
        `;

        sidebarElement.insertAdjacentHTML('beforeend', html);
    }

    // 获取仓库信息并显示大小
    function fetchRepoSizeAndDisplay() {
        const path = getUsernameWithReponameFromGithubURL();

        // 只在仓库主页执行
        if (!path.repo) return;

        const apiUrl = `https://api.github.com/repos/${path.user}/${path.repo}`;

        GM_xmlhttpRequest({
            method: 'GET',
            url: apiUrl,
            headers: {
                'Accept': 'application/vnd.github.v3+json'
            },
            onload: function(response) {
                if (response.status === 200) {
                    const data = JSON.parse(response.responseText);
                    if (data && data.size) {
                        appendRepoSizeElement(data.size);
                    }
                }
            }
        });
    }

    // 监听页面 URL 变化
    let lastUrl = location.href;
    new MutationObserver(() => {
        const url = location.href;
        if (url !== lastUrl) {
            lastUrl = url;
            fetchRepoSizeAndDisplay();
        }
    }).observe(document, { subtree: true, childList: true });

    // 初始加载
    fetchRepoSizeAndDisplay();
})();