Got it, since you already have proxy experience, setting up authenticated proxies in a Chrome extension just requires adjusting two core files: manifest.json and your background script. Let’s walk through this clearly, covering both Manifest V2 and V3 since they have key differences.

First, you need to declare the necessary permissions to handle proxy settings and authentication. Here’s what to add:

For Manifest V3 (Recommended for modern extensions) #

{
  "manifest_version": 3,
  "name": "Authenticated Proxy Extension",
  "version": "1.0",
  "permissions": ["proxy", "storage", "webRequest"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "background.js"
  }
}

For Manifest V2 #

{
  "manifest_version": 2,
  "name": "Authenticated Proxy Extension",
  "version": "1.0",
  "permissions": ["proxy", "storage", "webRequest", "webRequestBlocking", "<all_urls>"],
  "background": {
    "scripts": ["background.js"]
  }
}

The critical permissions here are proxy (to set proxy rules) and webRequest/webRequestBlocking (to handle authentication challenges).

Authenticated proxies have two parts: setting the proxy server itself, and handling the 407 Proxy Authentication Required response by sending credentials.

First: Store Your Proxy Credentials (Don’t Hardcode!) #

It’s bad practice to hardcode usernames/passwords. Instead, store them securely in Chrome’s local storage. You can add a simple setup function (or build a popup UI to input them):

// Run this once to save credentials (or add a UI for user input)
chrome.storage.local.set({
  proxyCredentials: {
    username: "your-proxy-username",
    password: "your-proxy-password"
  }
});

Second: Set Up the Proxy Server #

Add code to configure your proxy settings. Adjust the host, port, and scheme to match your proxy provider:

For Both Manifest V2 & V3

chrome.proxy.settings.set({
  value: {
    mode: "fixed_servers",
    rules: {
      singleProxy: {
        scheme: "http", // or "https", "socks5" depending on your proxy
        host: "your-proxy-host.com",
        port: 8080
      },
      bypassList: ["localhost", "127.0.0.1"] // Skip proxy for local addresses
    }
  },
  scope: "regular" // Applies to regular web pages, not extensions/dev tools
}, () => {
  if (chrome.runtime.lastError) {
    console.error("Proxy setup failed:", chrome.runtime.lastError);
  } else {
    console.log("Proxy configured successfully");
  }
});

Third: Handle Proxy Authentication #

When the proxy sends a 407 challenge, we need to inject the credentials via an Authorization header.

For Manifest V3

chrome.webRequest.onAuthRequired.addListener(
  async (details) => {
    const { proxyCredentials } = await chrome.storage.local.get("proxyCredentials");
    return {
      authCredentials: {
        username: proxyCredentials.username,
        password: proxyCredentials.password
      }
    };
  },
  { urls: ["<all_urls>"] },
  ["blocking"]
);

For Manifest V2

chrome.webRequest.onAuthRequired.addListener(
  (details, callback) => {
    chrome.storage.local.get("proxyCredentials", (data) => {
      callback({
        authCredentials: {
          username: data.proxyCredentials.username,
          password: data.proxyCredentials.password
        }
      });
    });
  },
  { urls: ["<all_urls>"] },
  ["blocking"]
);

• Test with Developer Mode: Load your extension in Chrome’s developer mode (chrome://extensions/) and reload it after making changes. Check the background page console for errors.
• Proxy Type Match: Ensure the scheme in your proxy settings matches the type your server uses (HTTP, HTTPS, SOCKS5).
• Special Characters in Credentials: If your username/password has special characters, encode them properly. For example, use encodeURIComponent() before storing, though the authCredentials object usually handles this automatically.
• Bypass List: Add any domains you don’t want routed through the proxy (like local development servers) to the bypassList.

内容的提问来源于stack exchange，提问作者Roman Khmylov