2026年3月15日日曜日

【備忘録】Chrome ウェブストアに登録してみた!

それまで Chrome拡張機能自体はいくつか作成してきましたが、Chrome ウェブストアで公開するのはどうしたらいいのだろう、と思いました。そこで YouTube Live チャットの要約ツールを探していたこともあって(どれも不要な機能が多くてシンプルなものがほしかった)、作ってみようと思い立ったのでした。

その過程について備忘録として残しておきます。

まず最初にこの拡張機能の説明をしておきます。

YouTube Live Chat Summarizer


2026年3月3日に思い立って、生成AIの Gemini の力を借りつつ生成。
2026年3月9日に公開されました!

Gemini AI を活用した YouTube ライブチャット(アーカイブ含む)のリアルタイム要約。

右サイドパネルで AIがライブの盛り上がりを一定間隔で要約し、所定の言語(Gemini 対応の75言語以上/2026年3月9日時点)で出力するものです。最終的に簡易版と詳細版にわけて、5つのパートにわけて出力しています。プロンプトもカスタマイズできるようにしました。あとウィンドウごとに、すべての「タブ」をチェックするので、複数のタブでライブチャットがあるなら、統合されて表示されます。それぞれのタイトルを表示するので、どのチャットかはわかりやすいでしょう。


ちょっと凝りすぎて、設定項目がものすごく多くなったので、下記で説明しておきます。
どのように設定するかは、特に APIキーや必要な予算について詳しく拡張機能のオプションでも説明しています。

設定説明(オプション)


  • UI表示言語:日本語と英語(デフォルトは日本語)
  • Gemini API キー:Google AI Studio 等で取得
     *現状は支払い登録はした上で、1時間 2円ぐらいを想定したらいい感じ(2時間ぐらいのライブ動画のアーカイブを途中で飛ばしながらみるとぐらいなレベル)
     *支払い登録していなければ1日20回程度しか使えないのでお試し程度(30秒に1度程度なら、10分ぐらいしか使えない)
     *キーは他人には絶対に共有しないこと
  • 使用モデルの選択
    • 詳細:https://ai.google.dev/gemini-api/docs/models
      2026年3月時点では、3.1 Pro, 3.1 Flash-Lite, 3 Flash は Preview であり、いつのまにか新しいモデルが出ていたり、廃止されていることもあります。
      デフォルトは、もっとも安価で高速な、2.5 Flash-Lite になっています。それで物足りないなら、3.1 Flash-Lite。それでもだめなら、2.5 Flash → 3 Flash 等をためしていけばよいでしょう。
    • したがって、モデルコードを手動設定できるようにした。
  • モデルコードの手動指定 (優先)
    • https://ai.google.dev/gemini-api/docs/models にあるモデルコードを入力
    • 入力されていると「使用モデルの選択」ではなくこちらが選ばれる。
      3.1 Flash-Lite のモデルコードは、gemini-3.1-flash-lite-preview とか。存在しないなどエラーになったら、無視される。
  • 思考レベル
    • Gemini 3.x からは、思考レベルが使えるようになっています。思考レベルなし、低、中、高といった選択できます。もちろん、より思考レベルが高いと消費するトークンも増えて、結果としてお金が掛かります。
  • 要約モード:簡易版、詳細版
  • 要約の出力言語
    • 日本語だけ、日本語+英語というモードを用意しています。
    • それ以外は、「Gemini ウェブアプリを利用できる言語と国 / 地域」(Google公式)を全部収録しています。結局のところ、プロンプトで ***言語で出力してといっているだけではありますけどね。
  • 要約の間隔(秒)(デフォルト: 30)
    • デフォルトは30秒に1度、Gemini に聞いてその出力結果を表示します。間隔をあけると必要なコストも減ります。ただし60秒ぐらいにすると、1分後に要約が表示されてしまうため、すでに次の場面に移っている可能性はあります。
  • 要約を開始する最小チャット数(この数に達するまで送信を待機します)
    • デフォルトは 5 です。チャットが流れていないと、Gemini にデータを送るのは無駄になるためです。デフォルトでは要約の間隔 30秒の間に、5以上のチャットが流れたら Gemini に要約を依頼します。そうでなければ、待機します。
  • 1回あたりの最大解析文字数(コスト節約のため、超過分はカットして送信します)
    • 要約の間隔の間に大量のチャットが流れた場合、入力トークンが膨大な量になる可能性があります。そのため、デフォルトは2000トークンにしています。
    • デフォルトでは、要約の間隔 30秒の間に、2000文字に到達したら、Gemini に送信するのはそこまでに抑えます。ですので要約の間隔が長いのに文字数が少ないと、無視されるチャット内容が多くなってしまいます。
    • 値に 0 をいれると無制限になります。
  • カスタムプロンプト ({{LANG}} = 要約の出力言語に自動置換)
    • 英語で書かれていますが、そのほうが要約を出しやすいからと、英語対応のためです。日本語で書いてもいいです。自由に変更もできます。デフォルトの値に戻したければ「プロンプトをデフォルトに戻す」ボタンを使えばよいです。


動いているかどうか知るためには?


拡張機能を開いて、 Service Worker のリンクをクリックしてください。


出てきたウィンドウで「Network」タブを選んでください。

そして Gemini へデータが送信されると、下記の赤枠のように、Status 200(成功)で、Type が fetch、 Name にURLが出てきます。APIキーも表示されますから、スクショなどは他人に見せないでください(下記はAPI部分を塗りつぶしています)。

なお、チャットのちょっとセンシティブな言葉(卑猥そうな言葉など)が入っていると、Gemini API側でエラー(ブロック)になる場合もあります。そうした場合には、Status 200 以外になるのでわかります。


必要なコストは?


1週間ほど試したぐらいですが、下記のデフォルト値であれば、

使用モデル:2.5 Flash-Lite
要約の間隔(秒)(デフォルト: 30): 30
要約を開始する最小チャット数(この数に達するまで送信を待機します): 5
1回あたりの最大解析文字数(コスト節約のため、超過分はカットして送信します): 2000

支払い登録はした上で、1時間 2円ぐらいを想定したらいい感じかなぁといったところです。*2時間ぐらいのライブ動画のアーカイブを途中で飛ばしながらみるとぐらいなレベル
一番多く使ったのは、文字数制限せずに(0にすると制限無し)、数時間テストでつかっていたときは、入力トークンが 2.5 Flash Lite で 431,504トークンで 7円でした。これは相当いろいろやらないといかないトークンですね。Pro とか使うとかなりコストがかかるので注意!

入力トークン(流れるチャットをどの程度取得するかの文字数)

出力トークン(AIが出力する文字数)

によって変わってくるのであくまで推定値です。

下記は4日間ぐらいでテストもかねて使ったトークンと費用です。あくまで一例です。
使用量RPDは、利用回数です。2.5 Flash Lite は、402回つかって12円。30秒に1度なら、1時間に120回ですから、3時間以上つかって12円といったところでしょうか。ただし、このときはいろいろ実験していたので、想定よりも高いコストを支払っています。3.1 Pro なんて1度しか使っていないのに1円かかっている.. って感じですねぇ。


各モデルの料金体系は、https://ai.google.dev/gemini-api/docs/pricing で公開されています。

推定だと次の通り。あくまで推定のため実際にどの程度かは自分で計測してください。

実行間隔: 30秒に1回(1日 2,880回)
1回あたりの推定量: 入力 2,000トークン / 出力 200トークン
為替レート: 1ドル = 158円(想定)

思考レベル (Thinking Level) を有効にした場合の推定コスト(3.x系)

Gemini 3.x系モデルで「思考レベル」を有効にすると、最終的な回答を出す前にAIが「思考プロセス」を生成します。この思考プロセスは「出力トークン」として課金されるため、レベルを上げるほどコストが増加します。

※以下の表は、通常の出力(200トークン)に加えて、思考レベルごとに以下の追加トークンが発生したと仮定した1時間あたりの推定値です。
(Low: +200, Medium: +500, High: +1,000 トークン)

Google AI Studio 経由で、各モデルごとの1日の使用量合計は簡単にわかりますから(ただし1日経過した後でないと前日分は出てこない模様)、それで確認するのがよいでしょう。


細かく知りたいとき


Google Cloud Console を見てください。
下記のように条件をつけて検索すれば、出てきます。
下記の場合には、2.5 flash lite の input token は33834 であることがわかりますね。



どのように条件設定(フィルタ)をするのか


  1. https://cloud.google.com/cloud-console よりログイン
  2. 上部より該当プロジェクトを選択
  3. 左サイドメニュー(上部の三 のマーク)より、課金を選択
  4. 「レポートの詳細を表示」
これで、条件設定がでてきます。

プロジェクト:チェックしたプロジェクトのみ選択
SKU:Gemini に関する設定だけ選ぶ
*2.5 flash lite しか使わないなら、
Generate content output token count gemini 2.5 flash lite short output text non-thinking
Generate content input token count gemini 2.5 flash lite short input text
の2つのチェックをいれるだけでいいでしょう。
使用日により期間:1日だけを選択するなど適当に

うまくでてきたら、このURLをブックマークにいれておきましょう。
そうすれば、期間だけ変更したら、どの日にどれだけ使ったのかがわかるでしょう。

以下、どうやって作ったのか、どうやって登録したのかを書いておきます。


どうやって作った!?


YouTubeライブチャットの人間が見ることができるレベルを超えている流れをみて、Chrome拡張機能でなんとかならないかと探したのですが、余計な機能がついていたり使い方がいまいちわからなかったりしたので、「作ってみるか!」と思ったのでした。

いまなら生成AIなどの助けを借りることで、そこまで苦労しなくても作れるのでは?と思ったのもの大きな点です。そこで Google Gemini のみをつかって作ったのでした(思考モードと 3.1 Pro を併用)。Gemini でどの程度できるだろう、正式登録ぐらいの完成度までいけるか!?ということを知りたいという目的もありました(せっかく Google AI Proを契約しているので)。実際には8割ぐらいまでは手軽にできたものの完成度を上げるためには、生成AI側が機能を忘れたり、勝手に削除したり、特に利用マニュアル系を多言語にすると、日本語以外は存在を忘れたりと、ある程度厳格な指示をしているのにもかかわらず、うまくいかないことがあってかなり格闘しました。

さらにコストをできるだけかからないようにという方向性もっていくと、全くデータを拾わなくなったりなど、相当いろいろ調整しました。

残念ながら、上にスクロールしても途中までしか戻らないので、どの程度の文字数やトークンをつかったかわかりません。下記を見ると、2割ぐらいの分量の気がします。


さて下記を参考に登録してみました。

参考:Chrome拡張機能をChromeウェブストアで公開するまでの手順のまとめ

以下、2026年3月9日時点の情報です。


1. GitHUBでのソース公開


サポートURLや、プライバシーポリシーの公開などもいるので、ソースを公開していいなら、そうしておいたほうが楽です。

https://github.com/kimipooh/youtube-live-chat-summarizer


2. デベロッパー登録


Chromeウェブストアデベロッパーダッシュボード
https://chrome.google.com/webstore/devconsole

にアクセスして、同意してから、登録料の支払い(5ドル)を支払いします。
最初に1度だけで維持費などは不要ということです。いいですね! 




うまくいけば、下記の画面になります。


次に、下記を聞かれます。
非取引業者アカウントを選択しました。個人的に使うだけのためです。


次にアカウント設定で、
  • 連絡先メールアドレス(公開される)
    • サブのメールアドレスにしました。
  • 住所(非取引業者アカウントならウェブストアからは非公開)
  • 通知
    • アイテムの審査が完了
    • アイテムのサポートが必要な問題が報告
    • アイテムが公開されたとき
あたりのを設定しておきます。





3. Chrome拡張機能の申請準備


  1. プログラム全体を ZIP圧縮してアップロード
  2. 商品の概要
    1. カテゴリー、言語、スクリーンショット,
    2. ホームページURL,サポートURL(GitHUB)
  3.  プライバシー
    1. 単一用途
    2. 権限が必要な理由(manifest.json で指定した権限ごとに理由が必要)
      1. ここで一度申請が拒否された
    3. リモートコードを使用していますか
  4. データの使用(YouTube Live Chatデータのため)
    1. 個人的コミュニテケーション
    2. ウェブサイトのコンテンツ
  5. プライバシーポリシー
    1. ユーザーデータを収集するため必須


3-1. プログラム全体を ZIP圧縮してアップロード


.DS_Store など不要な隠しフォルダやファイルは削除した上で、拡張機能を ZIP圧縮します。

アイテムから、「新しいアイテム」を選択


圧縮していた Chrome拡張機能をアップロードします。



3-2. 各種説明


説明とカテゴリー、言語を選択します。
言語は英語対応ではありますが、とりあえず日本語にしておきます。
あまり問い合わせが大量に来ても困るため。


なお審査前であれば、「パッケージ」から、「新しいパッケージをアップロード」より差し替えができます。

データ使用

この拡張機能については、チャット情報を得るため、「個人的コミュニティケーション」「ウェブサイトのコンテンツ」の2つにチェックが必要です。


3-3. 権限が必要な理由


manifest.json に下記のように権限を求めているなら、それごとに理由が必要になります。
  "permissions": [
    "sidePanel",
    "storage"
  ],
私の場合には最初、下記4つ(permissions以外にもある)を求めていました。しかし後述しますが、tabsは権限範囲が広すぎるので審査で reject されてしまったのでした。
いずれにせよ、しっかりとした理由が必要です。




3-4. プライバシーポリシー


個人チャットを使うために、プライバシーポリシーの作成と公開が必要です。
どこかのウェブサイトでもよいのですが、今回 GitHUBでソース公開するので、GitHUB Pages を使いました。



どのように設定するかは、いろいろマニュアルもあるので割愛します。
私の場合には独自ドメインをもっていたのでカスタムドメインを割り当てて、GitHUBの docs フォルダを GitHUB pages に割り当てたのでした。

4. 審査のための送信


すべてを埋めると、上部の「審査のための送信」をクリックできるようになります。
十分にテストして問題ない!とおもったら送信してください。




さて私の場合には2、3日後に「拒否」されました!
理由は権限の tabs が不要だろう(そこまでの権限は不要だろう)ということでした。


実際に精査してみると、確かにそこまでの権限は不要でした。このあたりは生成AIの問題ですね。とりあえず動かすために、ある程度大きな権限を付与しておいたということでしょう。今回はコード部分は全部生成AIに任せたということもあるので、そのあたりのチェック漏れ(目視)していたのでした。

早速出し直して、2、3日後に、審査通って公開されたのでした!




2026年3月15日 @kimipooh

0 件のコメント: