☰

GreaseMonkey와 같은 로컬 JS/CSS를 사용하여 GitHub 탐색 창을 항상 표시하도록 설정

tag-icon • tag-icon script html github greasemonkey
GreaseMonkey와 같은 로컬 JS/CSS를 사용하여 GitHub 탐색 창을 항상 표시하도록 설정

최근 GitHub 재설계로 인해 화면 공간의 2/3가 더 이상 사용되지 않기 때문에 사용성이 훨씬 떨어졌습니다. 낭비되는 공간으로 GitHub 재설계

햄버거 메뉴 버튼을 누르면 유용한 사이드바가 나타나지만 사이드바 바깥쪽 아무 곳이나 클릭하면 사라집니다. 사이드바가 있는 GitHub

아래 GIMPed 스크린샷에 표시된 것처럼 일부 Chromium 플러그인을 사용하여 GitHub의 DOM/CSS 트리를 수정하여 이 사이드바가 모든 페이지에 항상 표시되도록 하고 싶습니다.

여기에 이미지 설명을 입력하세요

그렇게 하도록 지시해 주시면 감사하겠습니다. 나는 그것을 DOM 트리의 다른 위치에 재배치하고 표시하는 것으로 충분하다고 생각합니다.

답변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로 이루어집니다. 눈에 띄는 요소 충돌이 있는지 모든 페이지를 탐색하지는 않았지만 현재까지는 일반 페이지에서는 괜찮은 것 같습니다. 또한 이 코드를 처리/최적화하는 더 나은 방법이 있다고 확신합니다.

관련 정보