Chrome拡張機能を作ろう!

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

(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 さんより頂いた指摘をもとにバグ修正しております。

Chrome拡張機能を作ろう!” への2件のフィードバック

  1. この度は、非常に便利な機能を開発していただき、ありがとうございました!
chatGPT を使って chatGPTのUX を改善するというのは、ユーモアが効いていて非常に面白かったです。

    ところで、上記の記事で紹介されているchrome拡張機能は私の実行環境ではうまく動作しない点がありましたので、以下に動作不良の原因と解決方法を記載します。
    読者の方で同様のエラーを経験された方は、ご参考になさってください。

    – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –

    実行環境
    ・Macbook Pro M1 (chrome ver:110.0.5481.177(Official Build) (arm64))

    エラー箇所および解決方法
    1.manifest.json の 2行目 “manifest_version” の値を 2 から 3 に変更する

    2.manifest.json の 12行目 “background” の箇所を以下のように書き換える
      “service_worker”: “background.js”

    – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –

    私の環境で発生した問題の原因とその解決方法は以上です。
    上記以外のエラーが出てきたとしても、おそらくchatGPT先輩に聞けば全部解決できると思いますので、がんばってください。

    今回紹介いただいたChrome 拡張機能 を導入すると、ブラウザで表示されるすべてのページの右下に「続き」という文字が表示されるようになります。
    もしも chatGPT を使用していないとき画面右下に「続き」と表示させたくない場合は、manifest.json の “matches” の箇所を以下のように編集することをおすすめします。

    “matches”: [“https://chat.openai.com/*”],

    上記のように編集したら、拡張機能の管理画面 (chrome://extensions/)の上の方に青字で表示されている「更新」ボタンを押してください。
    これで chatGPT以外のページを開いているときは画面右下に「続き」という文字が現れなくなっているはずです。

    最後になりますが、樋口さんへ改めて、非常に便利なアイデアとその実装方法について記事にまとめていただき、誠にありがとうございました。
    この記事は chat GPTの使い方を学べるという点で非常に有益であるとともに、技術の進歩や使い方が変わってきているなと非常に示唆に富む記事でありました。

    近年、「自分で調査してください」を意味する「ぐぐれ」という単語が普及してきていますが、今後は「ジピれ(GPれ)」という言葉に変わっていくかもしれませんね。
    検索エンジンも時代が変わるにつれて進化し、覇権を取った製品が使われなくなっていくというのがむじょい(諸行無常)です。

    今後も樋口さんの活動を応援しています!

    1. ありがとうございます!
      記事内のスクリプト、ダウンロード用ファイル、ともに修正しました!

      ほんと時代が変わっている感覚がすごいです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です