AtCoder で Haskell の提出リンクを常駐表示する TamperMonkey スクリプト (出来は非常に悪いです)

atcoder-sidebar.js

// ==UserScript==
// @name         AtCoder Sidebar
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Adds a sidebar for comfortable navigation.
// @author       toyboot4e
// @license      MIT
// @match        https://atcoder.jp/contests/*
// @exclude      https://atcoder.jp/contests/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=atcoder.jp
// @grant        GM_addStyle
// ==/UserScript==

// TODO: use strict?
// TODO: scoping?

const gCSS = `
#AtCoderSidebar {
    position: absolute;
    left: 200px;
    top: 230px;
    font-size: 1.2em;
}
`;

const GetContestId = () => {
    const prefix = "/contests/"

    // URL example: https://atcoder.jp/contests/abc301/tasks/abc301_a
    const pathname = location.pathname;
    if (!pathname.startsWith(prefix)) {
        return null;
    }

    const parts = pathname.slice(prefix.length).split("/");
    if (parts.length == 0) {
        return null;
    }

    return parts[0];
}

const InsertProblemLinks = (contestId) => {
    // constants
    const sidebarId = "AtCoderSidebar";
    const problemNames = ["A 問題", "B 問題", "C 問題", "D 問題", "E 問題", "F 問題", "G 問題", "EX 問題"];
    const problemChars = ["a", "b", "c", "d", "e", "f", "g", "h"];
    const allSubmissionsName = "すべての提出 (Haskell)";
    const submissionsName = "提出結果 (Haskell)";
    const baseURL = "https://atcoder.jp/contests/";

    // container
    const container = document.createElement("div");
    container.id = sidebarId;

    // all submissions
    {
        const p = document.createElement("p");
        // https://atcoder.jp/contests/abc301/submissions?f.Task=&f.LanguageName=Haskell&f.Status=&f.User=

        const a = document.createElement("a");
        a.textContent = allSubmissionsName;
        a.href = `${baseURL}${contestId}/submissions?f.Task=&f.LanguageName=Haskell&f.Status=&f.User=`;

        p.appendChild(a);
        container.appendChild(p);
    }

    // problem URLs
    for (let i = 0; i < problemNames.length; i++) {
        const name = problemNames[i];
        const ch = problemChars[i];
        const taskName = `${contestId}_${ch}`;

        // TODO: easier DOM creation?
        const p = document.createElement("p");

        const problem = document.createElement("a");
        problem.textContent = name;
        problem.href = `${baseURL}${contestId}/tasks/${taskName}`;

        // FIXME: use CSS for spacing
        const space = document.createElement("span");
        space.textContent = "　";
        // https://atcoder.jp/contests/abc301/submissions?a.Task=&a.LanguageName=Haskell&f.Status=&f.User=
        // https://atcoder.jp/contests/abc301/submissions?f.Task=abc301_a&f.LanguageName=Haskell&f.Status=&f.User=

        const subs = document.createElement("a");
        subs.textContent = submissionsName;

        // ?f.Task=abc301_a&f.LanguageName=Haskell&f.Status=&f.User=
        const query = `f.Task=${taskName}&f.LanguageName=Haskell&f.Status=&f.User=`;
        subs.href =`${baseURL}${contestId}/submissions?${query}`;

        p.appendChild(problem);
        p.appendChild(space);
        p.appendChild(subs);
        container.appendChild(p);
    }

    // submission URLs

    document.body.appendChild(container);
};

const SetupAtcoderSidebar = (contestId) => {
    InsertProblemLinks(contestId);
}

(() => {
    'use strict';

    const contestId = GetContestId();
    if (contestId == null) {
        return;
    }

    GM_addStyle(gCSS);

    SetupAtcoderSidebar(contestId);
})();