主页 / computer / 问题 / 1794556
Accepted
alamar
Asked: 2023-07-07 18:28:34 +0800 CST

使用本地 JS/CSS（例如 GreaseMonkey）使 GitHub 导航窗格始终可见

  • 772

GitHub 最近重新设计使其可用性大大降低，因为 2/3 的屏幕空间不再使用： GitHub 重新设计，空间浪费

如果您按汉堡菜单按钮，则会出现一个有用的侧边栏，但如果您单击其外部的任何位置，它就会消失： 带有侧边栏的 GitHub

我想使用一些 Chromium 插件来修改 GitHub 的 DOM/CSS 树，使这个侧边栏始终显示在所有页面上，如下面的 GIMPed 屏幕截图所示：

在此输入图像描述

如果有指示，我将不胜感激。我想将其重新定位到 DOM 树的不同位置并使其可见应该就足够了。

script

1 个回答

  1. Best Answer

    在点击汉堡包按钮之前，左侧边栏不会加载数据，而且我不知道该网站总体上是如何工作的，但我做了一些有点俗气的东西。

    // ==UserScript==
// @name         New Userscript for superuser.com/questions/1794556
// @namespace    http://tampermonkey.net/
// @version      2
// @description  superuser.com/questions/1794556
// @match        https://github.com/*
// ==/UserScript==

(function() {
  'use strict';

  const css = `

  @media only screen and (min-width: 1300px) {
    body {
      overflow: auto !important;
    }
    .AppHeader-globalBar-start deferred-side-panel {
      transform: translatex(-15px);
    }
    .application-main main {
      max-width: calc(100vw - 320px - 2em);
      margin-left: auto;
    }
    deferred-side-panel > div > modal-dialog {
      position: absolute;
      top: 104px;
      left: 0px;
    }
    .Overlay-backdrop--side.Overlay-backdrop--placement-left.Overlay--hidden {
      display: flex !important;
      height: 100%;
      position: relative;
    }
    .AppHeader-globalBar-start .Overlay-backdrop--side {
      background-color: transparent;
    }
    .dashboard-sidebar,
    .AppHeader-globalBar-start deferred-side-panel > include-fragment > div[class] > modal-dialog,
    .AppHeader-globalBar-start deferred-side-panel > button[id],
    .AppHeader-globalBar-start deferred-side-panel > div[class] .Overlay-actionWrap {
      display: none !important;
    }
  }

  `;

  const styleElement = document.createElement('style');

  styleElement.textContent = css;

  document.head.appendChild(styleElement);

  function trigMenu() {
    setTimeout(function() {
      document.querySelector("deferred-side-panel > include-fragment > button[id]").click();
      document.querySelector(".Overlay-actionWrap > .close-button").click();
    }, 10);
  }

  const observer = new MutationObserver(function(mutationsList) {
    for (let mutation of mutationsList) {
      if (mutation.type === 'childList') {
        trigMenu();
        break;
      }
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });

})();

    代码所做的只是注入 CSS，使菜单栏显示在左侧，同时将其后面的元素移离菜单栏。然后，每当 DOM 发生变化时，它都会单击菜单按钮，以便动态数据将加载到侧边栏中。

    大部分工作都是在 CSS 中完成的。我没有探索每个页面是否存在明显的元素冲突，但到目前为止，在公共页面上似乎还不错。

    • 1

相关问题