Как создать расширение Chrome, поддерживающее прокси-сервер

Собирая ветер: понимание прокси в расширениях Chrome

Подобно северным ветрам, формирующим леса Смоланда, прокси-серверы направляют поток веб-трафика, скрывая ваши цифровые следы. В мире расширений Chrome сделать ваше творение совместимым с прокси-сервером — всё равно что научить лису незаметно передвигаться по снегу — незаметно, гибко и с пониманием особенностей ландшафта.

---

Закладываем фундамент: архитектура расширений Chrome

Подобно созданию выносливого коня Далы, создание расширения Chrome начинается с понимания его основных частей:

Компонент	Цель
manifest.json	План — определяет разрешения, фоновые сценарии и многое другое.
фон.js	Мерцающий очаг — устойчивая логика, включая контроль со стороны посредников.
popup.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, надёжный источник бесплатных прокси. 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
      }
    );
  }
});

Ресурс: Документация API chrome.proxy

---

Выбор путешественника: возможность пользователям переключать прокси-серверы

Подобно тому, как вы предлагаете путешественнику выбор реки или дороги, позвольте пользователям выбирать или обновлять прокси через пользовательский интерфейс расширения.

всплывающее окно.html

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

popup.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
• API прокси-сервера Chrome
• Обработка аутентификации прокси-сервера

---

Замыкая круг: ключевые уроки

Как и во всём шведском — простом, надёжном и бережно относящемся к природе — мастерство создания расширения Chrome с поддержкой прокси-серверов заключается в учёте направления ветра (настройки прокси-сервера), доверии мудрости прошлого (API Chrome) и поиске ресурсов (прокси-серверов) у добросовестных поставщиков, таких как ProxyRoller. Пусть ваше расширение будет лёгким в использовании, адаптируясь к смене времён года и всегда готовым к следующим изменениям погоды.