「柔らかく言い換える」Chrome拡張を作ってくれるようにGPT-4にお願いしてみた

A1.txt

もちろんです！以下に、Chrome拡張機能を作成するためのコードの例を示します。これは、指定された仕様を満たすシンプルな拡張機能です。

まず、プロジェクトディレクトリに3つのファイルを作成してください。

manifest.json
background.js
content.js
manifest.json:

json
Copy code
{
  "manifest_version": 2,
  "name": "柔らかく言い換える",
  "version": "1.0",
  "description": "選択したテキストを柔らかく言い換えるChrome拡張機能",
  "permissions": [
    "activeTab",
    "contextMenus"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "48": "icon.png"
  },
  "browser_action": {
    "default_icon": "icon.png"
  }
}
background.js:

javascript
Copy code
chrome.runtime.onInstalled.addListener(function () {
  chrome.contextMenus.create({
    id: 'softenText',
    title: '柔らかく言い換える',
    contexts: ['selection']
  });
});

chrome.contextMenus.onClicked.addListener(function (info, tab) {
  if (info.menuItemId === 'softenText') {
    chrome.tabs.executeScript(
      tab.id,
      { file: 'content.js' },
      function () {
        chrome.tabs.sendMessage(tab.id, { method: 'softenText', text: info.selectionText });
      }
    );
  }
});
content.js:

javascript
Copy code
function replaceSelectedText(newText) {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  const range = selection.getRangeAt(0);
  range.deleteContents();
  const newNode = document.createTextNode(newText);
  range.insertNode(newNode);
  selection.removeAllRanges();
}

chrome.runtime.onMessage.addListener(function (request) {
  if (request.method === 'softenText') {
    fetch('https://api.openai.com/v1/engines/davinci-codex/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer YOUR_API_KEY'
      },
      body: JSON.stringify({
        prompt: `柔らかく言い換えてください: ${request.text}`,
        max_tokens: 50,
        n: 1,
        stop: null,
        temperature: 0.7
      })
    })
      .then(response => response.json())
      .then(data => {
        const softenedText = data.choices[0].text.trim();
        replaceSelectedText(softenedText);
      })
      .catch(error => {
        console.error('Error:', error);
      });
  }
});
注意: YOUR_API_KEYを、実際のOpenAI APIキーに置き換えてください。

これでChrome拡張機能が完成しました。拡張機能をローカルで動作させてテストするには、chrome://extensions/

A2.txt

申し訳ありません、以前の回答が途中で切れてしまいました。続きを説明します。

ローカルで動作させてテストする方法は次のとおりです。

1. Chromeブラウザで chrome://extensions/ を開きます。
2. 画面右上の「デベロッパーモード」をオンにします。
3. 「パッケージ化されていない拡張機能を読み込む」ボタンをクリックし、作成したプロジェクトディレクトリを選択します。
4. 拡張機能が正常に読み込まれたら、Chromeでウェブページを開き、テキストを選択して右クリックし、「柔らかく言い換える」を選択します。選択したテキストがChatGPT APIによって言い換えられるはずです。

ただし、このコードはセキュリティ上の懸念があります。APIキーはクライアント側のコードに含めるべきではありません。代わりに、バックエンドサーバーを使用してAPIリクエストを処理することをお勧めします。その場合、content.js で fetch を使用して、バックエンドサーバーのエンドポイントにリクエストを送信し、サーバー側でOpenAI APIにリクエストを転送します。これにより、APIキーがクライアント側に公開されるリスクが軽減されます。

また、APIの制限を考慮し、適切なエラーハンドリングとリトライロジックを実装することをお勧めします。さらに、OpenAI APIの利用料金に注意して、適切な使用制限を設定してください。

Q1.txt

Chrome拡張を作ろうと考えています。仕様は次のようなものです：
・Chromeの右クリックメニューに「柔らかく言い換える」を追加する
・Chrome上でテキストを選択した状態で「柔らかく言い換える」をクリックすると、そのテキストをChatGPT (GPT-3.5) APIに投げて、言い換えた結果で元のテキストを置き換える
コードを生成していただけるでしょうか？

Q2.txt

続きをお願いします。