Solas Proxy Manager: 手写一个浏览器代理管理

Solas Proxy Manager: 一个浏览器代理管理扩展

项目概述

github: github.com/yuedud/sola... 欢迎star！！！

Solas Proxy Manager 是一个基于 Chrome Extension Manifest V3 开发的浏览器代理管理扩展。它不仅提供了基础的代理管理功能，还引入了一些创新的设计理念和技术实现。

创新特点

1. 智能配置持久化

传统的代理管理扩展在切换模式时往往会丢失之前的配置，而 Solas 采用了一种创新的配置持久化策略：

javascript 复制代码

const defaultConfig = {
  mode: 'direct',
  proxy: { /* ... */ },
  pac: { /* ... */ },
  lastProxyConfig: null  // 创新点：永久保存最后一次的代理配置
};

这种设计确保了：

用户可以在不同模式间自由切换而不会丢失配置
配置的持久化不依赖于浏览器的会话状态
提供了更好的用户体验和配置管理

2. 状态驱动的 UI 设计

Solas 采用了状态驱动的 UI 设计模式，通过图标状态的变化直观地反映当前的代理状态：

javascript 复制代码

function updateExtensionIcon(mode) {
  const iconPath = {
    direct: { /* 灰色图标 */ },
    proxy: { /* 彩色图标 */ },
    pac: { /* 彩色图标 */ }
  };
  chrome.action.setIcon({ path: iconPath[mode] });
}

这种设计：

提供了即时的视觉反馈
减少了用户的操作成本
提升了用户体验

3. 响应式配置管理

Solas 实现了一个响应式的配置管理系统，能够实时响应配置变化并更新浏览器状态：

javascript 复制代码

function updateProxySettings(config) {
  chrome.storage.local.get(['proxyConfig'], (result) => {
    // 智能配置保存
    if (currentConfig.mode === 'proxy') {
      config.lastProxyConfig = currentConfig.proxy;
    }
    
    // 配置恢复
    if (config.mode === 'proxy' && config.lastProxyConfig) {
      config.proxy = config.lastProxyConfig;
    }
    
    // 实时应用配置
    applyProxySettings(config);
  });
}

技术实现

1. 模块化设计

arduino 复制代码

solas/
├── manifest.json     
├── background.js      
├── popup.html        
├── popup.js          
├── styles.css        
└── icons/

2. 事件驱动架构

采用事件驱动架构处理用户交互和配置更新：

javascript 复制代码

// 事件监听
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'updateProxy') {
    updateProxySettings(request.config);
  }
});

// 配置更新
function updateProxySettings(config) {
  // 处理配置更新
  // 更新图标状态
  // 刷新页面
}

3. 异步操作处理

使用 Promise 和回调处理异步操作：

javascript 复制代码

chrome.storage.local.get(['proxyConfig'], (result) => {
  // 处理配置
  chrome.storage.local.set({ proxyConfig: config }, () => {
    // 应用配置
    // 更新状态
  });
});

调试方法

使用 Chrome 开发者工具
查看控制台日志
使用断点调试