非エンジニアの私がChromeの拡張機能を使ってKoTの機能追加をやってみた

• URL: https://dev.classmethod.jp/articles/20260617_chrome_application
• 日付: 2026-06-26
• Tier: Tier 2
• 要旨: 非エンジニアの社員が Claude（Sonnet 4.6）を活用し、勤怠管理システム KoT（King Of Time）向けの Chrome 拡張機能を自作した体験記。日々の労働基準時間との差分と月累計を表示する機能を、プロンプトによるコード生成とエラー対話を繰り返して実現した。専門知識がなくても AI と対話しながら小さな改善ができることを示す実例。

詳細

著者はクラスメソッド製造ビジネステクノロジー部の細見氏。所属会社では 5:00〜22:00 のコアタイムなしフレックス勤務を試行中で、勤怠管理システム KoT（King Of Time）に日次の労働基準時間（8時間）との差分表示と月中累計残業時間の機能が存在しないことが開発の動機。

Claude Sonnet 4.6 に相談し、manifest.json・content.js・style.css の 3 ファイル構成の Chrome 拡張機能コードを生成してもらった。実装上は Content Script で KoT のページ DOM を操作し、テーブル右端に差分列と月計行を追加する手法をとる。

開発中に「DOM 操作」の意味が分からず躓く、エラーメッセージのスクリーンショットを Claude に投げて対処法を確認する、VS Code がインストールされていないため別ファイル保存方法を再確認する、拡張機能インストール後も KoT 画面に反映されないためデバッグを繰り返す、といった試行錯誤が記録されている。Sonnet 4.6 が途中でファイル名の問題を指摘する前に別の解決策を提示するなど、モデルの回答精度の揺れも具体的に言及。最終的に KoT の画面上に差分列と月計が表示されることを確認した。記事末尾では社内 IT 部門への事前確認・承認を推奨している。