GitHub - vanwhebin/redirect-ext

🔄 Chrome域名转发插件

一个专为开发者设计的Chrome插件,用于将指定域名的流量转发到本地端口,方便开发和调试。

🚀 功能特点

  • 智能域名转发: 将指定域名的所有请求转发到本地端口
  • 动态规则管理: 实时添加、删除、修改转发规则
  • 持久化存储: 规则保存到Chrome存储,重启浏览器后仍然有效
  • 全面请求支持: 支持HTTP/HTTPS、AJAX、Fetch、图片、脚本等各种请求类型
  • 友好的用户界面: 直观的配置界面,支持快速添加常用配置
  • 完整的测试工具: 内置测试页面,验证转发功能是否正常工作
  • 实时状态监控: 查看当前生效的规则和插件状态

📦 安装方法

1. 开发者模式安装

  1. 下载或克隆本项目到本地
  2. 打开Chrome浏览器,访问 chrome://extensions/
  3. 开启右上角的"开发者模式"
  4. 点击"加载已解压的扩展程序"
  5. 选择项目文件夹
  6. 插件安装完成!

2. 使用测试页面

安装完成后,在插件目录下打开 test.html 文件即可使用内置的测试工具。

⚙️ 配置方法

基本配置步骤

  1. 点击浏览器工具栏上的插件图标
  2. 在弹出窗口中配置转发规则:
    • 域名: 要转发的域名(如:api.example.com)
    • 端口: 本地服务器端口(如:8080)
  3. 点击"保存配置"按钮
  4. 刷新目标网页,转发规则即刻生效

快速配置

插件提供了常用配置的快速添加按钮:

  • API服务 (8080): 适用于后端API服务
  • 前端应用 (3000): 适用于React/Vue等前端应用
  • CDN资源 (8081): 适用于静态资源服务器

配置示例

域名: api.example.com
端口: 8080
效果: https://api.example.com/* → http://localhost:8080/*

🧪 测试验证

使用内置测试工具

打开 test.html 页面,提供了以下测试功能:

  1. 基本转发测试: 验证配置的域名是否正确转发
  2. AJAX请求测试: 测试XMLHttpRequest和Fetch API
  3. 资源加载测试: 测试图片、脚本等静态资源
  4. 规则状态检查: 查看当前生效的转发规则
  5. 高级测试: 批量请求、子域名、HTTPS等复杂场景

手动测试方法

  1. 在插件中配置转发规则
  2. 启动本地服务器
  3. 访问目标域名
  4. 查看浏览器控制台的网络请求
  5. 确认请求被转发到本地端口

🔧 技术实现

核心API

  • declarativeNetRequest: Chrome的网络请求拦截和重定向API
  • chrome.storage: 规则持久化存储
  • Service Worker: 后台脚本处理规则更新

规则格式

{
  id: 唯一标识符,
  priority: 优先级,
  action: {
    type: 'redirect',
    redirect: {
      transform: {
        scheme: 'http',
        host: 'localhost',
        port: '8080'
      }
    }
  },
  condition: {
    regexFilter: '^https?://([^/]+\\.)?domain\\.com(/.*)?$',
    resourceTypes: ['main_frame', 'sub_frame', 'xmlhttprequest', 'script', 'image', 'other']
  }
}

🐛 常见问题排查

转发不生效的常见原因

  1. 规则未保存

    • 确认点击了"保存配置"按钮
    • 查看插件弹出窗口是否显示"规则保存成功"
  2. 本地服务器未启动

    • 确认本地服务器正在运行
    • 检查服务器监听的端口是否正确
  3. 浏览器缓存问题

    • 清除浏览器缓存
    • 使用无痕模式测试
    • 在测试URL后面添加随机参数(如?t=123
  4. 规则配置错误

    • 检查域名格式是否正确(不需要http://前缀)
    • 确认端口范围在1-65535之间
    • 使用测试工具验证规则是否生效
  5. Chrome权限问题

    • 确认插件有必要的权限
    • 检查是否被其他插件冲突
    • 尝试重新安装插件

调试方法

  1. 查看控制台日志

    • 打开目标网页的开发者工具
    • 查看Network面板中的请求详情
    • 检查请求的实际目标地址
  2. 使用插件测试工具

    • 打开 test.html 测试页面
    • 执行各种测试用例
    • 查看详细的测试结果
  3. 查看Service Worker日志

    • 访问 chrome://extensions/
    • 找到本插件,点击"Service Worker"链接
    • 查看控制台输出的调试信息

📝 使用建议

最佳实践

  1. 规则命名: 使用有意义的域名,便于识别
  2. 端口管理: 为不同类型的服务分配固定端口
  3. 测试验证: 每次修改规则后都要测试验证
  4. 备份配置: 定期导出重要配置(通过Chrome存储查看)

性能优化

  1. 规则数量: 避免创建过多规则,影响性能
  2. 精确匹配: 使用具体的域名,避免过于宽泛的匹配
  3. 优先级设置: 重要规则设置较高优先级

🔒 安全注意事项

  1. 本地服务安全: 确保本地服务器安全可靠
  2. HTTPS转发: 注意HTTPS到HTTP的安全 implications
  3. 规则审查: 定期检查配置的转发规则
  4. 权限最小化: 只授予必要的权限

🆘 获取帮助

如果遇到问题:

  1. 查看本README的常见问题部分
  2. 使用内置的测试工具进行诊断
  3. 检查浏览器控制台和Service Worker日志
  4. 在GitHub上提交Issue(如果有的话)

📄 更新日志

v1.0.0

  • 初始版本发布
  • 支持基本的域名转发功能
  • 提供友好的配置界面
  • 内置完整的测试工具

💡 提示: 本插件专为开发者设计,用于本地开发和调试。请确保遵守相关网站的使用条款和法律法规。