🔄 Chrome域名转发插件
一个专为开发者设计的Chrome插件,用于将指定域名的流量转发到本地端口,方便开发和调试。
🚀 功能特点
- 智能域名转发: 将指定域名的所有请求转发到本地端口
- 动态规则管理: 实时添加、删除、修改转发规则
- 持久化存储: 规则保存到Chrome存储,重启浏览器后仍然有效
- 全面请求支持: 支持HTTP/HTTPS、AJAX、Fetch、图片、脚本等各种请求类型
- 友好的用户界面: 直观的配置界面,支持快速添加常用配置
- 完整的测试工具: 内置测试页面,验证转发功能是否正常工作
- 实时状态监控: 查看当前生效的规则和插件状态
📦 安装方法
1. 开发者模式安装
- 下载或克隆本项目到本地
- 打开Chrome浏览器,访问
chrome://extensions/ - 开启右上角的"开发者模式"
- 点击"加载已解压的扩展程序"
- 选择项目文件夹
- 插件安装完成!
2. 使用测试页面
安装完成后,在插件目录下打开 test.html 文件即可使用内置的测试工具。
⚙️ 配置方法
基本配置步骤
- 点击浏览器工具栏上的插件图标
- 在弹出窗口中配置转发规则:
- 域名: 要转发的域名(如:api.example.com)
- 端口: 本地服务器端口(如:8080)
- 点击"保存配置"按钮
- 刷新目标网页,转发规则即刻生效
快速配置
插件提供了常用配置的快速添加按钮:
- API服务 (8080): 适用于后端API服务
- 前端应用 (3000): 适用于React/Vue等前端应用
- CDN资源 (8081): 适用于静态资源服务器
配置示例
域名: api.example.com
端口: 8080
效果: https://api.example.com/* → http://localhost:8080/*
🧪 测试验证
使用内置测试工具
打开 test.html 页面,提供了以下测试功能:
- 基本转发测试: 验证配置的域名是否正确转发
- AJAX请求测试: 测试XMLHttpRequest和Fetch API
- 资源加载测试: 测试图片、脚本等静态资源
- 规则状态检查: 查看当前生效的转发规则
- 高级测试: 批量请求、子域名、HTTPS等复杂场景
手动测试方法
- 在插件中配置转发规则
- 启动本地服务器
- 访问目标域名
- 查看浏览器控制台的网络请求
- 确认请求被转发到本地端口
🔧 技术实现
核心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'] } }
🐛 常见问题排查
转发不生效的常见原因
-
规则未保存
- 确认点击了"保存配置"按钮
- 查看插件弹出窗口是否显示"规则保存成功"
-
本地服务器未启动
- 确认本地服务器正在运行
- 检查服务器监听的端口是否正确
-
浏览器缓存问题
- 清除浏览器缓存
- 使用无痕模式测试
- 在测试URL后面添加随机参数(如
?t=123)
-
规则配置错误
- 检查域名格式是否正确(不需要http://前缀)
- 确认端口范围在1-65535之间
- 使用测试工具验证规则是否生效
-
Chrome权限问题
- 确认插件有必要的权限
- 检查是否被其他插件冲突
- 尝试重新安装插件
调试方法
-
查看控制台日志
- 打开目标网页的开发者工具
- 查看Network面板中的请求详情
- 检查请求的实际目标地址
-
使用插件测试工具
- 打开
test.html测试页面 - 执行各种测试用例
- 查看详细的测试结果
- 打开
-
查看Service Worker日志
- 访问
chrome://extensions/ - 找到本插件,点击"Service Worker"链接
- 查看控制台输出的调试信息
- 访问
📝 使用建议
最佳实践
- 规则命名: 使用有意义的域名,便于识别
- 端口管理: 为不同类型的服务分配固定端口
- 测试验证: 每次修改规则后都要测试验证
- 备份配置: 定期导出重要配置(通过Chrome存储查看)
性能优化
- 规则数量: 避免创建过多规则,影响性能
- 精确匹配: 使用具体的域名,避免过于宽泛的匹配
- 优先级设置: 重要规则设置较高优先级
🔒 安全注意事项
- 本地服务安全: 确保本地服务器安全可靠
- HTTPS转发: 注意HTTPS到HTTP的安全 implications
- 规则审查: 定期检查配置的转发规则
- 权限最小化: 只授予必要的权限
🆘 获取帮助
如果遇到问题:
- 查看本README的常见问题部分
- 使用内置的测试工具进行诊断
- 检查浏览器控制台和Service Worker日志
- 在GitHub上提交Issue(如果有的话)
📄 更新日志
v1.0.0
- 初始版本发布
- 支持基本的域名转发功能
- 提供友好的配置界面
- 内置完整的测试工具
💡 提示: 本插件专为开发者设计,用于本地开发和调试。请确保遵守相关网站的使用条款和法律法规。