英文添削用のChromeプラグインを作成する

## はじめに
ブラウザに打ち込んだ英文をChatGPTに翻訳してもらいたいことがよくあるのですが、別タブでChatGPTを開くのが面倒なため、Chromeプラグインを作成することにしました。プロンプトは普段使っているものをベースにし、自分の好みの結果を返してくれるようにします。

※OpenAIのAPI Keyを使う関係で公開はしておらず、ローカルに置いたものをChromeから使用します。

## 作成したもの
拡張のアイコンをクリックすると起動します。画像だとわかりづらいですが、修正箇所を太字で表示してくれるところがポイントです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/db296fad-d696-63a1-4779-1b4aba2ee5ab.png)

## 作成手順
1. プロジェクトフォルダの作成
1. ソースコード
1. Chromeに追加

### 1. プロジェクトフォルダの作成
以下の構成で`chrome-extension`フォルダを作成します。

```:chrome-extension
.
├── icon.png //ブラウザに表示されるアイコン
├── libs
│   └── marked.min.js
├── manifest.json
├── popup.html
└── popup.js
```
`libs/marked.min.js`はChatGPTが返してきたマークダウン形式の回答をHTML形式に変換するためのライブラリです。以下からダウンロードしました。
https://cdn.jsdelivr.net/npm/marked/marked.min.js


### 2. ソースコード
#### 2.1. mainfest.json
```json
{
    "manifest_version": 3,
    "name": "English Proofreading with ChatGPT",
    "version": "1.0",
    "description": "ChatGPTによる英文添削",
    "permissions": [],
    "action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "icon.png",
        "48": "icon.png",
        "128": "icon.png"
      }
    },
    "icons": {
        "16": "icon.png",
        "48": "icon.png",
        "128": "icon.png"
    }
  }
  
```
#### 2.2. popup.html
```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatGPT Helper</title>
    <style>
        body {
            width: 300px;
            padding: 20px;
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
        }
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        h3 {
            margin-bottom: 10px;
            color: #333;
        }
        textarea {
            width: 100%; /* テキストエリアの幅を100%に */
            height: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            margin-bottom: 10px;
            font-family: inherit; /* フォントを親要素のフォントに合わせる */
        }
        button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-bottom: 10px; /* Add margin to create gap */
        }
        button:hover {
            background-color: #45a049;
        }
        #result-container {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #fff;
            display: none;
            box-sizing: border-box;
            font-family: inherit; /* フォントを親要素のフォントに合わせる */
        }
        #result-container h3 {
            font-size: 16px;
            font-weight: bold;
            margin-top: 10px;
            margin-bottom: 5px; /* 下の余白を縮小 */
            color: #333;
        }
        #result-container p {
            margin: 5px 0; /* 上下の余白を縮小 */
            line-height: 1.4; /* 行間を調整 */
        }
        #result-container ol, #result-container ul {
            margin: 10px 0; /* 上下の余白を縮小 */
            padding-left: 20px; /* インデントを調整 */
        }
        #result-container li {
            margin-bottom: 5px; /* リスト項目間の余白を縮小 */
            line-height: 1.4; /* リストの行間を調整 */
        }
        #result-container strong {
            font-weight: bold;
            color: #000;
        }
        #spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #4CAF50;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 10px auto; /* センター配置 */
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }               
    </style>
    <script src="libs/marked.min.js"></script>
</head>
<body>
    <div class="container">
        <h3>✍️ 英文添削 📝</h3>
        <textarea id="input-text"></textarea>
        <button id="send-button">送信</button>
        <div id="spinner" style="display: none;"></div>
        <div id="result-container">
            <p id="result-text"></p>
        </div>
    </div>
    <script src="popup.js"></script>
</body>
</html>
```

#### 3. popup.js
①プロンプトをOpenAIのAPIに渡す、②返ってきた回答をHTML形式にパースして画面に表示する、といことをしています。

```javascript
marked.setOptions({
    gfm: true,
    breaks: true,
    sanitize: true,
});

document.addEventListener("DOMContentLoaded", function() {
    const sendButton = document.getElementById('send-button');
    const inputText = document.getElementById('input-text');
    const resultContainer = document.getElementById('result-container');
    const resultText = document.getElementById('result-text');
    const spinner = document.getElementById('spinner');
    
    const API_KEY = 'sk-xxxx';
    const prompt = `
        あなたは英語の先生です。提示された英文を添削してください。

        ## 添削の観点
        - 文法的な正しさ
        - 表現の自然さ
        - 意味が正確に伝わるかどうか
        - 乱暴、ぶっきらぼうな表現になっていないか

        ## アウトプット
        元の英文に問題がないとき
        - 「添削の必要はありません」

        添削が必要なとき
        - はじめに修正した文章の全文を提示する（修正箇所は必ず太字にする）
        - 修正したすべてのポイントを箇条書きで列挙する
        - 解説は日本語とする（簡潔に）

        ## サンプル
        input: 
        I have a apple.
        
        output: 
        ### 添削結果
        I have **an** apple.

        ### 修正ポイント
        1. appleの前に冠詞"a"ではなく"an"を使う
        2. "a"の後には子音が続くときは"a"を使い、母音が続くときは"an"を使う

        次に渡されるユーザーの英文に対してこのガイドラインを適用してください。
    `;

    sendButton.addEventListener('click', async function() {
        const userText = inputText.value.trim();

        if (!userText) {
            alert('英文を入力してください');
            return;
        }

        // reset the result
        resultContainer.style.display = 'none';
        resultText.innerHTML = '';
        spinner.style.display = 'block';
        
        try {
            const response = await fetch('https://api.openai.com/v1/chat/completions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${API_KEY}`,
                },
                body: JSON.stringify({
                    model: 'gpt-4o',
                    messages: [
                        {
                            role: 'system',
                            content: prompt,
                        },
                        {
                            role: 'user',
                            content: userText,
                        },
                    ],
                    max_tokens: 500,
                    temperature: 0.7
                }),
            });
            
            if (!response.ok) {
                throw new Error(`APIの呼び出しに失敗しました: ${response.statusText}`);
            }

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

            // マークダウンをHTMLに変換
            const htmlContent = marked.parse(markdownText);
  
            // 添削結果を表示
            resultText.innerHTML = htmlContent;
            resultContainer.style.display = 'block';

        } catch (error) {
            console.error(error);
            alert('APIの呼び出しに失敗しました。コンソールを確認してください');
        } finally {
            spinner.style.display = 'none'; // スピナーを非表示
        }
    });
});
```
## 3. Chromeに追加
ローカルのソースをChrome拡張として追加するため、以下の手順で設定を行います。

#### 3.1. Developer modeを有効化
`chrome://extensions`を開き、**Developer mode**を有効にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/2b85a443-2aa6-fbe6-412a-7d46fff84903.png)

#### 3.2. 拡張を追加
**Load unpacked**をクリックし、作成したフォルダ（chrome-extension）を選択します。
※WSLで開発しているため、エクスプローラのアドレスバーに`\\wsl$\Ubuntu\home\path-to-project`のように指定して、作成したフォルダを選択しました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/ae294b4b-4a64-4416-b002-c3d48d876677.png)

拡張が追加されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/2c81a547-7b37-cbf4-093c-fbe49724d02e.png)

## おわりに
Chromeの拡張を開発するのは初めてだったため、ChatGPTに聞きながら進めました。4時間弱くらいで意図したものができてとても嬉しかったです！
今回作成したソースのプロンプトを変えることでさまざまな用途の「ちょこっとGPT」を作れるので、みなさんの参考になれば幸いです。