PageTalk — ウェブ上で音声入力を実現するChrome拡張

AI/ML
PageTalk — ウェブ上で音声入力を実現するChrome拡張

PageTalk — ウェブ上で音声入力を実現するChrome拡張

PageTalkは、任意のウェブページ上の入力欄やリッチテキストエディタで音声入力を可能にするオープンソースのChrome拡張です。画面上にドラッグ可能なマイクのフローティングボタンを表示し、クリックやカスタムショートカットで録音を開始・停止。検索、SNS、メール、オンライン文書など幅広い場面でハンズフリー入力を実現します。軽量なJavaScript構成で、既存のフォームやエディタに自然に組み込める点が特徴です。（約300字）

https://github.com/yeahhe365/PageTalk

概要

PageTalkは、Chrome拡張として動作する音声入力ツールで、ウェブ上のどんなテキスト入力フィールドにもマイクからの音声を文字として入力できます。インタフェースはページに重ねるドラッグ可能なフローティングマイクボタンが中心で、クリックで録音開始/停止、あるいはユーザーが設定したグローバルショートカットキーで操作できます。SNSやメール、検索、オンラインエディタなど、マウス／キーボード操作を減らしたいケースに最適で、アクセシビリティ向上や生産性改善に貢献します。実装はJavaScriptベースで軽量、拡張は比較的少ない依存で動作するのが特徴です。

GitHub

リポジトリの統計情報

  • スター数: 9
  • フォーク数: 1
  • ウォッチャー数: 9
  • コミット数: 4
  • ファイル数: 4
  • メインの言語: JavaScript

主な特徴

  • フローティングのドラッグ可能なマイクボタンでどのページでも即座に音声入力が可能
  • ページ上の通常の入力欄、テキストエリア、リッチテキストエディタに対応
  • カスタマイズ可能なグローバルショートカットによるハンズフリー操作
  • 軽量JavaScript実装でブラウザネイティブAPIと親和性が高い

技術的なポイント

PageTalkはChrome拡張として、ページに直接UI要素（フローティングマイク）を注入して動作します。注入されたボタンはドラッグ&ドロップで位置を変更でき、クリックで録音の開始/停止を切り替えるUXを持ちます。音声認識のエンジンはリポジトリ内に明示的なバックエンドは見当たりませんが、ブラウザ拡張でローカルに音声入力を実現する一般的な手法としてはWeb Speech API（SpeechRecognition）を利用する設計が自然です。これによりユーザーのマイクアクセスをブラウザが管理し、スペーチ→テキスト変換をクライアント側で完結できます。

コンテンツスクリプトはページのDOMを監視し、フォーカス中の入力要素やリッチテキストエディタ（contentEditable）を検出して変換したテキストを挿入します。リッチテキスト対応では単純な value プロパティの更新だけでなく、カーソル位置や選択範囲へのテキスト挿入、既存HTML構造を壊さないための慎重なノード操作が必要です。キーボードショートカットはChromeのcommands APIを使ってグローバルに設定可能で、これでマウスに頼らず録音操作を行えます。

設定の永続化やユーザープリファレンス保存には chrome.storage（または同等のストレージ）を使う想定で、例えばボタンの位置、ショートカット、言語設定などを保存します。拡張の権限周りでは activeTab や storage、commands、microphone（ブラウザにより不要）などが関係しますが、マニフェスト（v2/v3）による差異を意識した実装・移行が重要です。安全性・プライバシー面では、ユーザー音声データが外部サーバに送信されるかどうかを明示する必要があり、可能ならクライアント側完結（Web Speech API等）を推奨します。

拡張の軽量さとシンプルなファイル構成から、カスタム対応や他プロジェクトへの統合も容易です。将来的な拡張としては、音声コマンドによる操作（「送信」や「改行」などのコマンド語）や多言語サポート、外部ASRサービス連携（高精度化）、オフラインモデルの利用などが考えられます。

プロジェクトの構成

主要なファイルとディレクトリ：

  • .DS_Store: file
  • LICENSE: file
  • README.md: file
  • pagetalk: dir

まとめ

シンプルで導入しやすい音声入力拡張。アクセシビリティと作業効率化に有用。

リポジトリ情報：

READMEの抜粋：

PageTalk - 让网页听懂你的话 🎙️

English | 中文

PageTalk 是一款开源的 Chrome 浏览器扩展，它能让你在任何网页的文本框中通过语音进行输入，彻底解放你的双手。无论是在搜索引擎、社交媒体、电子邮件还是在线文档中，只需点击悬浮按钮或按下快捷键，即可开始说话，文字便会自动输入。 PixPin_2025-09-13_13-40-04

✨ 主要功能

  • 🌐 随处可用: 在任何网页的输入框、文本域或富文本编辑器中都能使用语音输入。
  • 🖱️ 悬浮按钮: 界面上会显示一个可拖动的悬浮麦克风按钮，单击即可开始/停止录音。
  • ⌨️ 快捷键支持: 完全可自定义的全局快捷键，让你无需鼠标也能高效操作。
  • …