Github IDE Preview

Open a github repo in an online code editor (similar to VSCode)!

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

You will need to install an extension such as Tampermonkey to install this script.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         Github IDE Preview
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Open a github repo in an online code editor (similar to VSCode)!
// @author       Bartholomé Gili (https://barthofu.me)
// @match        https://github.com/*/*
// @icon         https://img.stackshare.io/service/25068/default_0f7f9aa5d96a272083e318ee229eb9899f8f1780.png
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let queryResult = document.querySelector(".file-navigation");

    if (queryResult) {

        const redirectUrl = window.location.href.split("://github.com").join("://github1s.com"),
              splittedContent = document.querySelector(".file-navigation").innerHTML.split("\"flex-auto\"></div>");

        document.querySelector('.file-navigation').innerHTML = splittedContent[0] + `"flex-auto"></div>

            <a class="ide-preview btn ml-2 d-none d-md-block" href="${redirectUrl}">IDE Preview</a>

        ` + splittedContent[1];

        let myElement = document.querySelector('.ide-preview');

        myElement.style.backgroundColor = "var(--color-scale-blue-5)";
        myElement.style.color = "var(--color-btn-primary-text)";

    }

})();