キーボード入力を拾ってページ内を移動するブラウザ拡張機能

作ったもの

作ったものは e-Gov の法令で、数字入力で目的の条文に移動するためのブラウザ拡張です。

今回も GitHub Copilot と Gemini にお世話になりました。AI なしでは、作るのに時間がかかりすぎて、作ろうという気にならなかったと思います。

数百条あるような条文だと、目的の条文に移動するのが大変なんですよね。目次はありますが、目次自体が長くなってしまうことも多いです。"参照したいのは456条だけなんだけど" といった場合にこの拡張機能が活躍します。

様々なページで応用が可能です

キーボードイベントを拾ってページ内を移動するので、e-Gov 以外の様々なページで応用が可能です。独自の拡張機能を作ることで、特定のページ限定のショートカットキーを設定することができます。

たとえば、このへんのコード

document.addEventListener("keydown", (event) => {
    // 1. 入力フォームにフォーカスがある場合は拡張機能の処理をスキップ
    const activeTag = document.activeElement.tagName;
    if (activeTag === "INPUT" || activeTag === "TEXTAREA" || document.activeElement.isContentEditable) {
        return;
    }

    // 2. 数字キー（テンキー含む）が押された場合
    if (/^(Digit|Numpad)\d$/.test(event.code)) {
        // IME や OS 標準の入力を強制的にブロック
        event.preventDefault(); 

        // "Digit3" や "Numpad5" から数字のみを抽出
        const numStr = event.code.slice(-1);
        numberBuffer += numStr;
        
        updateToast();

        // 2秒間放置されたら入力をリセット
        clearTimeout(timeoutId);
        timeoutId = setTimeout(clearBuffer, 2000);
        return;
    }
// 以下略

特定のキーボードイベントの入力によって JavaScript の function を動かすので、function でできるような動作なら基本的に実現可能です。

また、拡張機能ではなくウェブサイトを作る場合でも使えるテクニックですね。長い文章を扱うページで、数字入力でのチャプター移動を実現できます。そのページ限定でのショートカットキーということですね。

この方法のメリットは、IME がオンの場合でも動作することです。

この拡張機能自体は使う人が限られるし、めちゃくちゃ簡単なものなのですが、やっていることの応用範囲が広いので記事化しました。

関連記事