1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Chrome拡張】サイトを要約して“新しいタブ”に表示する(要 ChatGPT or Gemini の API Key)

Last updated at Posted at 2026-01-14

この記事では、閲覧中のWebページ本文を要約して、新しいタブに結果を表示する Chrome 拡張「site-summarizer-extension」の使い方と仕組みを紹介します。

  • 結果は“新しいタブ”に表示(コピーボタン付き)
  • ChatGPT(OpenAI)/ Gemini(Google)両対応
  • API Key は初回だけ保存(以降は入力不要)
  • ChatGPT のデフォルトモデルは gpt-5-nano Flex
  • Gemini のデフォルトモデルは gemini-1.5-flash

※この拡張は、サイトの上に要約パネルが重なって表示される形式に、少し違和感を覚える方向けの要約ツールです。
背景に元のサイト内容が表示されたまま、さらにパネル上に文字情報が重なることで、画面がごちゃごちゃして見えるのが苦手な方には、特に使いやすい設計になっています。
ミニマリスト志向で、情報はできるだけ整理された状態で読みたいという方でなければ、既存の要約拡張の利用をおすすめします。


1. できること

  • 現在開いているタブの本文(main / article / body など)を抽出
  • 指定したプロバイダ(ChatGPT or Gemini)で要約を生成
  • 結果を “新しいタブ(summaryページ)” に表示
  • 要約文をワンクリックでコピー
  • 元ページを開くボタン付き

2. ダウンロード(GitHub から)

コードは GitHub に置いてあります。こちらからダウンロードしてください。(情報の抜き取りなどの悪意あるコードが含まれていないか ChatGPT で聞いてから使用する事を推奨します)

※ GitHub の「Code」→「Download ZIP」でも、git clone でもOKです。


3. インストール手順(Chrome)

  1. Chromeで次を開く
    chrome://extensions/

  2. 右上の「デベロッパーモード」をON

  3. 「パッケージ化されていない拡張機能を読み込む」を押して、ダウンロードしたフォルダを選択

  4. 拡張機能アイコンをクリックして、API Key を設定(初回のみ)
    その後「要約する」で新しいタブに結果が表示されます


4. 使い方

  1. 要約したいページを開く
  2. 拡張のポップアップを開く
  3. プロバイダ(ChatGPT / Gemini)を選ぶ
  4. API Key を保存(初回のみ)
  5. 「要約する」

結果は新しいタブで開きます。


5. ChatGPT は速い / Gemini は少し遅い

体感としては、

  • ChatGPT(特に軽量モデル)は返りが速く、サクッと要約が出やすい
  • Gemini は少し遅めに感じることがある(ページ内容や混雑状況で差が出やすい)

もちろんモデルや入力テキスト量にも左右されますが、「体感のキビキビ感」は ChatGPT が優勢なことが多いです。


6. Gemini は“Googleアカウントがあれば無料枠”が使える

Gemini は Google AI Studio / Gemini API の無料枠を利用できるため、
Googleアカウントを持っていれば、まずは無料枠で試しやすいのがメリットです。

  • まず無料枠で試す
  • 気に入ったら有料枠に切り替える

という入り方ができます。


7. API Key を保存しても流出の危険性はある?

ここは大事なので、メリット・リスクを分けて正直に書きます。

2026年1月16日付で、API Key を固定の暗号化キーを用いて暗号化する処理を追加しました。そのため、保存された文字列を閲覧されるだけであれば、リスクはありません。ただし、同時にコード自体を閲覧されるとリスクが生じる前提となりますので、その点をご理解のうえ、下記の文章に目を通していただければと思います。

7.1 「他のサイト(Webページ)」からは基本的に見えない

この拡張は、API Key を chrome.storage(拡張機能専用領域)に保存します。
通常のWebページのJavaScript(広告・埋め込み・一般サイトのコード等)から、拡張の storage を直接読むことはできません。

つまり、
「悪意のあるWebサイトを開いたら、そのサイトのJSにAPI Keyを盗まれる」
みたいな形は、基本的に起きにくい設計です。

7.2 それでも “流出リスクがゼロ” ではない

一方で、API Key を“クライアント側(ブラウザ内)”に置く以上、次のリスクは残ります。

  • PC自体がマルウェアに感染している(ブラウザやファイルを覗かれる)
  • 悪意ある別の拡張機能を入れてしまった(権限次第で情報を盗まれる可能性)
  • 自分が拡張のコードを改変できる=同PCの利用者が抜き出すことは可能
  • 共有PCや会社PCで“同期”が有効な場合、意図せず他端末へ同期される可能性(設定次第)

このため、業務や公開配布でより安全性を上げたい場合は、次の対策が推奨です。

  • 使い捨て/制限付きのKeyを使う(できる範囲で権限や上限を絞る)
  • 利用量上限(クォータ/請求上限)を設定する
  • もっと堅牢にするなら「自前サーバ(または Cloudflare Workers 等)を挟んでAPI Keyをブラウザに置かない」構成にする
  • 端末間同期が不要なら storage.sync ではなく storage.local を使う

結論:

  • “他のサイトから丸見え” というタイプの危険は小さい
  • ただし “ブラウザ内にKeyを置く” 以上、ゼロリスクではない
  • 心配なら「Keyをブラウザに置かない構成(プロキシ方式)」が最強

8. 仕組み(ざっくり)

  • popup から「要約する」を押す
  • background(service worker)がアクティブタブの本文を抽出
  • 選択されたプロバイダへ要約リクエスト
  • summaryページを新しいタブで開き、結果を表示

(実装によっては、生成完了後に表示する方式/ストリーミングで逐次表示する方式のどちらにもできます)


9. おわりに

「ページを読む前に、まず要点だけ知りたい」用途にかなり便利です。
とくに技術記事・ドキュメント・長めのニュースなどで効きます。

  • 速さ重視なら ChatGPT
  • 無料枠で試しやすいのは Gemini(Googleアカウントがあれば始めやすい)

という使い分けで、ぜひ試してみてください。

ChatGPT の動作が遅いと感じる場合は、background.js 内の
service_tier: "flex",
という記述を削除してください。
(この設定は、処理の優先度を下げる代わりに料金を抑えるためのモードです。)(通常、ChatGPT では 2 秒以内に読み始めることができるのが正常です。2 秒以上要する場合は、flex が原因で遅延が発生しています。)

自分用として、Alt + G を押したときに起動するよう設定しています。
他の拡張機能で Alt + G を使用している場合は、競合を避けるため本機能の使用はお控えください。

リポジトリはこちら:
https://github.com/uni928/site-summarizer-extension


📘 関連リンク(再掲)

👉 今まで作ったサイト

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?