はじめに
この記事は新歓ブログリレー2026 11日目の記事です。
こんにちは！25B の @o_o です
みなさんは AtCoder で問題を解くとき、ユーザースクリプト使っていますか？
こういうのとか
こういうの
使ってない方はインストールの方法を検索してみてください。丸投げです。
使っている方へ、
問題を解くときにちょっと不便だな、でもそれを改善するユーザースクリプトないなってなったことはありませんか？
私は普段このように画面を二つに分けているのですが、コンテスト名が見えないのが不便だなと思っていました。(大きいディスプレイを使うべき)
左側にでかでかとコンテスト名が見えてほしいですよね。
Tampermonkey ってなに
簡単に言うと、今見ているWebページの見た目や動きを、好きなように簡単に改造できちゃうブラウザ拡張機能です。間違っていたらごめんなさい
JavaScriptを書くことで、特定のサイト（今回ならAtCoder）を開いたときに、自動で自分の用意したプログラムを走らせることができます。
「ここにボタンが欲しいな」「この文字もっと大きくしたいな」「コンテスト名をでかでかと表示させたいな」みたいなことをめんどくさいことを無視して書けちゃいます！
どうやって書くの
Tampermonkey インストールされていますか？
インストールされているなら
ここの「新規スクリプトを追加...」ボタンを押して
こんな画面が開かれたら成功です！
ご丁寧に Your code here... とあるのでここに自分のコードを書いたら動きます！
以下が書いたコードです
// ==UserScript==
// @name atcoder Problem Name Inserter
// @namespace http://tampermonkey.net/
// @version 2025-12-13
// @description window サイズが小さくてもコンテスト名が表示されるようにします
// @author You
// @match https://atcoder.jp/contests/*/tasks/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
const contestId = location.pathname.split("/")[2].toUpperCase()
const markup = `
<div id="contest-name"
class="h3">
${contestId}
</div>
`;
document.querySelector("#contest-nav-tabs + div").insertAdjacentHTML("afterbegin", markup);
})();
解説
やっていることは、ざっくり以下の4ステップです！誰でもできちゃいますね
1. 説明とか書く
ここではどのページでこのプログラムを実行するのかや表示名、説明を書きます。
公開する予定がないのであれば以下だけ書けば大丈夫です。
// ==UserScript==
// @name atcoder Problem Name Inserter
// @namespace http://tampermonkey.net/
// @version 2025-12-13
// @description window サイズが小さくてもコンテスト名が表示されるようにします
// @author You
// @match https://atcoder.jp/contests/*/tasks/*
// @grant none
// ==/UserScript==
name
こんな感じで表示されます。自分がわかれば問題ないです。
description
ホバーすると出てきます。自分がわかれば問題ないです。
match
一番重要です！どのページで実行するかを指定します。https://atcoder.jp/contests/*/tasks/* のようにどんなものでもいいところを * にして書きます。
1. URL からコンテスト名を持ってくる
コンテスト名を表示したいので、URL から引っ張ってきましょう
const contestId = location.pathname.split("/")[2].toUpperCase()
location.pathname で現在のURLのパス(例: /contests/abc000/tasks/abc000_a) を取得します。
それを split("/") で / ごとに切り刻み、3番目の要素（インデックスは [2]）を取り出しています。
コンテスト名はやっぱり大文字のイメージがあるので、最後に toUpperCase() を使って、小文字を大文字（abc000 → ABC000）に変換しています
2. 差し込みたい HTML 要素を定義する
先ほど取得した contestId を使って、画面に表示させるための DOM の中身を markup という変数に用意します。AtCoder の既存のデザインに馴染むように class="h3" を指定して、いい感じの大きさの見出しになるようにしています。
3. 差し込みたい場所を探して差し込む
ブラウザの開発者モード使って差し込む場所を特定します。querySelector はページ内で一番最初に一致した要素を取得できます。id やクラス名で指定できるため、差し込みたい場所の周辺で他とかぶってなさそうなところを選択します。
今回は contest-nav-tabs を選択しました。
この contest-nav-tabs の次の div のすぐ内側、最初の子の前に差し込みたいため、querySelector("#contest-nav-tabs + div")で指定します。
次に、insertAdjacentHTML("afterbegin", markup)で差し込みます。insertAdjacentHTML には afterbegin のほかにも引数はあるので適切なものを選んでください。
https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML#引数
おわりに
できました！！！
見た目にそこまでこだわらない自分用の簡単な機能であればこれだけでできちゃいます！
皆さんもぜひ、ユーザースクリプトで快適な競技プログラミングライフを送りましょう！
明日の投稿者は@zoi_dayo さんです！
