GreaseMonkey などのローカル JS/CSS を使用して GitHub ナビゲーション ペインを常に表示する

Question

最近の GitHub の再設計により、画面領域の 2/3 が使用されなくなったため、使い勝手が大幅に低下しました。

ハンバーガー メニュー ボタンを押すと便利なサイドバーが表示されますが、その外側をクリックすると消えます。

以下の GIMP スクリーンショットに示すように、Chromium プラグインを使用して GitHub の DOM/CSS ツリーを変更し、このサイドバーが常にすべてのページに表示されるようにしたいと思います。

そのための指示をいただければ幸いです。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 で行われます。すべてのページで明らかな要素の衝突を調べたわけではありませんが、これまでのところ、一般的なページでは問題ないようです。また、このコードを処理/最適化するより良い方法があると思います。