使用本機 JS/CSS（例如 GreaseMonkey）使 GitHub 導覽窗格始終可見

Question

GitHub 最近重新設計使其可用性大大降低，因為 2/3 的螢幕空間不再使用：

如果您按漢堡選單按鈕，則會出現一個有用的側邊欄，但如果您單擊其外部的任何位置，它就會消失：

我想使用一些 Chromium 插件來修改 GitHub 的 DOM/CSS 樹，使這個側邊欄始終顯示在所有頁面上，如下面的 GIMPed 螢幕截圖所示：

如果有指示，我將不勝感激。我想將其重新定位到 DOM 樹的不同位置並使其可見應該就足夠了。

Answer 1

在點擊漢堡包按鈕之前，左側邊欄不會加載數據，而且我不知道該網站總體上是如何工作的，但我做了一些有點俗氣的東西。

// ==UserScript==
// @name         GitHub - Left sidebar always visible
// @namespace    http://tampermonkey.net/
// @version      4
// @description  superuser.com/questions/1794556
// @match        https://github.com/*
// ==/UserScript==

(function() {
  'use strict';

  const css = `

  @media only screen and (min-width: 1300px) {

    .application-main {
      display: flex;
      flex-direction: row-reverse !important;
      width: 100%;
    } .application-main deferred-side-panel > div {
      display: flex !important;
      position: sticky;
      padding-top: 1em;
    } .application-main modal-dialog {
      max-height: 96vh !important;
      display: flex !important;
    }

    .application-main > div[class=""],
    .application-main main {
      width: 100%;
    }

    .application-main .Overlay-backdrop--side {
      background-color: transparent;
      display: flex !important;
      z-index: 1;
    }

    .application-main > div > div > aside.team-left-column,
    .AppHeader-globalBar-start > deferred-side-panel,
    .application-main deferred-side-panel > button[id],
    .application-main deferred-side-panel > div[class] .Overlay-actionWrap {
      display: none !important;
    }

  }
  `;

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

  styleElement.textContent = css;

  document.head.appendChild(styleElement);

  var openButton = document.querySelector("deferred-side-panel > include-fragment > button[id]");
  var closeButton = document.querySelector(".Overlay-actionWrap > .close-button");

  function trigMenu() {

    setTimeout(function() {

      if (openButton === null) {
        openButton = document.querySelector("deferred-side-panel > include-fragment > button[id]");
        return;
      }

      if (openButton.isConnected) {
          openButton.click();
      } else {
          openButton = document.querySelector("deferred-side-panel > include-fragment > button[id]");
      }

      if (closeButton.isConnected) {
          closeButton.click();
      } else {
          closeButton = document.querySelector(".Overlay-actionWrap > .close-button");
      }

      setTimeout(function() {

        const main = document.querySelector(".application-main");

        const leftPanel = document.querySelector(".AppHeader-globalBar-start > deferred-side-panel");

        if (leftPanel) {
          main.appendChild(leftPanel);
        }

      }, 750);

    }, 1);

  }

  const observer = new MutationObserver(function(m) {
    for (const mutation of m) {
      if (mutation.target.tagName === 'DIV') {
        if (window.location.pathname.match(/\/(users|orgs)\/.*?\/projects\/.*/g)) { return }
        trigMenu();
      }
    }
  });

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

})();

所有程式碼所做的就是注入 CSS，使選單列跟隨螢幕視圖。然後，每當 DOM 發生更改時，它都會在單擊切換選單按鈕時將渲染的側邊欄元素移動到另一個節點，以便載入動態資料。

大部分的工作都是在 CSS 中完成。我沒有探索每個頁面是否有明顯的元素衝突，但到目前為止，在公共頁面上似乎還不錯。我也很確定有更好的方法來處理/優化這段程式碼。