WEBページのテキストを要約するChrome拡張 tl;dr

2025-08-12

• Chrome拡張「tl;dr」を作った (公開できてないけど)
  • 技術構成
  • 仕組み
    • 各スクリプトの概要
      • Manifest V3のService Worker制約
  • 時間がかかったところ
    • トークン数の問題
    • TypeScriptエラー211個
    • コスト計算
    • 非同期処理の複雑さ
  • Chrome Web Storeへの公開
    • 審査に必要だったもの
    • 審査期間
  • 学び

Chrome拡張「tl;dr」を作った (公開できてないけど)

ウェブページをOpenAI APIで要約するChrome拡張を作った。（ClaudeCodeで作成）

Chrome拡張のボタンを押すとポップアップが開き、Summarizeボタンで要約が生成され、ログが残る。

単にChrome拡張を作って公開したかっただけなので、あまり調査していないが、似たようなツールは他にもたくさんあるっぽい。

作っているうちにどんどん高機能になってしまったが、一旦機能を絞って最初の申請をすることにした。自分用ツールなので、審査が通らなくても問題なし。

技術構成

• SolidJS + Vite + Bun + TypeScript
• Bunは動作が速い
• SolidJSはsignalでstate管理がシンプル
• 最近気に入っている構成だが、詳しい善し悪しは検証していない

仕組み

Chrome Extension を作るには、スクリプトを含んだディレクトリに manifest.json を置き、それにスクリプトのエントリーポイントを指定したり、権限の設定を行ったりする。 zip にしたりもする。

Chrome拡張は複数のスクリプト（Content Script、Background Script、Popupなど）が別々のコンテキストで動くため、バンドル設定を工夫する必要がある。

src/ をwatchして dist/ にビルドし続けることで、ホットリロードしながら開発することはできるっぽい

各スクリプトの概要

• Content Script: ページ内のテキストを取得し、要約リクエストをBackground Scriptに送信
• Background Script: 要約リクエストを受け取り、OpenAI APIにリクエストを送信
• Popup: ユーザーインターフェースを提供し、要約結果を表示
• Options: ユーザーが設定を変更できる画面（実際はpopup内に設定画面を作った）
• Service Worker: 背景で動作し、他のスクリプトとの通信を管理

Manifest V3のService Worker制約

• windowオブジェクトが使えない。
• ESモジュールの動的インポートは事前宣言したURLのみしかできない。
• よう考えたら、セキュリティー上、妥当な制約ではある。

時間がかかったところ

トークン数の問題

OpenAI APIでモデルを切り替えて試していたら、日本語の要約が途中で切れる問題が発生。

• 英語なら60トークンで2-3文書けるが、日本語だと150-200トークン必要
• 文字数とトークン数の関係は言語で大きく異なる
• 言語検出を入れて、日本語は3倍、中国語・韓国語は2.5倍のマージンを取るようにした（経験則）

TypeScriptエラー211個

途中でtypecheckを入れたら211個のエラーが出て驚いた。

• tsconfig.jsonの設定を見直すと多くが解消
• 例:

    "skipLibCheck": true,
    "types": ["chrome"],
    "jsx": "preserve",
  

• tsconfig.jsonは序盤でちゃんと整備すべき

コスト計算

max_tokensを増やすとコストも増えるか心配だったが、OpenAI APIは実際に生成されたトークン数だけ課金される。

• 1600トークン割り当てても、出力が100トークンなら100トークン分の料金
• 体感では、長めのブログ記事を100回要約しても10円程度

非同期処理の複雑さ

Content Script、Background Script、Popupの3つのコンテキスト間でメッセージをやり取りするのが意外と複雑。

• エラーハンドリングが難しい
• デバッグはconsole.logで結局やってしまう

Chrome Web Storeへの公開

審査に必要だったもの

• プライバシーポリシー: APIキーや収集データについて明記（GitHubリポジトリに置いてリンク）
• スクリーンショット: 1280x800か640x400。e2eツールで自動撮影コマンドを作成（popup撮影の自動化は難しい）
• 説明文: シンプルに書くために機能を削った（フラグで隠している）
• 権限の説明: activeTabとstorageの権限理由を説明。審査で聞かれることがある
• APIキー: 本来はユーザーが自分でAPIキーを設定して使うツールだが、申請時のテスト用として必要な情報を申請の画面で記載した。（300回くらいは自由に使ってくださいみたいなことと書いたけど、１億回くらい叩かれると多分俺が終わる。）

審査期間

• 初回審査は3日ほど、更新版は1-2日で通ることが多いという噂。
• 権限を最小限にすると審査が早いらしい。
• 大事なのは、 manifest.json で余計な権限を要求しないこと。自分もtabs権限は不要だったのでactiveTabだけにした。

学び

• Chrome拡張の開発は普通のウェブ開発と違い独特の制約がある。
• 多言語対応のAIアプリは言語ごとの特性を考慮する必要がある。
• 申請が面倒くさい。どのくらいかかるか不明。(AI便利になったせいで、俺みたいなやつが拡張作って申請するからめっちゃ忙しくなってそう。)