Edge Local File Enhancer

Enhance the experience of viewing local files on Edge.
As of 2023-10-19. See the latest version.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Edge Local File Enhancer
// @namespace    http://tampermonkey.net/
// @version      0.1.1
// @description  Enhance the experience of viewing local files on Edge.
// @author       PRO
// @match        file:///*/
// @icon         data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABt0lEQVR42oxStZoWQRCs2cXdHTLcHZ6EjAwnQWIkJyQlRt4Cd3d3d1n5d7q7ju1zv/q+mh6taQsk8fn29kPDRo87SDMQcNAUJgIQkBjdAoRKdXjm2mOH0AqS+PlkP8sfp0h93iu/PDji9s2FzSSJVg5ykZqWgfGRr9rAAAQiDFoB1OfyESZEB7iAI0lHwLREQBcQQKqo8p+gNUCguwCNAAUQAcFOb0NNGjT+BbUC2YsHZpWLhC6/m0chqIoM1LKbQIIBwlTQE1xAo9QDGDPYf6rkTpPc92gCUYVJAZjhyZltJ95f3zuvLYRGWWCUNkDL2333McBh4kaLlxg+aTmyL7c2xTjkN4Bt7oE3DBP/3SRz65R/bkmBRPGzcRNHYuzMjaj+fdnaFoJUEdTSXfaHbe7XNnMPyqryPcmfY+zURaAB7SHk9cXSH4fQ5rojgCAVIuqCNWgRhLYLhJB4k3iZfIPtnQiCpjAzeBIRXMA6emAqoEbQSoDdGxFUrxS1AYcpaNbBgyQBGJEOnYOeENKR/iAd1npusI4C75/c3539+nbUjOgZV5CkAU27df40lH+agUdIuA/EAgDmZnwZlhDc0wAAAABJRU5ErkJggg==
// @grant        none
// @license      gpl-3.0
// ==/UserScript==

(function() {
    'use strict';
    const path = location.href;
    if (!path.startsWith("file:///") || !path.endsWith("/")) return;
    const debug = false;
    const log = debug ? console.log.bind(console, "[ELFE]") : () => {};
    const $ = document.querySelector.bind(document);
    const $$ = document.querySelectorAll.bind(document);
    // const try_remove = (sel) => { const el = $(sel); if (el) el.remove(); };

    const header = $("h1#header");
    const css = document.createElement("style");
    css.id = "elfe-css";
    css.textContent = `
        h1#header > a { color: initial; text-decoration: none; transition: color 0.2s ease-in-out; }
        h1#header > a:hover { color: -webkit-link; }
        table { margin: 0.5rem 0; width: auto; }
        table td, table th { padding: 0.3rem 0.5rem; vertical-align: middle; }
        #parentDir { padding: 0 0.5em 0; }
        thead th { border-left: 1px solid gray; border-right: 1px solid gray; transition: background-color 0.2s ease-in-out; }
        thead th:hover { background-color: #4d4d4d; }
    `;
    $("head").appendChild(css);

    $("div#parentDirLinkBox").style.display = "none";
    const delimeter = header.textContent.includes("\\") ? "\\" : "/";
    const split = header.textContent.split(delimeter);
    const parts = split.slice(0, -1);
    header.innerHTML = '<a href="../" id="parentDir">↑</a>'
        + parts.map((part, i) =>
            `<a href="${parts.slice(0, i + 1).join(delimeter)}${delimeter}">${part}</a>`
        ).join(delimeter) + split.slice(-1)[0];

    $$("td").forEach(td => {
        td.title = td.getAttribute("data-value") || td.textContent;
    });

    const parentDir = $("#parentDir");
    document.addEventListener("keydown", e => {
        switch (e.key) {
            case "ArrowUp":
                if (parentDir) parentDir.click(); break;
            case "ArrowLeft":
                history.back(); break;
            case "ArrowRight":
                history.forward(); break;
            default: break;
        }
    });
})();