☰

Github1s

在 Github 网站顶部显示 Github1s 按钮，Github1s 是一个利用 VsCode Online 浏览代码的项目

// ==UserScript==
// @name           Github1s
// @icon           https://github.githubassets.com/pinned-octocat.svg
// @version        1.0.2
// @description    在 Github 网站顶部显示 Github1s 按钮，Github1s 是一个利用 VsCode Online 浏览代码的项目
// @author         zw95
// @originAuthor   桔子
// @match          https://github.com/*
// @grant          GM_addStyle
// @run-at         document-end
// @require        https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js
// @require        https://greasyfork.org/scripts/475259-elementgetter-alone/code/ElementGetter_Alone.js?version=1250106
// @namespace      https://greasyfork.org/users/991143
// @scriptHomePage https://greasyfork.org/scripts/486673
// ==/UserScript==

var themeMode;
(function () {
  "use strict";
  init();
  style();
  work();
})();

function init(){
  themeMode = document.querySelector("html")?.getAttribute('data-color-mode') || 'light';
}
/**
 * 创建 Github1s 按钮
 */
function work() {
  // 首页按钮
  elmGetter.get('.pagehead-actions.flex-shrink-0.d-none.d-md-inline').then((node) => {
    const github1sUrl = `https://github1s.com${location.pathname}`;
    const element = '<li id="github1sProjectButton"> <a target="_blank" class="btn btn-sm" href="' + github1sUrl + '"> <svg t="1613127032045" class="icon octicon octicon-heart text-pink" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2120" width="16.015625" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M512.032 831.904c-19.168 0-38.304-9.92-58.144-29.76-7.808-7.808-7.808-20.48 0-28.288s20.48-7.808 28.288 0C494.368 786.08 504.16 792 512.032 792s17.664-5.92 29.856-18.144c7.808-7.808 20.48-7.808 28.288 0s7.808 20.48 0 28.288c-19.84 19.84-38.976 29.76-58.144 29.76z m-512-306.4c0 49.888 4.256 95.136 12.8 135.68s20.544 75.744 36 105.536 35.008 55.904 58.656 78.336 49.344 40.928 77.056 55.456c27.744 14.528 59.456 26.304 95.2 35.264S351.84 951.04 388.8 954.624 466.496 960 510.944 960c44.448 0 85.248-1.792 122.4-5.376s73.6-9.856 109.344-18.848c35.744-8.96 67.552-20.736 95.456-35.264s53.792-33.024 77.6-55.456c23.808-22.432 43.456-48.544 58.944-78.336s27.552-64.96 36.256-105.536c8.704-40.576 13.056-85.792 13.056-135.68 0-89.376-27.744-166.368-83.2-230.976 3.2-8.608 5.952-18.496 8.256-29.6s4.544-26.816 6.656-47.104c2.144-20.288 1.344-43.712-2.4-70.272S942.56 93.888 932.256 66.24l-8-1.632c-5.344-1.088-14.048-0.704-26.144 1.088s-26.208 5.024-42.4 9.696-37.056 13.92-62.656 27.744-52.608 31.328-81.056 52.512c-48.352-14.72-115.008-30.112-200-30.112s-151.808 15.392-200.544 30.112c-28.448-21.184-55.552-38.592-81.344-52.224s-46.4-22.976-61.856-28c-15.456-5.024-29.792-8.256-42.944-9.696s-21.6-1.888-25.344-1.344c-3.744 0.544-6.496 1.152-8.256 1.888-10.304 27.648-17.408 54.752-21.344 81.312s-4.8 49.888-2.656 69.984c2.144 20.096 4.448 35.904 6.944 47.392S80 286.304 83.2 294.56C27.744 358.816 0 435.808 0 525.536z m136.544 113.888c0-58.016 21.344-110.624 64-157.856 12.8-14.4 27.648-25.312 44.544-32.704s36.096-11.616 57.6-12.608 42.048-0.8 61.6 0.608 43.744 3.296 72.544 5.696 53.696 3.616 74.656 3.616c20.96 0 45.856-1.184 74.656-3.616s52.992-4.288 72.544-5.696c19.552-1.408 40.096-1.6 61.6-0.608s40.8 5.216 57.856 12.608c17.056 7.392 32 18.304 44.8 32.704 42.656 47.232 64 99.84 64 157.856 0 34.016-3.552 64.32-10.656 90.944s-16.096 48.928-26.944 66.912c-10.848 18.016-26.048 33.216-45.6 45.632s-38.496 22.016-56.8 28.8c-18.304 6.784-41.952 12.096-70.944 15.904s-54.944 6.112-77.856 6.912c-22.944 0.8-51.808 1.216-86.656 1.216s-63.648-0.416-86.4-1.216c-22.752-0.8-48.608-3.104-77.6-6.912s-52.608-9.12-70.944-15.904c-18.304-6.816-37.248-16.416-56.8-28.8s-34.752-27.616-45.6-45.632c-10.848-18.016-19.84-40.32-26.944-66.912s-10.656-56.928-10.656-90.944zM256.032 608c0-53.024 28.64-96 64-96s64 42.976 64 96-28.64 96-64 96-64-42.976-64-96z m384 0c0-53.024 28.64-96 64-96s64 42.976 64 96-28.64 96-64 96-64-42.976-64-96z" p-id="2121" fill="var(--color-codemirror-text)"></path> </svg></a> </li>';

    node.insertAdjacentHTML('afterBegin', element);
  });

  // 单文件按钮
  // elmGetter.get('.react-blob-header-edit-and-raw-actions > div:nth-child(1)').then((fileEditbutton) => {
  elmGetter.each('.react-blob-header-edit-and-raw-actions', document,(fileEditbutton) => {
    const parentNode = fileEditbutton.parentNode;

    console.log(1)
    const fileButton = document.createElement('button');
    fileButton.className='btn btn-sm';
    fileButton.innerHTML = `<svg t="1613127032045" class="icon octicon octicon-heart text-pink" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2120" width="16.015625" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M512.032 831.904c-19.168 0-38.304-9.92-58.144-29.76-7.808-7.808-7.808-20.48 0-28.288s20.48-7.808 28.288 0C494.368 786.08 504.16 792 512.032 792s17.664-5.92 29.856-18.144c7.808-7.808 20.48-7.808 28.288 0s7.808 20.48 0 28.288c-19.84 19.84-38.976 29.76-58.144 29.76z m-512-306.4c0 49.888 4.256 95.136 12.8 135.68s20.544 75.744 36 105.536 35.008 55.904 58.656 78.336 49.344 40.928 77.056 55.456c27.744 14.528 59.456 26.304 95.2 35.264S351.84 951.04 388.8 954.624 466.496 960 510.944 960c44.448 0 85.248-1.792 122.4-5.376s73.6-9.856 109.344-18.848c35.744-8.96 67.552-20.736 95.456-35.264s53.792-33.024 77.6-55.456c23.808-22.432 43.456-48.544 58.944-78.336s27.552-64.96 36.256-105.536c8.704-40.576 13.056-85.792 13.056-135.68 0-89.376-27.744-166.368-83.2-230.976 3.2-8.608 5.952-18.496 8.256-29.6s4.544-26.816 6.656-47.104c2.144-20.288 1.344-43.712-2.4-70.272S942.56 93.888 932.256 66.24l-8-1.632c-5.344-1.088-14.048-0.704-26.144 1.088s-26.208 5.024-42.4 9.696-37.056 13.92-62.656 27.744-52.608 31.328-81.056 52.512c-48.352-14.72-115.008-30.112-200-30.112s-151.808 15.392-200.544 30.112c-28.448-21.184-55.552-38.592-81.344-52.224s-46.4-22.976-61.856-28c-15.456-5.024-29.792-8.256-42.944-9.696s-21.6-1.888-25.344-1.344c-3.744 0.544-6.496 1.152-8.256 1.888-10.304 27.648-17.408 54.752-21.344 81.312s-4.8 49.888-2.656 69.984c2.144 20.096 4.448 35.904 6.944 47.392S80 286.304 83.2 294.56C27.744 358.816 0 435.808 0 525.536z m136.544 113.888c0-58.016 21.344-110.624 64-157.856 12.8-14.4 27.648-25.312 44.544-32.704s36.096-11.616 57.6-12.608 42.048-0.8 61.6 0.608 43.744 3.296 72.544 5.696 53.696 3.616 74.656 3.616c20.96 0 45.856-1.184 74.656-3.616s52.992-4.288 72.544-5.696c19.552-1.408 40.096-1.6 61.6-0.608s40.8 5.216 57.856 12.608c17.056 7.392 32 18.304 44.8 32.704 42.656 47.232 64 99.84 64 157.856 0 34.016-3.552 64.32-10.656 90.944s-16.096 48.928-26.944 66.912c-10.848 18.016-26.048 33.216-45.6 45.632s-38.496 22.016-56.8 28.8c-18.304 6.784-41.952 12.096-70.944 15.904s-54.944 6.112-77.856 6.912c-22.944 0.8-51.808 1.216-86.656 1.216s-63.648-0.416-86.4-1.216c-22.752-0.8-48.608-3.104-77.6-6.912s-52.608-9.12-70.944-15.904c-18.304-6.816-37.248-16.416-56.8-28.8s-34.752-27.616-45.6-45.632c-10.848-18.016-19.84-40.32-26.944-66.912s-10.656-56.928-10.656-90.944zM256.032 608c0-53.024 28.64-96 64-96s64 42.976 64 96-28.64 96-64 96-64-42.976-64-96z m384 0c0-53.024 28.64-96 64-96s64 42.976 64 96-28.64 96-64 96-64-42.976-64-96z" p-id="2121" fill="var(--color-codemirror-text)"></path> </svg>`;

    // RAW URL 按钮
    elmGetter.get('button[aria-label="Copy raw content"]').then((rawFileButton) => {
    // elmGetter.each('button[aria-label="Copy raw content"]', document,(rawFileButton) => {

      var copyRawURLBtn = rawFileButton.cloneNode(true);
      copyRawURLBtn.removeAttribute('data-component');
      copyRawURLBtn.removeAttribute('data-testid');
      copyRawURLBtn.attributes['aria-label'] = 'Copy raw URL';
      copyRawURLBtn.attributes['id'] = 'copyRawURLBtn';
      copyRawURLBtn.title = '复制Raw URL';
      copyRawURLBtn.className = 'btn btn-sm'
      copyRawURLBtn.innerHTML = '<svg t="1715571239682" class="octicon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8619" width="16" height="16"><path d="M578.133 675.627c-3.306-3.307-8.746-3.307-12.053 0L442.133 799.573c-57.386 57.387-154.24 63.467-217.6 0-63.466-63.466-57.386-160.213 0-217.6L348.48 458.027c3.307-3.307 3.307-8.747 0-12.054l-42.453-42.453c-3.307-3.307-8.747-3.307-12.054 0L170.027 527.467c-90.24 90.24-90.24 236.266 0 326.4s236.266 90.24 326.4 0L620.373 729.92c3.307-3.307 3.307-8.747 0-12.053l-42.24-42.24z m275.84-505.6c-90.24-90.24-236.266-90.24-326.4 0L403.52 293.973c-3.307 3.307-3.307 8.747 0 12.054l42.347 42.346c3.306 3.307 8.746 3.307 12.053 0l123.947-123.946c57.386-57.387 154.24-63.467 217.6 0 63.466 63.466 57.386 160.213 0 217.6L675.52 565.973c-3.307 3.307-3.307 8.747 0 12.054l42.453 42.453c3.307 3.307 8.747 3.307 12.054 0l123.946-123.947c90.134-90.24 90.134-236.266 0-326.506z" p-id="8620"></path><path d="M616.64 362.987c-3.307-3.307-8.747-3.307-12.053 0l-241.6 241.493c-3.307 3.307-3.307 8.747 0 12.053l42.24 42.24c3.306 3.307 8.746 3.307 12.053 0L658.773 417.28c3.307-3.307 3.307-8.747 0-12.053l-42.133-42.24z" p-id="8621"></path></svg>'
      copyRawURLBtn.addEventListener("click", function() {
        // 复制固定文字到剪贴板
        var textArea = document.createElement('textarea');
        const fileRawPath = `${location.pathname}`.replace(/^\/((?:\w|-)+)\/((?:\w|-)+)\/blob\//, '/$1/$2/')
        const fileRawURL = `https://raw.githubusercontent.com${fileRawPath}`
        textArea.value = fileRawURL;
        document.body.appendChild(textArea);
        textArea.select();
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? '成功复制' : '复制失败';
            console.log(msg);
        } catch (err) {
            console.error('无法复制文本: ', err);
        }
        document.body.removeChild(textArea);
        const x = copyRawURLBtn.getBoundingClientRect().left - fileButton.clientWidth;
        const y = copyRawURLBtn.getBoundingClientRect().top - copyRawURLBtn.clientHeight -8;
        showTip('已复制！',x,y);
        setTimeout(()=>{
          cleanTip();
        },2000);
      });

      copyRawURLBtn.addEventListener("mouseover", function() {
        const x = copyRawURLBtn.getBoundingClientRect().left - fileButton.clientWidth;
        const y = copyRawURLBtn.getBoundingClientRect().top - copyRawURLBtn.clientHeight -8;
        showTip('复制Raw URL',x,y);
      });

      copyRawURLBtn.addEventListener("mouseout", function() {
        cleanTip();
      });

      // 添加复制RAW URL 按钮
      if(parentNode.firstChild){
        parentNode.insertBefore(copyRawURLBtn, parentNode.firstChild);
      } else {
        parentNode.appendChild(copyRawURLBtn);
      }

    });
    fileButton.addEventListener("click", function() {
      const github1sUrl = `https://github1s.com${location.pathname}`;
      window.open(github1sUrl, '_blank');
    });
    fileButton.addEventListener("mouseover", function() {
      const x = fileButton.getBoundingClientRect().left  - fileButton.clientWidth;
      const y = fileButton.getBoundingClientRect().top - fileButton.clientHeight -8;
      showTip('在Github1s中打开',x,y);
    });

    fileButton.addEventListener("mouseout", function() {
      cleanTip();
    });
    // 添加单文件按钮
    parentNode.insertBefore(fileButton,parentNode.firstChild);

  });

}

function showTip(msg,x,y,color){
  var tipDiv = document.querySelector("#__primerPortalRoot__");
  var toopTip = document.querySelector('#tooltip');
  var tipChildHtml = `<div style="position: relative; z-index: 1;"><span role="tooltip" id="raw-copy-message-tooltip" aria-live="assertive" class="" style="position: absolute; left: ${x}px; top: ${y}px; display:inline-block;padding:.5em .75em;font:11px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';color:${color?color:'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis, #ffffff))'};text-align:center;letter-spacing:normal;overflow-wrap:break-word;white-space:pre;pointer-events:none;background:${'var(--bgColor-emphasis,var(--color-neutral-emphasis-plus, #6e7681))'};border-radius:6px">${msg}</span></div>`;
  if(tipDiv){
    !toopTip && (tipDiv.innerHTML = tipChildHtml);
  }else{
    tipDiv = document.createElement('div')
    tipDiv.id = '__primerPortalRoot__';
    tipDiv.style.position = 'absolute';
    tipDiv.style.left = '0px';
    tipDiv.style.top = '0px';
    !toopTip && (tipDiv.innerHTML = tipChildHtml)
    document.body.appendChild(tipDiv);
    console.log('显示失败，没找到！');
  }
}

function cleanTip(){
  const tipDiv = document.querySelector("#__primerPortalRoot__");
  if(tipDiv){
    tipDiv.innerHTML = ``;
  }else{
    console.log('隐藏失败，没找到！');
  }
}
function style(){
  GM_addStyle(`
    .btn-sm {
    padding: 3px 8px;
    font-size: 12px;
    line-height: 20px;
    }
  `);
}