プロキシを設定できるChrome拡張はすでに高機能なものがいくつかあるが、Chromeウェブストアでは「ベストプラクティスに沿わないため、まもなくサポートされなくなる可能性があります。」などと警告が表示されているものもある。

使用できなくなると困るので念のため自前で作成することにした。

Proxy SwitchyOmega https://chromewebstore.google.com/detail/proxy-switchyomega/padekgcemlokbadohgkifijomclgjgif?hl=ja
Proxy SwitchySharp https://chromewebstore.google.com/detail/proxy-switchysharp/dpplabbmogkhghncfbfdeeokoefdjegm?hl=ja

Chrome拡張のManifest V2は廃止が決定しており、警告が表示されているのはManifest V2を使用したままのためと思われる。
なお、この記事のコードはManifest V3の仕様で作成している。

Google Developers Japan: Manifest V2 の段階的廃止を開始 - https://developers-jp.googleblog.com/2024/06/manifest-v2-phase-out-begins.html

Chrome拡張でプロキシを設定するには

そもそもなぜChrome拡張でプロキシを設定できるのか謎だが、chrome.proxyのリファレンスを見るとたしかに設定できると書いてある。

設定を変更するにはchrome.proxy.settings.setメソッドを呼び出す。

background.js

async function setProxySettingsFixedServer() {
    // 省略

    let config = {
        mode: "fixed_servers",
        rules: {
            singleProxy: {
                host: "proxy.example.com",
                port: 8080
            },
        }
    };

    await chrome.proxy.settings.set({ value: config });
}

valueにはmodeとrulesを指定する必要がある。
プロキシサーバーのホスト名を自前で設定するならmodeにはfixed_serversを指定する。
rulesにはプロキシサーバーのホスト名などを指定する。
単に設定するならsingleProxyとhostを設定する。
必要に応じてschemeとportも指定する。

プロキシサーバーを使用したくない場合はmodeにdirectを指定することもできる。

プロキシサーバーがhttpとhttpsで分かれている場合はそれぞれ指定することもできるらしい。
（今時サーバーをわけるメリットはあまりないと思われるが）

// プロキシサーバーがhttpとhttpsで分かれている場合はたぶんこんな感じ（動作未確認）

let config = {
  mode: "fixed_servers",
  rules: {
    proxyForHttp: {
      scheme: "http",
      host: "proxy.example.com"
    },
    proxyForHttps: {
      scheme: "https",
      host: "proxy2.example.com"
    }
  }
};

設定したプロキシの設定を元に戻すにはchrome.proxy.settings.clearを呼び出す。

background.js

async function clearProxySettings() {
    await chrome.proxy.settings.clear({ scope: 'regular' });
}

なお、chrome.proxyを使用するにはmanifest.jsonでpermissionsにproxyの指定が必要である。

manifest.json

    "permissions": [
        "proxy",
        "storage",
        "tabs"
    ]

ここではchrome.storageとchrome.tabsも使用するのでstorageとtabsも指定している。

Chrome拡張のアイコンをクリックしたときの処理

アイコンをクリックしたときの処理を受け取るにはmanifest.jsonにactionの指定が必要になる。

manifest.json

    "action": {}

actionの指定は空でよいが必要。
消してはいけない。

ようやくメインのコードだが、アイコンがクリックされるとchrome.action.onClickedのイベントが呼ばれるのでaddListenerで処理を追加しておく。
プロキシ設定を有効にしたかのフラグはchrome.storage.sessionから取得・保存しておく。
proxyEnableの値を反転して、値によりプロキシの設定をするか、設定をクリアするか切り替える。

background.js

chrome.action.onClicked.addListener(async () => {
    chrome.storage.session.setAccessLevel({ accessLevel: 'TRUSTED_AND_UNTRUSTED_CONTEXTS' });

    let data = await chrome.storage.session.get('proxyEnable');
    let proxyEnable = !data.proxyEnable;

    if (proxyEnable) {
        await setProxySettingsFixedServer();
    }
    else {
        await clearProxySettings();
    }

    await chrome.storage.session.set({ "proxyEnable": proxyEnable });
});

chrome.storage.sessionを使用するには先にsetAccessLevelを呼び出す必要がある。

ブラウザを閉じたときの設定クリア

実はchrome.proxy.settings.setメソッドで設定した内容はブラウザを閉じても残っている。（終了時に自動で破棄されるような設定はみあたらなかった）　
このため、ブラウザを再度開いた際に「Chrome拡張をクリックしてないのにプロキシがONになってるぞ？？」という事態になってしまう。
これを避けるため、ブラウザを閉じたときに設定をクリアしておく。

ブラウザを閉じたかの判定はchrome.tabs.onRemovedでremoveInfo.isWindowClosingをチェックすればよい。
ここではremoveInfo.isWindowClosingがセットされていたらプロキシ設定をクリアする。

background.js

chrome.tabs.onRemoved.addListener((_tabId, removeInfo) => {
    if (removeInfo.isWindowClosing) {
        clearProxySettings();
    }
});

ソースコード