これは捗る! WebページをGPT-4で日本語で要約して読み上げてくれるChrome拡張

shi3z

2024年7月10日 10:32

自動的に解説動画を作ってくれるNo-Langというツールが便利すぎる。

あまりに良かったので即課金した。俺のデイリーAIニュースで活躍しまくり・・・なの、だが、あまりにも便利なのであっという間にポイントを使い果たしてしまった。

また、動画なのだが動画の画像自体にあまり意味がないので本当は音声だけ聞き流しながらじっくりと論文本体を目で追いかけたい。

そう、まるで優秀でやる気満々の大学生インターンが、隣で興奮気味に「これすごいんですよ」とギャーギャー騒いでるかのような反応を聞き流しながら「ふーん」と眺めたいのだが、NoLangだとそういう目的とはちょっと異なる。

そこで、Claude3を使ってChrome拡張を作ることにした。ちなみにChrome拡張を作るのは生まれて初めてではないが人生で二回目くらいだし前に作ったのは10年前くらいだからもはやChrome拡張素人と言える。

Chrome拡張には三つのファイルが必要だ。
まず、適当なディレクトリを作る。

そこに、以下の三つのファイルを用意する
OpenAI APIキーを入れるのを忘れずに。content.jsの中で設定する。

// manifest.json
{
  "manifest_version": 3,
  "name": "Fast Page Summarizer and Reader",
  "version": "1.2",
  "description": "Summarizes the current web page using ChatGPT and reads it aloud at a fast speed",
  "permissions": ["activeTab", "scripting"],
  "host_permissions": ["https://api.openai.com/*"],
  "action": {
    "default_title": "Summarize and Read Page Fast"
  },
  "background": {
    "service_worker": "background.js"
  }
}

// background.js
chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ['content.js']
  });
});

// content.js
async function summarizeAndReadPageFast() {
  const text = document.body.innerText;
  const summary = await getSummaryFromChatGPT(text);
  speakTextFast(summary);
}

async function getSummaryFromChatGPT(text) {
  const API_KEY = 'YOUR_OPENAI_API_KEY'; // OpenAI APIキーを設定してください
  const API_URL = 'https://api.openai.com/v1/chat/completions';

  const response = await fetch(API_URL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${API_KEY}`
    },
    body: JSON.stringify({
      model: "gpt-4o",
      messages: [
        {role: "system", content: "You are a helpful assistant that summarizes text."},
        {role: "user", content: `- 論文の中で特に特徴的な部分と、性能向上した部分を必ず冒頭で話す
- 口調は親しみやすく友達に話すような感じで
以下の文章をそのようにまとめよ: ${text}`}
      ]
    })
  });

  const data = await response.json();
  return data.choices[0].message.content;
}

function speakTextFast(text) {
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.rate = 2.0;  // 2倍の速度で読み上げ
  speechSynthesis.speak(utterance);
}

summarizeAndReadPageFast();

このディレクトリを、Chromeの拡張機能として読み込む。

Chromeの拡張機能ページ（chrome://extensions/）を開きます。
「デベロッパーモード」を有効にします。
「パッケージ化されていない拡張機能を読み込む」をクリックし、作成したディレクトリを選択します。

これだけでChromeの右上のところに「W」というアイコンが追加される。

これだけで、任意のページを日本語で要約してくれる。口調などはプロンプトを好きにいじれば調整できる。話す速さはutterance.rateで調整できる。

こんな感じになります。

enjoy