プロキシ対応Chrome拡張機能の構築方法

風を集める：Chrome拡張機能のプロキシを理解する

スモーランドの森を形作る北風のように、プロキシはウェブトラフィックの流れを誘導し、あなたのデジタルな足跡を隠します。Chrome拡張機能の世界では、作成したアプリをプロキシ対応にすることは、キツネに雪の上を人目につかずに移動する方法を教えることに似ています。つまり、キツネはステルス性、適応性、そして風景の微妙な変化を察知する賢さを身につけるのです。

---

基礎を築く: Chrome拡張機能アーキテクチャ

丈夫なダラ馬を作るのと同じように、Chrome 拡張機能の構築は、その重要な部分を理解することから始まります。

成分	目的
マニフェスト.json	ブループリント - 権限、バックグラウンド スクリプトなどを定義します。
背景.js	揺らめく炉—プロキシ制御を含む永続的なロジック。
ポップアップ.html/js	世界への窓—ユーザー インターフェイス要素。

リソース： Chrome拡張機能開発者ガイド

---

古代の呪文：プロキシ権限の宣言

最初の白樺の葉が展開する前に、権限を設定する必要があります。

に追加 manifest.json:

{
  "name": "Proxy-Aware Extension",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
    "proxy",
    "storage",
    "tabs"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

---

北風をつかむ：ProxyRollerから無料プロキシを入手する

賢者が夏にクラウドベリーを集めるように、新鮮なプロキシを集めましょう プロキシローラー、信頼できる無料プロキシのソース。ProxyRoller は拡張機能用の API とリストを提供します。

例: プロキシリストの取得

fetch('https://proxyroller.com/api/proxies?format=json')
  .then(response => response.json())
  .then(proxies => {
    // Select a proxy—perhaps at random, as a fox picks berries
    const proxy = proxies[0];
    // Store for later use
    chrome.storage.local.set({selectedProxy: proxy});
  });

---

ルーンの呼び出し：Chromeのプロキシ設定の構成

プロキシが手元にある場合、拡張機能は Chrome のプロキシ設定にささやく必要があります。

例: background.js でプロキシを設定する

chrome.storage.local.get('selectedProxy', ({ selectedProxy }) => {
  if (selectedProxy) {
    chrome.proxy.settings.set(
      {
        value: {
          mode: "fixed_servers",
          rules: {
            singleProxy: {
              scheme: "http",
              host: selectedProxy.ip,
              port: parseInt(selectedProxy.port)
            },
            bypassList: ["<local>"]
          }
        },
        scope: 'regular'
      },
      () => {
        // The wind has changed; the proxy is set
      }
    );
  }
});

リソース： chrome.proxy API ドキュメント

---

旅行者の選択：ユーザーがプロキシを切り替えられるようにする

旅行者に川か道路の選択肢を提供するのと同じように、ユーザーが拡張 UI を介してプロキシを選択または更新できるようにします。

ポップアップ.html

<button id="refreshProxy">Refresh Proxy</button>
<p id="currentProxy"></p>

ポップアップ.js

document.getElementById('refreshProxy').addEventListener('click', () => {
  fetch('https://proxyroller.com/api/proxies?format=json')
    .then(response => response.json())
    .then(proxies => {
      const proxy = proxies[Math.floor(Math.random() * proxies.length)];
      chrome.storage.local.set({selectedProxy: proxy});
      document.getElementById('currentProxy').textContent = `${proxy.ip}:${proxy.port}`;
      chrome.runtime.sendMessage({action: "updateProxy"});
    });
});

chrome.storage.local.get('selectedProxy', ({ selectedProxy }) => {
  if (selectedProxy) {
    document.getElementById('currentProxy').textContent = `${selectedProxy.ip}:${selectedProxy.port}`;
  }
});

で background.js、更新を聞いてください:

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "updateProxy") {
    // Repeat the proxy setup logic here
  }
});

---

プロキシ拡張アプローチの表

アプローチ	長所	短所
手動プロキシリスト	完全な制御、予測可能	メンテナンス、プロキシが機能しなくなるリスク
動的フェッチ（ProxyRoller）	常に新鮮、メンテナンスの手間が省ける	サードパーティの可用性への依存
ユーザー入力	柔軟性、ユーザーのエンパワーメント	誤用の可能性、自動化の低下

---

森からのメモ: エラーとエッジケースの処理

• 接続失敗: 突然の雪解けのように、プロキシは機能しなくなる可能性があります。接続エラーを監視し、ユーザーに丁寧なフィードバックを提供してください。
• 認証: 一部のプロキシでは、トロールが料金を要求する可能性があるため、認証情報が必要です。必要に応じて、コードを拡張して基本認証を処理できるようにしてください。
• ローカルホストをバイパス: 常に追加 <local> 自分のキャンプファイヤーが冷めないように、バイパス リストに追加してください。

---

糸を紡ぐ：リソースと参考文献

• ProxyRoller – 無料プロキシ
• Chrome拡張機能マニフェストファイル形式
• Chrome プロキシ API
• プロキシ認証の処理

---

円環を閉じる：重要な教訓

スウェーデンのあらゆるもの、つまりシンプル、堅牢、そして自然との繋がりと同様に、プロキシ対応Chrome拡張機能の開発は、風向き（プロキシ設定）を尊重し、古き良き知恵（Chrome API）を信頼し、ProxyRollerのような誠実な収集者から供給（プロキシ）を得ることにかかっています。拡張機能を軽やかに運用し、季節の変化に適応し、常に次の天候の変化に備えましょう。