🌎

Chromium系ブラウザで使える拡張機能の作り方

kodani takushi

2025/01/07に公開

 執筆日2025/01/07

 概要年末年始に遊んでみて面白かったのでご紹介。(今更って言われるとつらい)

今回はブラウザでテキストを選択してショートカットキーを押すとWeb版ChatGPTが開いて質問する、という拡張機能を作ってみます。

 環境自分が普段Microsoft Edgeを使っているため、紹介するコードはEdgeで動作テストしています。（Chrominum系では同じjavascriptが使えるはずなのでChrome等でも動作すると思います）

 前提edgeブラウザの拡張機能で開発者モードを有効化（後述）
ブラウザでWeb版のChatGPTにログイン

 スクリプト今回必要なファイルはmanifest.jsonとbackground.jsの2つです。

manifest.json: 拡張機能の情報を管理します。スクリプト等のファイルの指定をしたり、拡張機能のブラウザ操作権限を管理したりします。

background.js: 実際の機能を実装するjavascriptです。

 manifest.json
name: 拡張機能管理画面に表示される名前を指定

commands: ショートカットの動作を指定します。ショートカットキーを押したときにブラウザに送信されるコマンド名を指定します。Edgeだとsuggested_keyは反映されなかったため不要かもしれません。
manifest.json
{
    "manifest_version": 3,
    "name": "ChatGPT Quick Ask",
    "version": "1.1",
    "description": "選択したテキストをChatGPTに簡単に送信して質問できます。",
    "permissions": ["activeTab", "storage", "scripting"],
    "background": {
        "service_worker": "background.js"
    },
    "commands": {
        "ask_chatgpt": {
            "suggested_key": {
                "default": "Ctrl+Shift+Q",
                "mac": "Command+Shift+Q"
            },
            "description": "選択したテキストでChatGPTに質問"
        }
    }
}

 background.jsmanifest.jsonで指定したcommandsの中から押されたショートカットキーを名前で判別し、機能を実行します。（if (command === "ask_chatgpt")が対応しています）

やっていることは単純で、「<選択されたテキスト>について教えて」というテキストを作成し、そのテキストで質問するWebのChatGPTを別タブで開いているだけです。
background.js
chrome.commands.onCommand.addListener(async (command) => {
    if (command === "ask_chatgpt") {
        const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
        chrome.scripting.executeScript({
            target: { tabId: tab.id },
            func: () => {
                const selectedText = window.getSelection().toString();
                return selectedText;
            }
        }, (results) => {
            if (results && results[0] && results[0].result) {
                const selectedText = results[0].result;
                const question = `${selectedText}について教えて`;
                const chatGPTURL = `https://chat.openai.com/?q=${encodeURIComponent(question)}`;
                chrome.tabs.create({ url: chatGPTURL });
            } else {
                alert("テキストが選択されていません。");
            }
        });
    }
});

 拡張機能の追加と有効化edgeブラウザの拡張機能で開発者モードを有効化する → 展開して読み込みのボタンが表示される
展開して読み込みを押して、作った拡張機能のファイルがあるフォルダを選択して展開 → 他のソースからに自分の作った拡張機能が追加される

左のタブからキーボードショートカットを選択して、拡張機能を実行する際のショートカットキーを指定する



（私はDeepLの拡張機能による翻訳をCtrl+Spaceに設定してます、便利なのでオススメ）

 使ってみるブラウザで適当にテキストを選択して、ショートカットキーを押す。



ChatGPTのページが別タブで開き質問が自動で送信される。



まあまあ便利（？）

 おわりブラウザで使える拡張機能を作り方の紹介でした。今回はショートカットキーのみで最小構成の機能を作りましたが、ブラウザのバーにボタンを追加して実行できるようにしたり(manifest.jsonにactionを追加)、右クリックから呼び出せるようにしたり(manifest.jsonのpermissionsにcontextMenus、backgroundにリスナーを追加)様々な形の機能を作ることができます。

中身はjavacriptを実行しているのでWebページを操作する様々な処理を実装して遊べます。私は年末年始にSNSの更新ボタンを一定間隔で押したり、広告投稿を非表示化したりする拡張機能をつくって遊んでいました。今回ChatGPTはWeb版を開くようにしていますが、APIキーを持っていれば、fetchでAPIを使って回答生成するのもいいかもしれません。自作のAPIサーバーを立ち上げてjavascript以外の言語の処理を実装するのも楽しいと思います。

ヘッドウォータース

株式会社ヘッドウォータースのテックブログです。生成AI、LLM、Azureのサービスや資格、IoT、XR系などData&AIとApp modernizeに関して幅広く投稿します！

執筆日

概要

環境

前提

スクリプト

manifest.json

background.js

拡張機能の追加と有効化

使ってみる

おわり

Discussion