もう「いつ聞いたっけ？」と迷わない！ClaudeのチャットのタイムスタンプをつけるChrome拡張機能

Chrome拡張 AI LLM コンピュータ 開発

ClaudeのWeb版を使っていて、「いつ質問したか」 「会話一覧のチャット日時」がパッと見でわかりにくいと感じたことはありませんか？

「何日前なんかで表示されてもなあ…😨」

そこで、Claudeのチャット画面とChatの履歴ページにタイムスタンプを表示するChrome拡張機能を作成しました。ChatGPTではこの機能を持ったChrome拡張機能は公開されています。

ソースコードは以下に公開しています。

github.com

機能

1. チャット画面の時刻表示

ユーザーの質問の上に、送信時刻を自動表示します。

使用前

使用後

表示形式: 2025/10/22 - 13:47:35

2. Recentsページの時刻表示

会話一覧の「○分前」などの相対時間を、具体的な日時に変換します。

使用前

使用後

  • 1 時間前 → 2025/10/22 - 12:47:35
  • 3日前 → 2025/10/19 - 13:47:35

元の表示はマウスをホバーすると確認できます。このあたりすこし表示バグあるかも🙇

開発時のトラブル

Recents（チャット履歴）ページの時刻変換が動かない

最初のバージョンでは、タイムスタンプのパースは成功していても、画面上の表示が変わりませんでした。

原因

正規表現が「1時間前」（スペースなし）にしか対応していなかった、実際には1と時間の間にスペースがありました。「1 時間前」（スペースあり）。スペースなんて気が付かないよ😨

解決策

正規表現に \s* を追加し、スペースの有無に対応させました。

インストール方法

  1. リポジトリのクローン
  2. 拡張機能のZIPファイルをダウンロードして解凍
  3. Chromeで chrome://extensions/ を開く
  4. 右上の「デベロッパーモード」をON
  5. 「パッケージ化されていない拡張機能を読み込む」をクリック
  6. 解凍したフォルダを選択

アイコン画像

これで完了です。ツールバーにアイコンが表示されます。 リポジトリにあるアイコンファイルはお好きな画像に差し替えるとよいでしょう🫡

ファイル構成

claude-timestamp-extension/
├── manifest.json      # 拡張機能の設定
├── content.js         # メインロジック
├── styles.css         # スタイル
└── icons/             # アイコン画像（3サイズの画像を登録しています）
  • タイムスタンプ形式　…　YYYY/MM/DD - HH:MM:SS（24時間表記）
  • 対応パターン　…　日本語・英語の相対時間（秒前、分前、時間前、日前、週間前、ヶ月前）

おわりに

Web APIを使わず、純粋にフロントエンドだけでタイムスタンプ機能を実装できました。相対時間からの逆算は完璧ではありませんが、実用上は十分です。

Chrome拡張の開発は、思ったよりシンプルで、ユーザー体験の改善に直結するのが面白いですね。