最近、ChatGPTを色々と試しながら遊んでるんですが、めちゃくちゃ可能性を感じてます。
要は、ハマってます。

で、使っててもどかしい点が、回答の文字制限です。
何文字なのかは明確にされてませんが、ある一定の文字数に達したら、文章の途中でも問答無用で回答がストップします。

最初は仕様だからどうしようもないと思ってたのですが、ふと思いついて「途中で文章が切れたから、続きを書いて」と送信してみると、ちゃんと続きから記述してくれることに気づきました。
その後も試行錯誤した結果、「続き」の2文字だけで十分であることがわかりました。

しかし、数回に分割された長文を書かせたいときに、何度も何度もキーボードで「続き」と売って送信するのがめちゃくちゃ面倒でした。
「T　U　D　U　K　I　Space　Return　Return」と、9回も打鍵しないといけない。
しかも、テキストエリアにカーソルがない場合は、マウスでクリックしてアクティブにしないといけない。
これがものすごくストレスでした。

そこから、
「Chrome拡張機能を作ればいけるかも」
「でも、作ったことないから面倒やな」
「いや、まさに今触っているChatGPTの力を借りたら行けるかも」
までたどり着くのは簡単でした。

約1時間ほどで、とりあえず動くところまで持っていけました。完全の素人の状態から、です。
もしこれが、僕がゼロから調べて自分で書いていたら、到底一日じゃ終わらなかったと思います。

やりとりの一部始終をまとめたものが、こちらの動画になります。

このあと、実際にブログにアップしました。
↓

Chrome拡張機能を作ろう！

ブログにアップしたあと、コメントでバグを見つけてくれた素晴らしい方がいらっしゃったので、ChatGPTに書いてもらったコードを少しだけ修正して、ver.02を作りましたので、よかったら使ってください。
スクリプトのダウンロードや、インストールの方法、使い方などなどは、前回の記事を御覧ください。

以上です。
とにかく作っている最中、めちゃくちゃ楽しかったですし、色んな可能性を感じることができました。
理論上、テキストで出力できるものは何でもお願いできるので、まだまだ人類が気づいてないChatGPTのポテンシャルはあると思います。
みなさんも、よかったらChatGPTにお願いして、なにか作ってみてください。簡単なものであれば、意外と知識ゼロからでもいけるかもしれません。

おまけ

以下参考までに、ChatGPTと僕との会話を全文のせておきます。

樋口

以下の機能をもつchrome拡張機能を作るためのブログ記事を書いて。

# ターゲット
プログラミング上級者なので、各関数の説明などは省く。やるべきことだけを簡潔に記述。

# 機能
・ブラウザウィンドウ内のどこかに「続き」と記載されたボタンを挿入する
・その「続きボタン」をクリックすると、以下の順番で実行される
　１，チャット入力欄（テキストエリアのtabindexは0）に「続き」と書き込む
　２，returnキーを押下して送信する
・ショートカットキーでも「続きボタン」をクリックしたときと同様のことができる。ショートカットキーの初期値はwindowsはShift+Ctrl+C、macはShift+Command+Cだが、設定画面でユーザーが自由に設定できる。
・拡張機能にアイコンは使用しない

ChatGPT

こんにちは！以下が、要件に従ってChrome拡張機能を作成するためのブログ記事になります。

拡張機能の作成手順

ステップ1: Chrome拡張機能を作成するためのフォルダを作成する

まず、Chrome拡張機能を作成するためのフォルダを作成します。このフォルダは、後で拡張機能をパッケージ化するために使用されます。

ステップ2: マニフェストファイルを作成する

Chrome拡張機能には、マニフェストファイルが必要です。このファイルには、拡張機能の基本情報と機能を定義する情報が含まれます。

以下の内容で、”manifest.json”というファイルを作成しましょう。

{
  "manifest_version": 2,
  "name": "続きボタン",
  "version": "1.0.0",
  "description": "続きボタンをクリックすると、チャット入力欄に「続き」と書き込み、送信します。",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "commands": {
    "send-continue-message": {
      "suggested_key": {
        "default": "Shift+Ctrl+C",
        "mac": "Shift+Command+C"
      },
      "description": "チャット入力欄に「続き」と書き込み、送信します。"
    }
  }
}

ステップ3: メッセージ送信のコードを記述する

次に、拡張機能がメッセージを送信するためのコードを記述します。これにより、拡張機能の機能が実現されます。

以下の内容で、”content.js”というファイルを作成しましょう。

function sendMessage() {
  const textarea = document.querySelector('textarea[tabindex="0"]');
  if (textarea) {
    textarea.value = '続き';
    const form = textarea.form;
    if (form) {
      form.submit();
    }
  }
}

chrome.commands.onCommand.addListener((command) => {
  if (command === 'send-continue-message') {
    sendMessage();
  }
});

const button = document.createElement('button');
button.innerText = '続き';
button.addEventListener('click', sendMessage);

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

ステップ4: 拡張機能をパッケージ化する

最後に、作成した拡張機能をパッケージ化しましょう。これにより、拡張機能をChromeにインストールできるようになります。

1. マニフェストファイルとcontent.jsファイルを拡張機能の実現に必要なすべてのファイルを含むZIPファイルを作成します。このZIPファイルをChromeにドラッグ＆ドロップして、拡張機能をインストールできます。

以下がZIPファイルの構成になります。

続きボタン/
├── manifest.json
└── content.js

以上で、拡張機能の作成が完了しました！

まとめ

今回は、Chrome拡張機能を作成するための手順について説明しました。具体的には、ブラウザウィンドウ内に続きボタンを表示し、クリックまたはショートカットキーでチャット入力欄に「続き」と書き込み、送信する機能を実装しました。

この拡張機能を使うことで、チャットなどのテキスト入力が必要な場面で手間を省くことができます。また、拡張機能の作成手順は、他の機能の実装にも応用できますので、ぜひ参考にしてみてください。

樋口

chromeのコンソールで以下のエラーメッセージが出る

content.js:12 Uncaught TypeError: Cannot read properties of undefined (reading ‘onCommand’)
at content.js:12:17

ChatGPT

このエラーメッセージは、chrome.commands.onCommand.addListener()メソッドが動作しないために発生しています。これは、Chromeのバージョンが古い場合や、manifest.jsonファイルで”commands”プロパティが正しく定義されていない場合に発生する可能性があります。

まず、Chromeが最新バージョンであることを確認してください。次に、manifest.jsonファイルで”commands”プロパティを次のように定義する必要があります。

"commands": {
  "send-continue-message": {
    "suggested_key": {
      "default": "Shift+Ctrl+C",
      "mac": "Shift+Command+C"
    },
    "description": "チャット入力欄に「続き」と書き込み、送信します。"
  }
}

また、manifest.jsonファイルで”background”プロパティを定義し、content.jsファイルの代わりにbackground.jsファイルを使用することもできます。この場合、background.jsファイルに以下のように記述する必要があります。

chrome.commands.onCommand.addListener((command) => {
  if (command === 'send-continue-message') {
    sendMessage();
  }
});

以上の修正を行ってもエラーが解決されない場合は、Chromeを再起動してみるか、Chromeの設定から拡張機能を一度無効化してから再度有効化することで、解決する場合があります。

樋口

画面にボタンが表示されない

ChatGPT

この問題が発生した場合、まずcontent.jsファイルをチェックして、必要なコードが記述されているか確認しましょう。また、manifest.jsonファイルのcontent_scriptsプロパティに必要な設定が含まれているかも確認してください。

もしそのような問題がない場合、以下の対策を試してみてください。

ページが完全に読み込まれるまで待機する

content.jsファイルの最後に以下のようなコードを追加することで、ページが完全に読み込まれるまで待機することができます。これにより、ボタンが正しく表示されるようになる場合があります。

window.addEventListener('load', () => {
  const button = document.createElement('button');
  button.innerText = '続き';
  button.addEventListener('click', sendMessage);

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

CSSを使用してスタイルを設定する

ボタンが表示されない場合、CSSを使用してスタイルを設定している可能性があります。そのため、content.jsファイルでスタイルを設定することで、ボタンを表示できる場合があります。以下のコードをcontent.jsファイルに追加して、スタイルを設定できます。

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の開発者ツールを使用して、エラーメッセージやコンソールログを確認することができます。また、他の拡張機能が競合していないか確認することもできます。

樋口

以上を踏まえて、全てのコードを記述して

ChatGPT

以下が、要件に従って作成されたChrome拡張機能の全コードになります。manifest.jsonファイル、content.jsファイル、およびbackground.jsファイルが含まれます。

manifest.jsonファイル

{
  "manifest_version": 2,
  "name": "続きボタン",
  "version": "1.0.0",
  "description": "続きボタンをクリックすると、チャット入力欄に「続き」と書き込み、送信します。",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "commands": {
    "send-continue-message": {
      "suggested_key": {
        "default": "Shift+Ctrl+C",
        "mac": "Shift+Command+C"
      },
      "description": "チャット入力欄に「続き」と書き込み、送信します。"
    }
  }
}

content.jsファイル

function sendMessage() {
  const textarea = document.querySelector('textarea[tabindex="0"]');
  if (textarea) {
    textarea.value = '続き';
    const form = textarea.form;
    if (form) {
      form.submit();
    }
  }
}

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: 'メッセージを送信しました。' });
  }
});

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

以上が、Chrome拡張機能の全コードになります。この拡張機能を使用すると、ボタンをクリックまたはショートカットキーで、チャット入力欄に「続き」と書き込み、送信することができます。また、送信するたびにコンソールログにメッセージが表示されます。

樋口

ボタンを押すと、画面が更新されてしまうので、formをsubmitするのではなく、以下の通りにして

テキストエリアをアクティブにする
キーボードのreturnキーを押す

ChatGPT

ご指摘ありがとうございます。以下に、formのsubmit()を使わずにテキストエリアをアクティブにして、キーボードのreturnキーを押す方法に修正したコードを示します。

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: 'メッセージを送信しました。' });
  }
});

この修正により、フォームのsubmit()を使用せずに、テキストエリアをアクティブにしてからキーボードのreturnキーを押すことができます。

樋口

macでショートカットキーが効かないので、chrome上で設定したい

ChatGPT

macOSでは、ショートカットキーにCommandキーを使用することが一般的です。そのため、Windowsと同じようにShift+Ctrl+Cではなく、Shift+Command+Cをショートカットキーとして設定する必要があります。以下に、Chromeの設定画面でショートカットキーを変更する手順を示します。

Chromeの設定を開きます。
左側のメニューから「拡張機能」を選択します。
「キーボードショートカット」をクリックします。
拡張機能の一覧から、続きボタンを探し、ショートカットキーの欄をクリックします。
ショートカットキーを入力します。Shift+Command+Cなど、希望するキーの組み合わせを入力してください。
変更を保存します。

以上の手順で、ショートカットキーを変更することができます。これにより、macOSでもShift+Command+Cで続きボタンを実行できるようになります。

樋口

OK、これでいけたわ
では、以上の修正を全部反映させた上で、もう一度ブログ記事を最初から全文書いて

ChatGPT

はい、了解しました。以下に、要件に従って作成されたChrome拡張機能の全コードと、その説明を含めたブログ記事を示します。

Chrome拡張機能を作ろう！

はじめに

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

ターゲット

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

機能

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

手順

1. フォルダを作成する

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

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

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

{
  "manifest_version": 2,
  "name": "続きボタン",
  "version": "1.0.0",
  "description": "続きボタンをクリックすると、チャット入力欄に「続き」と書き込み、送信します。",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "commands": {
    "send-continue-message": {
      "suggested_key": {
        "default": "Shift+Ctrl+C",
        "mac": "Shift+Command+C"
      },
      "description": "チャット入力欄に「続き」と書き込み、送信します。"
    }
  }
}

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

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

function sendMessage() {
  const textarea = document.querySelector('textarea');
  if (textarea) {
    textarea.focus();
    textarea.value = '続き';
    const event = new KeyboardEvent('keydown', {
      key: 'Enter',
      code: 'Enter',
      which: 13,
      keyCode: 13,
      charCode: 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. 拡張機能を読み込む

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

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

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

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

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

おわりに

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

樋口

OK、マジでありがとうせっかくやきTwitterでシェアするわ

ChatGPT

どういたしまして。お役に立てて嬉しいです。もし何かあれば、またお気軽にご質問ください。それでは、楽しいTwitterライフをお送りください！

Facebook

Twitter

« 前の記事

おまけ

樋口

ChatGPT

拡張機能の作成手順

ステップ1: Chrome拡張機能を作成するためのフォルダを作成する

ステップ2: マニフェストファイルを作成する

ステップ3: メッセージ送信のコードを記述する

ステップ4: 拡張機能をパッケージ化する

まとめ

樋口

ChatGPT

樋口

ChatGPT

ページが完全に読み込まれるまで待機する

CSSを使用してスタイルを設定する

樋口

ChatGPT

manifest.jsonファイル

content.jsファイル

background.jsファイル

樋口

ChatGPT

content.jsファイル

樋口

ChatGPT

樋口

ChatGPT

Chrome拡張機能を作ろう！

はじめに

ターゲット

機能

手順

1. フォルダを作成する

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

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

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

拡張機能の動作確認

1. 拡張機能を読み込む

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

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

おわりに

樋口

ChatGPT

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル