ChatGPTを自作Chrome拡張機能でカスタマイズする方法

ChatGPTをオレオレ機能で強化してえんだッッッ

いいぞ、許すッッッ

やり方を以下に教えるッ

その前にイメージ図

この例ですと、赤矢印の先にラジオボタンが追加されています。
それでは作り方に行きましょう。

流れ

１．フォルダを作る
２．マニフェストファイルを作る
３．ペイントなどでロゴを作る
４．javascriptファイルを作る
５．一式揃ったフォルダをテストの為にChromeへ格納する
６．実行

１．フォルダを作る

お好きな場所に、以下のような構成でフォルダを作って下さい。

２．マニフェストファイルを作る

{
    "manifest_version": 3,
    "name": "your-extension-name",
    "version": "0.0.1",
    "description": "拡張機能の説明文",
    "icons": {
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },
    "default_locale": "ja",
    "action": {
        "default_icon": "popup16.png",
        "default_popup": "popup.html"
    },
    "content_scripts": [
        {
            "matches": [
                "https://chat.openai.com/chat/*"
            ],
            "css": [
                "css/style.css"
            ],
            "js": [
                "js/content-script.js"
            ],
            "run_at": "document_end",
            "all_frames": true
        }
    ]
}

2023年現在、manifest_versionは3じゃないとダメらしいです。
default_localeをjpにしていますが、通常はenにしておくと吉。
※jpにすると、messages.jsonファイルを用意しなければエラーとなる

３．ペイントなどでロゴを作る

私はファイアーアルパカで作りました。
ロゴ画像のサイズを簡単に変更&保存出来るので。
ペイントでも出来るんでしょうか？

４．javascriptファイルを作る

function waitForPageLoad() {
    // ページが完全に読み込まれるまで待機する
    if (document.readyState !== "complete") {
        setTimeout(waitForPageLoad, 1000);
        return;
    }

    // 指定した要素が表示されるまで待機する
    const targetElement = document.querySelector('wcg-slash-commands-menu');
    if (targetElement === null) {
        setTimeout(waitForPageLoad, 1000);
        return;
    }

    {
        const newDiv = document.createElement('div');
        const newInput = document.createElement('input');
        newInput.type = 'radio';
        newInput.name = 'radio';
        const newInput2 = document.createElement('input');
        newInput2.type = 'radio';
        newInput2.name = 'radio';
        const newTextNode = document.createTextNode('結果をCSV出力する');
        const newTextNode2 = document.createTextNode('結果をCSV出力しない');
        newDiv.appendChild(newInput);
        newDiv.appendChild(newTextNode);
        newDiv.appendChild(newInput2);
        newDiv.appendChild(newTextNode2);
        targetElement.prepend(newDiv);
    }
}

waitForPageLoad();

なんでこんな処理になってるかって言うと、ChatGPT君はページ読み込み後にDOMを作るからです。
なので、DOMが作られるのを待ってから、要素を挿入しています。

５．一式揃ったフォルダをテストの為にChromeへ格納する

Chromeのextensions画面へ移動し、
「パッケージ化されていない拡張機能を読み込む」
で、今回作ったフォルダを指定します。

６．実行

拡張機能をChromeの右上の拡張アイコンから有効化します。
その後、ChatGPTへアクセス
すると、冒頭のイメージの通りになります。

７．終わり

実はこれ全部ChatGPT君に全部教わったッ

普段javascript触ってないし、拡張機能を作るの初めてだったけど、教わったから40分～1時間で終わったッ

余りにもッッッChatGPT君優秀ッッッ！

月たったの20ドルッ　すごッ

終わりッ

良かったら「あったら良いな」っていう機能をコメントして言ってねッ！作るからッ（多分