🦙

Webページを読むのが面倒なので、Claudeに丸投げするChrome拡張を作った

に公開
AI
Chrome
拡張機能
Claude
tech

どうも、ラマです！

突然ですが、皆さんは長い技術記事を読むのが得意ですか？

私は苦手です。

いや、読めるんですよ？読めるんですけど、「PostgreSQLのMVCC実装について」みたいな記事を開いた瞬間、脳が「今日はもう十分働いた」と言い出すんです。まだ朝9時なのに。

怠惰は発明の母

そんな怠惰な私が考えたのが、「記事を読む作業をAIに丸投げする」という発想でした。

「いや、それただの要約サービスでは？」

そう思ったあなた、鋭い。でも既存の要約サービスって、なんか物足りないんですよね。

  • 略語の意味がわからない（MVCCって何の略？）
  • 概念が抽象的すぎて頭に入らない
  • 「で、結局何が言いたいの？」ってなる

そこで作ったのがClaude Summarizerです。

何ができるの？

ワンクリック（またはショートカットキー）で、今見ているWebページをClaudeに送信して、「小学生でもわかる要約」を生成します。

https://github.com/noprogllama/chrome-claude-summarizer

具体的には：

  1. 用語集を自動生成 - 「MVCC = Multi-Version Concurrency Control（複数バージョン同時実行制御）」みたいに
  2. 図で説明 - アスキーアートやMermaid記法で視覚化
  3. 平易な言葉 - 専門用語には必ず噛み砕いた説明を追加
  4. 次に学ぶべきこと - 「この文脈ならこれも知っておくといいよ」をサジェスト

動作の仕組み

技術的には至ってシンプルです。

[ユーザー] → [Chrome拡張] → [claude.ai/new?q=...] → [Claude]
  1. 拡張機能のアイコンをクリック（またはショートカット）
  2. 現在のページのURLとタイトルを取得
  3. プロンプトに埋め込んでURLエンコード
  4. claude.ai/new?q={プロンプト}#autosubmitで新しいタブを開く
  5. Content Scriptが自動で送信ボタンをクリック

Claude APIを直接叩くのではなく、claude.aiをそのまま使うというのがポイントです。

なぜか？

  • APIキーの管理が不要
  • 課金を気にしなくていい（Proプランなら使い放題）
  • いつものClaude UIで続きの会話もできる

コードのハイライト

URLでプロンプトを渡す

const claudeUrl = `https://claude.ai/new?model=${settings.model}&q=${encodeURIComponent(prompt)}#autosubmit`;
await chrome.tabs.create({ url: claudeUrl });

claude.aiは?q=パラメータでプロンプトを受け取れます。#autosubmitは自前のContent Scriptで処理するフラグです。

自動送信のContent Script

// claude.ai上で動作
if (!window.location.hash.includes("autosubmit")) {
  return;
}

// 送信ボタンが有効になるまで待機
const sendButton = await waitForEnabledSendButton();
if (sendButton) {
  sendButton.click();
}

claude.aiのUIはReactで構築されているため、ボタンが有効になるタイミングを待つ必要があります。ここが一番泥臭い部分でした。

プロンプトの工夫

デフォルトのプロンプトはこんな感じです：

「{pageTitle}」の要約

以下のURLのページを要約してください。
{url}

【重要：ウェブサイトの取得方法】
必ずweb fetch toolを使用してページの内容を取得してください。
（中略）

【要約のルール】
1. アルファベット略語の用語集を作成
2. 難しい概念は図で説明
3. 小学生でも理解できる言葉で
4. 次に学ぶべきことをサジェスト

ポイントは「web fetch toolを使え」と明示的に指示していること。

Claudeは賢いので、URLだけ渡すと「知ってる知識で答えちゃおう」とすることがあります。それを防ぐために「必ず実際にページを取得してから」と念押ししています。

インストール方法

  1. リポジトリをクローン
  2. chrome://extensions/を開く
  3. デベロッパーモードを有効化
  4. 「パッケージ化されていない拡張機能を読み込む」
  5. srcフォルダを選択

ショートカットキーを設定したい場合はchrome://extensions/shortcutsから設定できます。

使ってみた感想

実際に1週間ほど使ってみましたが、技術記事を読むハードルが明らかに下がりました。

用語集と図解が最初に提示されるので、ハイコンテキストでガンガン理解が進むんですよね。

特に良かったのは：

  • 「とりあえず要約だけ見て、興味があったら原文を読む」というワークフローが確立できた
  • 略語の意味をいちいち検索しなくてよくなった
  • 「この概念、図で見たらめっちゃわかりやすいじゃん」という発見

今後の展望

  • Chrome Web Storeへの公開（審査が面倒そう...）
  • OpenAIとかGeminiへの対応
  • 要約結果の保存機能など？

まとめ

怠惰は発明の母です。

「長い記事を読むのが面倒」という怠惰な気持ちから、こんな便利なツールが生まれました。

皆さんも「面倒だな」と思ったら、それは自動化のチャンスです。AIの力を借りて、どんどん楽をしていきましょう。

ではまた！🦙

リポジトリはこちら：
https://github.com/noprogllama/chrome-claude-summarizer

Discussion