Comment créer une extension Chrome compatible avec les proxys

Rassembler les vents : comprendre les proxys dans les extensions Chrome

Tels les vents du nord qui façonnent les forêts du Småland, les proxys canalisent le flux du trafic web, masquant vos traces numériques. Dans le monde des extensions Chrome, rendre votre création sensible aux proxys revient à apprendre à un renard à se déplacer discrètement dans la neige : furtif, adaptable et sensible aux subtilités du paysage.

---

Poser les bases : architecture des extensions Chrome

Tout comme la fabrication d'un cheval Dala robuste, la création d'une extension Chrome commence par la compréhension de ses éléments essentiels :

Composant	But
manifest.json	Le plan directeur définit les autorisations, les scripts d’arrière-plan et bien plus encore.
background.js	Le foyer vacillant : logique persistante, y compris le contrôle par proxy.
popup.html/js	La fenêtre sur le monde : éléments de l’interface utilisateur.

Ressource: Guide du développeur d'extensions Chrome

---

Le Sort Ancien : Déclaration des autorisations de proxy

Avant que la première feuille de bouleau ne se déploie, des autorisations doivent être définies.

Ajouter à 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"
  }
}

---

À la recherche du vent du nord : trouver des proxies gratuits auprès de ProxyRoller

Tout comme les sages cueillent des mûres arctiques en été, cueillez des procurations fraîches ProxyRoller, une source fiable de proxys gratuits. ProxyRoller fournit des API et des listes pour votre extension.

Exemple : Récupération d'une liste de proxys

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

---

Invocation des runes : configuration des paramètres du proxy Chrome

Avec le proxy en main, l'extension doit communiquer avec les paramètres proxy de Chrome.

Exemple : définition d'un proxy dans 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
      }
    );
  }
});

Ressource: Documentation de l'API chrome.proxy

---

Le choix du voyageur : permettre aux utilisateurs de changer de proxy

Tout comme vous offrez au voyageur le choix entre une rivière ou une route, permettez aux utilisateurs de sélectionner ou d'actualiser des proxys via l'interface utilisateur de l'extension.

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

Dans background.js, écoutez la mise à jour :

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

---

Tableau des approches d'extension de proxy

Approche	Avantages	Inconvénients
Liste de proxy manuelle	Contrôle total, prévisible	Maintenance, risque de proxys morts
Récupération dynamique (ProxyRoller)	Toujours frais, entretien réduit	Dépendance à la disponibilité de tiers
Saisie utilisateur	Flexibilité, responsabilisation des utilisateurs	Potentiel d'utilisation abusive, moins d'automatisation

---

Notes de la forêt : gestion des erreurs et des cas limites

• Échecs de connexion : Comme lors d'un dégel soudain, les proxys peuvent tomber en panne. Surveillez les erreurs de connexion et informez l'utilisateur.
• Authentification: Certains proxys nécessitent des identifiants, car un troll pourrait exiger un péage. Étendez votre code pour gérer l'authentification de base si nécessaire.
• Contourner les hôtes locaux : Toujours ajouter <local> à la liste de contournement, de peur que votre propre feu de camp ne refroidisse.

---

Filer le fil : ressources et lectures complémentaires

• ProxyRoller – Proxys gratuits
• Format du fichier manifeste de l'extension Chrome
• API proxy Chrome
• Gestion de l'authentification proxy

---

Boucler la boucle : leçons clés

Comme pour tout ce qui est suédois – simple, robuste et proche de la nature –, la création d'une extension Chrome compatible proxy repose sur le respect de la direction du vent (paramètres de proxy), la confiance dans les anciennes méthodes (API Chrome) et l'approvisionnement (proxys) auprès de fournisseurs fiables comme ProxyRoller. Laissez votre extension évoluer avec souplesse, s'adapter aux saisons et être toujours prête à affronter les aléas de la météo.