検証

【コード不要】GensparkのSpeaklyをChromebookで使う方法|AIだけでChrome拡張機能を自作してみた

takemako

どうも、Chromebookを15台以上使い倒しているタケイ(@pcefancom)です。

今回は、GensparkのSpeakly(音声AI対話機能)がChromebookで使えなかった問題を、AIを使ってChrome拡張機能を自作して解決した話を紹介します。

ソースネクストなら公式より安い

きっかけ|SpeaklyはWindowsとMacだけ。Chromebookお断り?

GensparkのAIチャットには「Speakly」という音声対話機能があります。

AIに話しかけるだけで質問できて、AIも音声で返事してくれる。まさに未来のAI体験、という感じの機能です。

ただ、問題がひとつ。

SpeaklyはWindowsとMacのみ対応。Chrome拡張機能は提供されていない。

つまり、Chromebookでは使えません。

ちょっと残念でかつ、今までの私はこんな感じでした。

  • 「SpeaklyはWindowsとMacのみ対応かぁ」
  • 「Chrome拡張機能はないのかー?」
  • 「Chromebookだと使えないな」
  • 「拡張機能が出るまで待つか」

でも、ふと思いました。

「じゃあ、拡張機能をAIで作ろう」

AIでバイブコーディングができる2026年、もう「待つ」必要はありません。

AIに相談すれば、自分で拡張機能を作れる時代になっています。


どんな拡張機能か?|GensparkのAIチャットに「マイクボタン」を追加

というわけで作ってみました。

Speakly – Genspark 音声入力」というChrome拡張機能です。

ひとことで言うと、Gensparkのチャット画面にマイクボタンを追加して、音声でAIチャットに入力できるようにする拡張機能です。

やっていることはシンプルで、

  1. Genspark(genspark.ai)のチャットページを開く
  2. チャット入力欄のそばにマイクボタンが自動で出現
  3. ボタンを押して話すと、音声がリアルタイムでテキスト変換される
  4. 変換されたテキストがそのまま入力欄に入る
  5. 停止すれば入力完了。あとは送信するだけ

キーボードを使わずに、マイクに向かって話すだけでAIに質問できるようになります。

Chromebookユーザーとしては、これがかなり便利です。


拡張機能でできること|9言語対応、ショートカットキーもあり

Speakly拡張機能でできることをまとめます。

主な機能一覧

機能内容
マイクボタン注入Gensparkのチャット入力欄にワンクリックで音声入力できるボタンを自動追加
音声→テキスト変換ブラウザ内蔵のWeb Speech APIを使用。外部サービス不要
リアルタイム表示話している内容がリアルタイムでプレビュー表示される
自動送信モード音声入力が終わったら自動でAIに送信(ON/OFF切替可能)
連続認識モードマイクを停止するまで音声を認識し続ける
9言語対応日本語、英語(US/UK)、中国語、韓国語、スペイン語、フランス語、ドイツ語
Alt+S ショートカットキーボードショートカットで音声入力のON/OFFを即切替
ダークモード対応OS設定に連動してポップアップの表示が切り替わる

個人的に気に入っているのは「Alt+S」のショートカットです。

Gensparkのページを開いている状態で Alt+S を押すだけで、すぐに音声入力が始まります。マイクボタンに手を伸ばす必要がないのが嬉しいポイントですね。
※ショートカットの編集できる設定も作ろうとは思っていますが。


拡張機能の説明|AIで作った具体的な流れ

「AIで拡張機能を作る」と言うと難しそうに聞こえますが、実際にやったことはシンプルです。

開発の流れ

  1. GensparkのAIに「Speaklyの拡張機能を作って」と依頼
  2. AIがChrome拡張機能のファイル一式(manifest.json、HTML、CSS、JavaScript)を生成
  3. 実際にChromeにインストールして動作確認
  4. 「ショートカットが効かない」「聞き取り中の表示が消えない」などの不具合をフィードバック
  5. AIが修正 → 再テスト → 修正…を繰り返し
  6. 完成。Chrome Web Storeにも公開申請

コードは一行も自分で書いていません。

全部AIとの対話だけで完成しています。

技術的な中身(興味がある人向け)

拡張機能の中身は以下のようになっています。

ファイル役割
manifest.jsonChrome拡張の設定ファイル(Manifest V3)
content.jsGensparkのページにマイクボタンを注入するスクリプト
content.cssマイクボタンやステータス表示のスタイル
background.jsショートカットキーやメッセージ中継を担当
popup.html/css/jsツールバーからの設定画面

音声認識には Web Speech API というブラウザ内蔵の技術を使っています。

外部のサーバーに音声データを送る必要がないので、プライバシー的にも安心です。Chromebookでも問題なく動作します。


サイトも公開してみました!

拡張機能のダウンロードページとプライバシーポリシーのサイトも作成済みです。

近々 Cloudflare でホスティングして公開。

サイトでできることは以下の通りです。

  • 拡張機能のZIPダウンロード(ワンクリックでダウンロード可能)
  • インストール手順のガイド(スクリーンショット付き)
  • プライバシーポリシー(Chrome Web Store申請に必要)
  • デモアニメーション(どんな動作をするかイメージがわかる)

Chrome Web Storeでの公開も申請中なので、審査が通ればストアからもインストールできるようになります。


まとめ|「ほしい機能がない」なら、AIで作れる時代

以上、拡張機能を作ってみたの話でした。

  • GensparkのSpeaklyはWindowsとMacのみ対応で、Chromebookでは使えなかった
  • 「待つ」のではなく「AIで自作する」ことを選んだ
  • Gensparkに相談しながら、コードを一行も書かずにChrome拡張機能が完成
  • 音声入力、ショートカット、9言語対応、自動送信など機能も充実
  • Chrome Web Storeにも公開申請中

正直、一番驚いたのは 「本当にコードを書かずに拡張機能が作れた」 ということです。

AIに「こういうのがほしい」と伝えて、動かして、「ここがおかしい」とフィードバックして、直してもらう。

その繰り返しだけで、ちゃんと動く拡張機能が出来上がりました。

「ほしい機能がない」→「公式が対応するまで待つ」

これが今までの常識でしたが、これからは、

「ほしい機能がない」→「AIで作る」

この発想の転換ができるかどうかが、2026年以降の生産性を大きく左右するのではないかと感じています。

Gensparkは「ほしいと思ったら自分で作れる」。そんな体験ができるAIサービスです。

Chromebookユーザーはもちろん、「AIでものづくり」に興味がある方はぜひ試してみてください。

なお、Gensparkですが有料版はソースネクストが安いです!

課金を安く済ませたい方は、以下をチェックしてみてください!

ソースネクストなら公式より安い
ABOUT ME
タケイマコト
タケイマコト
ブロガー
1979年生のブロガーです。 ブログを5つ運営。 生成AIも大好き!生成AIの活法、ブログ情報発信の効率化に邁進しています。
記事URLをコピーしました