Open GitHub in VS Code Remote Repository without cloning repo

00-README.md

Open GitHub repo with VSCode Remote Repository

How to use

• Install VS Code extension: GitHub Repositories in VSCode before enabling this userscript.

• press , (comma key) on GitHub to open code in VSCode.

Configuration

By Default, the script launches VS Code Insiders. To change this behavior, please change codeScheme to vscode://.

Screenshots

index.js

// ==UserScript==
// @name        Open GitHub in VSCode Remote Repository
// @version     0.0.2
// @description Adds option to open a repo in VSCode Remote Repository directly
// @license     MIT
// @author      Davy (forked form Justin Grote)
// @namespace   https://github.com/david50407
// @include     https://github.com/*
// @run-at      document-end
// @grant       none
// @connect     github.com
// @connect     githubusercontent.com
// @require     https://greasyfork.org/scripts/28721-mutations/code/mutations.js?version=882023
// @require     https://gist.githubusercontent.com/david50407/6bf0c7d8d915709ccf7cea1cf8adbbfd/raw/3b0faff7e1aacd2b2f929fb8c1c873ff00b54afe/experimental.object.prototype.tap.js
// @icon        https://github.githubassets.com/pinned-octocat.svg
// @supportURL  https://github.com/david50407
// ==/UserScript==

(() => {
  "use strict"

  // Change scheme for different vairants of VSCode
  // *   stable - `vscode://`
  // * insiders - `vscode-insiders://`
  const codeScheme = 'vscode-insiders://'
  const identifier = 'gh-open-in-vscrr'

  // Icon modified from https://commons.wikimedia.org/wiki/File:Visual_Studio_Code_1.35_icon.svg
  const icon = `
<svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg" class="octicon">
  <path d="M176.049 250.669C180.838 255.459 188.13 256.7 194.234 253.764L246.94 228.419C252.478 225.755 256 220.154 256 214.008V42.1479C256 36.0025 252.478 30.4008 246.94 27.7374L194.234 2.39089C188.13 -0.544416 180.838 0.696607 176.049 5.48572C181.95 -0.41506 192.039 3.76413 192.039 12.1091V244.046C192.039 252.391 181.95 256.57 176.049 250.669Z" />
  <path d="M181.379 180.646L114.33 128.633L181.379 75.5114V17.794C181.379 10.8477 173.128 7.20673 167.996 11.8862L74.6514 97.8518L31.1994 64.1438C27.1081 61.039 21.3851 61.294 17.5853 64.7476L3.48974 77.5627C-1.15847 81.7893 -1.16367 89.0948 3.47672 93.3292L167.98 244.185C173.107 248.887 181.379 245.249 181.379 238.292V180.646Z" />
  <path d="M36.6937 134.195L3.47672 162.828C-1.16367 167.062 -1.15847 174.37 3.48974 178.594L17.5853 191.409C21.3851 194.863 27.1081 195.118 31.1994 192.013L69.4472 164.057L36.6937 134.195Z" />
</svg>
`

  const openInVSCodeLink = () => `${codeScheme}github.remotehub/open?url=${encodeURIComponent(window.location.href)}`

  const insertOptionInGetRepoModal = () => {
    if (document.querySelector(`.${identifier}`)) {
      return
    }

    document
      ?.querySelector('[data-target="get-repo.modal"]')
      ?.querySelector('[data-open-app="link"]')
      ?.parentElement
      ?.before(document.createElement('li').tap((el) => {
        el.className = `${identifier} Box-row Box-row--hover-gray p-3 mt-0`

        el.appendChild(document.createElement('a').tap((a) => {
          a.className = 'd-flex flex-items-center color-text-primary text-bold no-underline'
          a.rel = 'nofollow noopener noreferrer'
          a.href = openInVSCodeLink()
          a.target = '_blank'
          a.innerHTML = icon
          a.ariaLabel = 'Using Visual Studio Code'
          a.append('Open with Remote Repository')

          a.querySelector('svg').classList.add('mr-2')
        }))
      }))
  }

  const insertInFilePreviewToolbar = () => {
    if (document.querySelector(`.${identifier}-toolbar`)) {
      return
    }

    document
      ?.querySelector('[data-target="readme-toc.content"]')
      ?.querySelector('.BtnGroup')
      ?.after(document.createElement('a').tap((a) => {
        a.className = `${identifier}-toolbar btn-octicon tooltipped tooltipped-nw`
        a.href = openInVSCodeLink()
        a.innerHTML = icon
        a.ariaLabel = 'Open in Remote Repository using VS Code'

        a.querySelector('svg').classList.add('octicon-desktop')
      }))
  }

  const init = () => {
    insertOptionInGetRepoModal()
    insertInFilePreviewToolbar()
  }

  const openOnCommaDown = (evt) => {
    if (evt.code == "Comma" && evt.target.tagName == "BODY") {
      window.location.href = openInVSCodeLink()
    }
  }

  document.addEventListener("keydown", openOnCommaDown, true)
  document.addEventListener("ghmo:container", init)
  document.addEventListener("pjax:end", init)

  init()
})()