こちらの記事は、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. 拡張機能を読み込む
- Google Chromeを開きます。
- アドレスバーに「chrome://extensions/」と入力し、Enterキーを押します。
- 右上の「デベロッパーモード」を有効にします。
- 「パッケージされていない拡張機能を読み込む」をクリックし、先ほど作成したフォルダを選択します。
2. 続きボタンをクリックしてみる
- チャット機能があるWebページを開きます。
- 「続き」ボタンをクリックします。
- チャット入力欄に「続き」と書き込まれ、送信されます。
3. ショートカットキーを押してみる
- チャット機能があるWebページを開きます。
- キーボードで「Shift+Ctrl+E」(Windows)または「Shift+Command+E」(macOS)を押します。
- チャット入力欄に「続き」と書き込まれ、送信されます。
おわりに
今回は、Chrome拡張機能の作成手順を紹介しながら、続きボタンという拡張機能を作成しました。拡張機能を作成することで、ブラウザ上で独自の機能を実装することができます。
今回作ったchrome拡張機能のダウンロードはこちら
https://drive.google.com/file/d/1cHpu1_sxkVghW5FOzzzUmsybwrSWSzF4/view?usp=sharing
(2023.3.2 追記) コメント欄 KK さんより頂いた指摘をもとにバグ修正しております。

2件のコメント
コメントを残す
メールアドレスが公開されることはありません。