Arrow Button Mapper

Arrow Button Mapper は、Web ページ上のリンクやボタンを ← / → キーで操作できる Chrome 拡張機能です。電子書籍ビューア、画像ギャラリー、検索結果、社内ツールなどで、サイトごとに「前へ」「次へ」の操作をキーボードへ割り当てられます。

矢印キーでページ移動できるサイトが増える一方、未対応のサイトでも同じ操作感を得られるように作りました。

CSS セレクタを手入力する代わりに、ページ上の対象を一度クリックして操作を記憶させることもできます。ページ番号が変わるリンクでは、変化する番号ではなく URL の固定部分とページネーション内の位置を優先して記憶するため、次のページへ移動した後も操作を続けられます。

実装を読むための入口として、実装を読むためのガイド も用意しています。

主な機能

機能	内容
クリックによる操作記憶	← または → を選び、ページ上のリンク・ボタンを 1 回クリックするだけで割り当てを保存します。
ページ別の操作ペア	URL 条件ごとに、左右それぞれの対象要素を設定できます。
親子 URL の優先順位	複数の条件に一致した場合、より具体的な URL 条件を自動で優先します。
手入力による調整	URL パターンと CSS セレクタを直接編集・削除できます。
設定の移行	設定を JSON 形式でエクスポート・インポートできます。
安全なキー処理	入力欄や編集可能な領域では、通常の矢印キー操作を妨げません。

インストール

現在は、Chrome のデベロッパーモードで展開済み拡張機能として読み込んで使用します。

1. このリポジトリを ZIP でダウンロードして展開するか、git clone で取得します。
2. Chrome で chrome://extensions を開き、右上の デベロッパー モード を有効にします。
3. パッケージ化されていない拡張機能を読み込む を選び、このリポジトリのフォルダー（manifest.json が直接入っているフォルダー）を指定します。
4. 必要に応じて、Chrome の拡張機能メニューから Arrow Button Mapper をツールバーへ固定します。

Chrome での展開済み拡張機能の読み込み方法は、Chrome Extensions: Hello World も参照してください。

最短の使い方: 操作を記憶する

1. 矢印キーで操作したいページを開きます。
2. ツールバーの Arrow Button Mapper を開きます。
3. ← の操作を記憶 または → の操作を記憶 を選びます。ページ側で録画開始が受理されると、ポップアップは自動で閉じます。
4. ページ右下に案内が出たら、実際に押したいリンクまたはボタンを 1 回クリックします。
5. 保存完了の案内が表示されたら、← または → を押して動作を確認します。

記憶中のクリックは、設定を保存するためだけに使用されます。リンク遷移やボタン本来の処理は実行されません。Esc を押すと保存せずに中止できます。

自動記憶では、現在の URL の オリジン + パス を URL 条件として保存します。例えば https://reader.example.com/book/42?page=3 で記憶すると、https://reader.example.com/book/42 が保存され、同じ本のページ番号が変わっても適用されます。

手入力で設定する

自動記憶した内容を調整したい場合や、ページ上でクリックできない要素を指定したい場合は、ポップアップの 新しい操作ペア から次の値を入力します。

項目	説明	例
URL パターン	適用範囲となる URL の先頭部分です。配下 URL にも適用されます。	https://reader.example.com/book/
← キー用 CSS セレクタ	左キーでクリックする要素です。	button.previous、#prev
→ キー用 CSS セレクタ	右キーでクリックする要素です。	button.next、#next

URL 条件は前方一致です。例えば https://reader.example.com/book/ は、https://reader.example.com/book/42?page=3 にも適用されます。複数の条件が一致する場合は、より具体的な条件を優先します。

汎用設定: https://reader.example.com/
個別設定: https://reader.example.com/book/

上記の両方を登録した場合、/book/ 配下では個別設定が使われます。URL の途中で任意の文字列を許可したい場合だけ、* を使用してください。

設定のインポート・エクスポート

ポップアップの 設定の移行 セクションから、拡張機能の有効・無効状態と操作ペアを JSON ファイルに保存できます。別の Chrome プロファイルや端末へ設定を移す場合は、先にエクスポートした JSON ファイルを 設定をインポート から選択してください。

インポートでは、現在の操作ペア全体がファイルの内容に置き換わります。先に現在の設定をエクスポートしてバックアップすることをおすすめします。不正な JSON、URL パターン、CSS セレクタを含むファイルは保存前に拒否します。

権限とプライバシー

項目	用途
storage 権限	操作ペア、有効状態、インポート済み設定を保存するために使用します。
tabs 権限	ポップアップから、現在表示しているタブで操作記憶を開始するために使用します。
ページアクセス	http / https のページで、登録済み操作の実行と、ユーザーが開始した操作記憶にのみ使用します。

拡張機能は、ページ内容や閲覧履歴を外部サービスへ送信しません。設定のエクスポートを行った場合は、ユーザーが選択した場所に JSON ファイルが保存されます。

開発・検証

追加のパッケージインストールは不要です。Node.js が利用できる環境で、リポジトリ直下から次のコマンドを実行できます。

npm test

個別に実行する場合は、node --check content.js、node --check popup.js、node verify-content.js、node verify-recording.js、node verify-popup.js を利用できます。

ファイル	役割
manifest.json	Manifest V3 の設定と拡張機能アイコンの定義です。
content.js	URL 照合、キー操作、クリック記憶、セレクタ生成を実装します。
popup.html / popup.css / popup.js	設定、録画開始、JSON 移行を提供するポップアップです。
verify-*.js	主要なキー操作、クリック記憶、設定移行を確認するローカル検証です。

フィードバック

不具合報告や改善提案は、このリポジトリの Issues でお知らせください。問題が発生したページでは、可能であれば URL（公開してよいものに限ります）、対象ボタンの HTML、期待する左右キーの動作を添えてください。

参考資料

• Chrome Extensions: Hello World — Chrome for Developers