Machen Sie den GitHub-Navigationsbereich mit lokalem JS/CSS wie GreaseMonkey immer sichtbar

Question

Durch die Neugestaltung von GitHub ist es in letzter Zeit deutlich weniger benutzerfreundlich geworden, da zwei Drittel der Bildschirmfläche nicht mehr genutzt werden:

Wenn Sie auf die Hamburger-Menüschaltfläche klicken, wird eine nützliche Seitenleiste angezeigt. Diese verschwindet jedoch, wenn Sie außerhalb dieser Schaltfläche klicken:

Ich möchte ein Chromium-Plugin verwenden, um den DOM/CSS-Baum von GitHub so zu ändern, dass diese Seitenleiste immer auf allen Seiten angezeigt wird, wie im folgenden GIMP-Screenshot gezeigt:

Für entsprechende Anweisungen wäre ich dankbar. Ich denke, dass es ausreichen sollte, es an eine andere Stelle im DOM-Baum zu verschieben und sichtbar zu machen.

Answer 1

Die linke Seitenleiste lädt die Daten irgendwie nicht, bevor ich auf die Hamburger-Schaltfläche klicke, und ich habe keine Ahnung, wie die Site im Allgemeinen funktioniert, aber ich habe etwas etwas Geschmackloses gemacht.

// ==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 });

})();

Der Code fügt lediglich CSS ein, das dafür sorgt, dass die Menüleiste der Bildschirmansicht folgt. Wenn sich dann das DOM ändert, verschiebt es das gerenderte Seitenleistenelement zu einem anderen Knoten, wenn es auf die Schaltfläche zum Umschalten des Menüs klickt, sodass die dynamischen Daten geladen werden.

Die meiste Arbeit wird in CSS erledigt. Ich habe nicht jede Seite auf eklatante Elementkollisionen untersucht, aber bisher scheint es auf den gängigen Seiten in Ordnung zu sein. Ich bin mir auch ziemlich sicher, dass es bessere Möglichkeiten gibt, diesen Code zu handhaben/optimieren.