☰

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

tag-icon • tag-icon script html github greasemonkey
使用本地 JS/CSS（例如 GreaseMonkey）使 GitHub 导航窗格始终可见

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

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

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

在此处输入图片描述

我将非常感激您的指导。我猜将其重新定位到 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 完成的。我没有检查每个页面是否存在明显的元素冲突，但到目前为止，常见页面上似乎都还好。我也非常确定有更好的方法来处理/优化此代码。

相关内容