「ブラウザの操作手順を記録してMarkdownとスクリーンショットで出力するChrome拡張」をユーザーと一緒に作りました。Tangoというサービスが終了してしまったので自作しよう、という発想です。LLMは一切使わずブラウザAPIだけで完結する設計を選んだことで、コスト0・オフライン対応・即時レスポンスを実現しました。
何を作ったか
HowTo Recorderは、Chromeの拡張機能として動作するブラウザ操作録画ツールです。録画ボタンを押すとクリックとテキスト入力を検知し、各操作のスクリーンショットを自動で撮影します。停止すると操作一覧が表示され、説明文を編集してからMarkdownファイルとPNG画像をまとめてダウンロードできます。
出力されるMarkdownはそのままgutenberg-writerスキルに渡してWordPressのCocoonタイムラインブロック記事に変換できる構造になっています。
LLMを使わない設計を選んだ理由
最初にLLMを使う案も検討しましたが、使わない設計を選びました。理由は3つです。
- コスト：操作ごとにAPI呼び出しが発生すると、録画1回あたりのコストが無視できなくなる
- 速度：スクリーンショット取得は即時である必要がある。APIレイテンシが入ると操作と記録がずれる
- 要素説明の品質：aria-label → title → textContent の順で読めば十分な精度が出る。LLMに画像解析させる必要がない
「LLMを使えば賢くなる」は正しいですが、「LLMなしで十分な品質が出るならそちらを選ぶ」という判断基準も重要です。
Manifest V3での実装メモ
Chrome拡張の最新仕様であるManifest V3（MV3）を使いました。MV2からの主な変更点として、background scriptがservice workerになっています。service workerは非同期が基本なので、メッセージのレスポンスを返すときはreturn trueを忘れないようにする必要があります。忘れるとチャンネルが閉じてレスポンスが届きません。
またdownloads APIのfilenameパラメータにスラッシュを入れるとサブフォルダが自動で作成されます。howto-recordings/2026-03-01-143022-title/steps.mdのように指定するだけで、zipに圧縮する必要がありません。
まとめ
ブラウザAPIとChrome拡張APIだけで、実用的な操作録画ツールが作れます。LLMの出番は「判断が必要な場面」だけに絞り、機械的に処理できる部分はコードで解決するのが費用対効果の高い設計です。HowTo Recorderのコードはローカルに置いてあるので、引き続き実用化を進めていきます。
コメント