ChatGPT APIで自動要約するGoogle Chromeエクステンションの作り方

最近話題になっているChatGPTとチャットしてなにか作ってみたい(笑)

ChatGPT APIでニュースやブログの記事を自動的に要約してくれるGoogle Chromeエクステンションを作りたいと思います。

ChatGPT APIを作成

OpenAIのウェブサイトでアカウントを作成後、以下ページでAPIを取得できます。API作成後、ページからは確認できないので、APIキーをメモに残し安全に保管しておきましょう。

https://platform.openai.com/account/api-keys

Chromeエクステンションの基本設定

Google Chromeエクステンションの開発に必要な基本設定を行い、マニフェストファイル（manifest.json）を作成します。このファイルには、エクステンションの名称、バージョン、説明、アイコンなどの情報が含まれます。

{
  "manifest_version": 3,
  "name": "AutoSummarizer by ChatGPT",
  "version": "1.0",
  "description": "Automatically summarize selected text using ChatGPT",
  "permissions": [
    "contextMenus",
    "storage",
    "tabs",
    "scripting",
    "notifications"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "48": "icon.png"
    }
  },
  "options_page": "options.html",
  "icons": {
    "48": "icon.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "run_at": "document_start",
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "contentScript.js"
      ]
    }
  ]
}

コンテンツスクリプトの作成

コンテンツスクリプトの作成: 要約機能を実装するためのコンテンツスクリプトを作成します。このスクリプトは、ウェブページ上で実行され、テキストの選択や要約結果の表示などを行います。

// DOMが読み込まれた後に実行されるイベントリスナーを追加
document.addEventListener('DOMContentLoaded', () => {
  // メッセージリスナーを追加
  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    // getSelectedTextアクションがリクエストされた場合
    if (request.action === 'getSelectedText') {
      const selectedText = getSelectedText();
      console.log(selectedText);
      sendResponse(selectedText);
    }
  });
});

// 選択されたテキストを取得する関数
function getSelectedText() {
  const selectedText = window.getSelection().toString();
  // 改行を空の文字列に置き換える
  const textWithoutNewlines = selectedText.replace(/\n|\r/g, ' ');
  return textWithoutNewlines;
}

ChatGPT APIとの通信

JavaScriptを使用して、ChatGPT APIに接続します。APIキーを使用して認証し、選択されたテキストを送信して要約をリクエストします。

ChatGPT APIからの要約結果を受け取り、適切な形式に整形します。要約結果をウェブページ上に表示するためのUIを作成し、要約結果をそのUIに挿入します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>Document</title>
</head>
<body>
  <div id="container">
    <a id="optionsLink" href="options.html" target="_blank">
      <span id="gearIcon">⚙️</span>
  </a>
  <h1>AutoSummarizer by chatGPT</h1>
  <p>要約したい文書を選択して自動要約しましょう！</p>
  ※ 1,000 文字以下推奨</p>
  <button id="summarizeButton">自 動 要 約</button>
  <div id="loadingMark" class="spinner hidden"></div>
  <br> <!-- ここに改行を追加 -->
  <div id="loadingMessage" class="hidden">読み込み中...数分かかることもあります</div>
  <div id="summary" class="hidden"></div>
</div>
  <script src="popup.js"></script>
</body>
</html>

document.getElementById("summarizeButton").addEventListener("click", async () => {
  // 必要な要素を取得し、ローディングマークとメッセージを表示
  const summarizeButton = document.getElementById("summarizeButton");
  const loadingMark = document.getElementById('loadingMark');
  const loadingMessage = document.getElementById('loadingMessage');
  loadingMark.classList.remove('hidden');
  loadingMessage.classList.remove('hidden');
  summarizeButton.hidden = true;

  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.tabs.sendMessage(tab.id, { action: "getSelectedText" }, (selectedText) => {
    chrome.runtime.sendMessage({ action: "summarize", text: selectedText });
  });
});

// メッセージリスナーを追加
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  const hideLoading = () => {
    const summarizeButton = document.getElementById("summarizeButton");
    const loadingMark = document.getElementById('loadingMark');
    const loadingMessage = document.getElementById('loadingMessage');
    const summary = document.getElementById('summary');
    loadingMark.classList.add('hidden');
    loadingMessage.classList.add('hidden');
    summary.classList.remove('hidden');
    summarizeButton.hidden = false;
  };
  if (request.action === "displaySummary") {
    // 要約を表示する要素を取得
    const summaryElement = document.getElementById("summary");
    // 要約を表示する要素に要約を設定
    summaryElement.textContent = request.summary;
    hideLoading();
  }
  if (request.action === "displayError") {
    // エラーを表示する要素を取得
    const summaryElement = document.getElementById("summary");
    // エラーを表示する要素にエラーメッセージを設定
    summaryElement.textContent = request.error;
    hideLoading();
  }
});

バックグラウンドでAPIと通信します。

// メッセージリスナーを追加
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  // summarizeアクションがリクエストされた場合
  if (request.action === "summarize") {
    // APIキーとモデル名をストレージから取得
    chrome.storage.local.get(['apiKey', 'model'], ({ apiKey, model }) => {
      // APIキーが存在しない場合、オプションページを開く
      if (!apiKey) {
        chrome.tabs.create({ url: "options.html" });
        return;
      }
      // 選択されたテキストがない場合、エラーメッセージを表示
      if (!request.text) {
        chrome.runtime.sendMessage({ action: "displayError", error: "文章が選択されていません" });
        return;
      }
      // OpenAI APIにリクエストを送信
      fetch("https://api.openai.com/v1/completions", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer ${apiKey}`
        },
        body: JSON.stringify({
          model: `${model}`,
          prompt: `要約:\n${request.text}`,
          max_tokens: 2048,
          temperature: 0
        }),
      })
        .then(response => response.json())
        .then(data => {
          // APIから得られた要約を取得し、ポップアップに表示
          const summary = data.choices[0].text.trim();
          chrome.runtime.sendMessage({ action: "displaySummary", summary: summary });
        })
        .catch(error => {
          // エラーが発生した場合、エラーメッセージを表示
          chrome.runtime.sendMessage({ action: "displayError", error: error.message });
        });
    });
  }
  return true;
});

APIキーの取得

エクステンションのオプションページを作成し、ユーザーが自分のOpenAI APIキーを入力・保存できるようにします。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Options</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>AutoSummarizer by chatGPT 設 定</h1>
    <h2>APIキーの設定</h2>
    <input type="text" id="apiKeyInput" placeholder="APIキーを入力してください">
    <h2>モデルの選択</h2>
    <select id="modelSelect">
      <option value="text-davinci-003" selected>text-davinci-003</option>
        <option value="text-davinci-002">text-davinci-002</option>
    </select>
    <button id="saveButton">保存</button>
    <div id="message"></div>
    <script src="options.js"></script>
</body>
</html>

document.addEventListener('DOMContentLoaded', () => {
  const apiKeyInput = document.getElementById('apiKeyInput');
  const modelSelect = document.getElementById('modelSelect');
  const saveButton = document.getElementById('saveButton');
  const message = document.getElementById('message');

  // 保存されたAPIキーを取得して表示
  chrome.storage.local.get(['apiKey', 'model'], ({ apiKey, model }) => {
    apiKeyInput.value = apiKey || '';
    modelSelect.value = model || 'text-davinci-003';
  });

  // 保存ボタンが押されたときの処理
  saveButton.addEventListener('click', () => {
    const apiKey = apiKeyInput.value;
    const model = modelSelect.value;
    chrome.storage.local.set({ apiKey, model }, () => {
      message.textContent = 'APIキーとモデルが保存されました';
    });
  });
});