Cómo crear una extensión de Chrome compatible con proxy

Reuniendo los vientos: Comprensión de los proxies en las extensiones de Chrome

Como los vientos del norte que moldean los bosques de Småland, los proxies canalizan el flujo del tráfico web, ocultando tus huellas digitales. En el ámbito de las extensiones de Chrome, hacer que tu creación sea sensible a los proxys es como enseñarle a un zorro a moverse sin ser visto por la nieve: sigiloso, adaptable y atento a las sutilezas del paisaje.

---

Sentando las bases: Arquitectura de extensiones de Chrome

Al igual que cuando se crea un robusto caballo de Dala, la creación de una extensión de Chrome comienza con la comprensión de sus partes esenciales:

Componente	Objetivo
manifiesto.json	El plan: define permisos, scripts en segundo plano y más.
fondo.js	El hogar parpadeante: lógica persistente, incluido el control por poderes.
popup.html/js	La ventana al mundo: elementos de la interfaz de usuario.

Recurso: Guía para desarrolladores de extensiones de Chrome

---

El hechizo antiguo: Declaración de permisos de proxy

Antes de que brote la primera hoja de abedul, se deben establecer permisos.

añadir 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"
  }
}

---

Buscando el viento del norte: Cómo obtener proxies gratuitos de ProxyRoller

Así como los sabios recogen moras de los pantanos en verano, recogen nuevas zarzamoras de Rodillo proxyUna fuente confiable de proxies gratuitos. ProxyRoller proporciona API y listas para tu extensión.

Ejemplo: Obtener una lista de servidores proxy

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});
  });

---

Invocación de las Runas: Configuración del proxy de Chrome

Con el proxy en mano, la extensión debe susurrar a la configuración de proxy de Chrome.

Ejemplo: Configuración de un proxy en 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
      }
    );
  }
});

Recurso: Documentación de la API de chrome.proxy

---

La elección del viajero: permitir a los usuarios cambiar de proxy

Al igual que ofrecer a un viajero la posibilidad de elegir entre río o carretera, permita a los usuarios seleccionar o actualizar servidores proxy a través de la interfaz de usuario de la extensión.

ventana emergente.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}`;
  }
});

En background.js, escucha la actualización:

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

---

Tabla de enfoques de extensión de proxy

Acercarse	Ventajas	Contras
Lista de proxy manual	Control total, predecible	Mantenimiento, riesgo de servidores proxy inactivos
Recuperación dinámica (ProxyRoller)	Siempre fresco, mantenimiento reducido	Dependencia de la disponibilidad de terceros
Entrada del usuario	Flexibilidad, empoderamiento del usuario	Potencial de mal uso, menor automatización

---

Notas desde el bosque: Manejo de errores y casos extremos

• Fallos de conexión: Como en un deshielo repentino, los proxies pueden fallar. Monitorea los errores de conexión y ofrece una respuesta amable al usuario.
• Autenticación: Algunos proxies requieren credenciales, ya que un troll podría exigir un peaje. Amplía tu código para gestionar la autenticación básica si es necesario.
• Omitir hosts locales: Añade siempre <local> a la lista de derivación, para que tu propia fogata no se apague.

---

Hilando el hilo: recursos y lecturas adicionales

• ProxyRoller – Proxies gratuitos
• Formato del archivo de manifiesto de la extensión de Chrome
• API de proxy de Chrome
• Manejo de la autenticación de proxy

---

Cerrando el círculo: Lecciones clave

Como en todo lo sueco —simple, robusto y natural—, el arte de crear una extensión de Chrome compatible con proxy reside en respetar la dirección del viento (configuración del proxy), confiar en la sabiduría de los antiguos (API de Chrome) y obtener recursos (proxies) de recolectores honestos como ProxyRoller. Deja que tu extensión se adapte con suavidad a las estaciones y esté siempre lista para el próximo cambio de clima.