AtCoder Copy Contest ID

Add a button to copy the contest ID to the clipboard in AtCoder contest pages

2023-04-12 기준 버전입니다. 최신 버전을 확인하세요.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// ==UserScript==
// @name               AtCoder Copy Contest ID
// @name:ja            AtCoder Copy Contest ID
// @namespace          https://github.com/xe-o
// @version            0.1
// @description        Add a button to copy the contest ID to the clipboard in AtCoder contest pages
// @description:ja     AtCoderコンテストページのナビゲーションバーへ、コンテストIDをコピーするためのボタンを追加します
// @author             XERO
// @license            MIT
// @match              https://atcoder.jp/*
// @grant              GM_setClipboard
// @run-at             document-idle
// ==/UserScript==

const COPY_BUTTON_LABEL_INIT = "Copy Contest ID";
const COPY_BUTTON_HTML = `
  <li>
    <a id="contest-id-copy-button" style="cursor: pointer; font-size: 12px">
      <span class="glyphicon glyphicon-copy" style="margin-right: 2px" aria-hidden="true"></span>
      <span id="copy-button-text">${COPY_BUTTON_LABEL_INIT}</span>
    </a>
  </li>`;

const $ = (selector) => document.querySelector(selector);
const getContestID = () => window.location.pathname.split("/")[2];

const navbarElement = $(".navbar-nav");
if (!navbarElement) throw new Error("Navbar element not found.");
navbarElement.insertAdjacentHTML("beforeend", COPY_BUTTON_HTML);

const copyButton = $("#contest-id-copy-button");
const copyButtonIcon = $(".glyphicon", copyButton);
const copyButtonLabel = $("#copy-button-text");

async function copyToClipboard() {
  try {
    await GM_setClipboard(getContestID(), {
      type: "text",
      mimetype: "text/plain",
    });
    copyButtonIcon.classList.replace("glyphicon-copy", "glyphicon-ok");
  } catch (error) {
    console.error(`Failed to copy contest ID: ${error}`);
    copyButtonIcon.classList.replace("glyphicon-copy", "glyphicon-remove");
  } finally {
    const copyResultText = copyButtonIcon.classList.contains("glyphicon-ok")
      ? "Copied!"
      : "Failed to copy.";
    copyButtonLabel.textContent = copyResultText;
    setTimeout(() => {
      copyButtonLabel.textContent = COPY_BUTTON_LABEL_INIT;
      copyButtonIcon.classList.replace(
        "glyphicon-ok",
        "glyphicon-copy",
        "glyphicon-remove"
      );
    }, 1800);
  }
}

copyButton.addEventListener("click", copyToClipboard);