如何通过Chromium插件（如GreaseMonkey）实现GitHub导航侧边栏始终显示

阿华AIGC实验室

2026-4-22

我完全懂你说的这个痛点——新版GitHub的侧边栏藏得深，点一下出来，点别的地方就消失，确实浪费了不少屏幕空间！下面就手把手教你用Chromium浏览器的用户脚本插件（比如Tampermonkey，GreaseMonkey也能用）来实现侧边栏始终显示的效果：

第一步：安装用户脚本管理器

打开你的Chromium系浏览器（比如Chrome、Edge），去扩展商店搜索Tampermonkey并安装，这是最常用的用户脚本管理工具，能帮我们加载自定义的页面修改脚本。

第二步：创建自定义脚本

点击浏览器右上角的Tampermonkey图标，选择「创建新脚本」；
把编辑器里的默认代码全部删掉，替换成下面的脚本：

// ==UserScript==
// @name         GitHub 始终显示侧边栏
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  让GitHub新版侧边栏一直保持显示状态
// @author       自定义
// @match        https://github.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 等待目标元素加载完成（适配GitHub动态渲染的页面）
    function waitForElement(selector, callback) {
        const element = document.querySelector(selector);
        if (element) {
            callback(element);
            return;
        }
        setTimeout(() => waitForElement(selector, callback), 100);
    }

    // 新版GitHub侧边栏的选择器
    const sidebarSelector = '#app-sidebar';
    // 页面主内容区域的选择器
    const mainContentSelector = 'main > div.container-lg';

    // 初始化侧边栏样式
    waitForElement(sidebarSelector, (sidebar) => {
        // 强制显示侧边栏，固定在左侧
        sidebar.style.display = 'block !important';
        sidebar.style.position = 'fixed';
        sidebar.style.left = '0';
        sidebar.style.top = '64px'; // 避开顶部导航栏的高度
        sidebar.style.height = 'calc(100vh - 64px)';
        sidebar.style.zIndex = '100'; // 确保侧边栏不会被内容盖住

        // 调整主内容区的左边距，避免被侧边栏遮挡
        waitForElement(mainContentSelector, (mainContent) => {
            mainContent.style.marginLeft = '250px'; // 对应侧边栏默认宽度
        });
    });

    // 监听GitHub的无刷新页面跳转（PJAX），确保切换页面后侧边栏依然显示
    document.addEventListener('pjax:end', () => {
        waitForElement(sidebarSelector, (sidebar) => {
            sidebar.style.display = 'block !important';
        });
        waitForElement(mainContentSelector, (mainContent) => {
            mainContent.style.marginLeft = '250px';
        });
    });
})();