Chrome拡張機能を作ろう！

こちらの記事は、ChatGPTによって自動生成されたものです。
詳しくは、こちらの記事を御覧ください。

ChatGPTにChrome拡張機能を作ってもらった

（2023.3.2 追記） コメント欄 KK さんより頂いた指摘をもとに、本文内のコードを一部修正しております。

はじめに

Chrome拡張機能を作成することで、ブラウザ上で独自の機能を実装することができます。本記事では、Chrome拡張機能の作成手順を紹介しながら、続きボタンという拡張機能を作成していきます。

ターゲット

プログラミング上級者なので、各関数の説明などは省略し、やるべきことだけを簡潔に記述します。

機能

続きボタンをブラウザウィンドウ内のどこかに表示し、クリックまたはショートカットキーで、チャット入力欄に「続き」と書き込み、送信する機能を実装します。

手順

1. フォルダを作成する

作成したいChrome拡張機能のフォルダを作成します。この例では、フォルダ名を「続きボタン」とします。

2. manifest.jsonファイルを作成する

作成したフォルダ内に、manifest.jsonファイルを作成します。manifest.jsonファイルには、以下のような情報を記述します。

{
  "manifest_version": 3,
  "name": "続きボタン",
  "version": "1.0.0",
  "description": "続きボタンをクリックすると、チャット入力欄に「続き」と書き込み、送信します。",
  "content_scripts": [
    {
      "matches": ["https://chat.openai.com/*"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "commands": {
    "send-continue-message": {
      "suggested_key": {
        "default": "Shift+Ctrl+E",
        "mac": "Shift+Command+E"
      },
      "description": "チャット入力欄に「続き」と書き込み、送信します。"
    }
  }
}

3. content.jsファイルを作成する

作成したフォルダ内に、content.jsファイルを作成します。content.jsファイルには、以下のような情報を記述します。

function sendMessage() {
  const textarea = document.querySelector('textarea[tabindex="0"]');
  if (textarea) {
    textarea.focus();
    document.execCommand('insertText', false, '続き');
    const event = new KeyboardEvent('keydown', {
      key: 'Enter',
      keyCode: 13,
      bubbles: true,
      cancelable: true,
    });
    textarea.dispatchEvent(event);
  }
}

window.addEventListener('load', () => {
  const button = document.createElement('button');
  button.innerText = '続き';
  button.style.position = 'fixed';
  button.style.bottom = '20px';
  button.style.right = '20px';
  button.style.zIndex = '9999';
  button.addEventListener('click', sendMessage);

  const body = document.body || document.documentElement;
  body.appendChild(button);
});

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.command === 'send-message') {
    sendMessage();
    sendResponse({ message: 'メッセージを送信しました。' });
  }
});

4. background.jsファイルを作成する

作成したフォルダ内に、background.jsファイルを作成します。background.jsファイルには、以下のような情報を記述します。

chrome.commands.onCommand.addListener((command) => {
  if (command === 'send-continue-message') {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      chrome.tabs.sendMessage(tabs[0].id, { command: 'send-message' }, (response) => {
        console.log(response.message);
      });
    });
  }
});

拡張機能の動作確認

上記の手順で、拡張機能を作成しました。次に、拡張機能の動作確認を行います。

1. 拡張機能を読み込む

1. Google Chromeを開きます。
2. アドレスバーに「chrome://extensions/」と入力し、Enterキーを押します。
3. 右上の「デベロッパーモード」を有効にします。
4. 「パッケージされていない拡張機能を読み込む」をクリックし、先ほど作成したフォルダを選択します。

2. 続きボタンをクリックしてみる

1. チャット機能があるWebページを開きます。
2. 「続き」ボタンをクリックします。
3. チャット入力欄に「続き」と書き込まれ、送信されます。

3. ショートカットキーを押してみる

1. チャット機能があるWebページを開きます。
2. キーボードで「Shift+Ctrl+E」（Windows）または「Shift+Command+E」（macOS）を押します。
3. チャット入力欄に「続き」と書き込まれ、送信されます。

おわりに

今回は、Chrome拡張機能の作成手順を紹介しながら、続きボタンという拡張機能を作成しました。拡張機能を作成することで、ブラウザ上で独自の機能を実装することができます。

今回作ったchrome拡張機能のダウンロードはこちら
https://drive.google.com/file/d/1cHpu1_sxkVghW5FOzzzUmsybwrSWSzF4/view?usp=sharing
（2023.3.2 追記） コメント欄 KK さんより頂いた指摘をもとにバグ修正しております。