以下是主要步骤和关键代码示例:
1. 首先创建插件的基本结构my-chrome-proxy/ ├── manifest.json ├── background.js ├── popup.html ├── popup.js └── icons/ ├── icon16.png ├── icon48.png └── icon128.png2. 配置 manifest.json
{ "manifest_version": 3, "name": "Request Proxy Modifier", "version": "1.0", "description": "Modify and proxy Chrome requests", "permissions": [ "webRequest", "webRequestBlocking", "proxy", "storage", "<all_urls>" ], "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html", "default_icon": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" } }, "icons": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" } }3. 编写 background.js 处理请求拦截
// background.js chrome.webRequest.onBeforeRequest.addListener( function(details) { // 修改请求 const url = new URL(details.url); // 示例:修改请求参数 if (url.hostname === 'example.com') { url.searchParams.set('modified', 'true'); return { redirectUrl: url.toString() }; } return { cancel: false }; }, { urls: ["<all_urls>"] }, ["blocking"] ); // 设置代理 chrome.proxy.settings.set({ value: { mode: "fixed_servers", rules: { singleProxy: { scheme: "http", host: "proxy.example.com", port: 8080 } } }, scope: "regular" });4. 创建 popup.html 用户界面
<!DOCTYPE html> <html> <head> <style> body { width: 300px; padding: 10px; } .form-group { margin-bottom: 10px; } </style> </head> <body> <div class="form-group"> <label>代理服务器:</label> <input type="text" id="proxyHost" placeholder="proxy.example.com"> </div> <div class="form-group"> <label>端口:</label> <input type="number" id="proxyPort" placeholder="8080"> </div> <div class="form-group"> <label>URL匹配规则:</label> <input type="text" id="urlPattern" placeholder="*://*.example.com/*"> </div> <button id="saveButton">保存设置</button> <script src="popup.js"></script> </body> </html>5. 编写 popup.js 处理用户交互
// popup.js document.getElementById('saveButton').addEventListener('click', function() { const proxyHost = document.getElementById('proxyHost').value; const proxyPort = parseInt(document.getElementById('proxyPort').value); const urlPattern = document.getElementById('urlPattern').value; // 保存设置到 storage chrome.storage.sync.set({ proxyHost: proxyHost, proxyPort: proxyPort, urlPattern: urlPattern }, function() { // 更新代理设置 chrome.proxy.settings.set({ value: { mode: "fixed_servers", rules: { singleProxy: { scheme: "http", host: proxyHost, port: proxyPort } } }, scope: "regular" }); }); }); // 加载保存的设置 chrome.storage.sync.get(['proxyHost', 'proxyPort', 'urlPattern'], function(data) { if (data.proxyHost) document.getElementById('proxyHost').value = data.proxyHost; if (data.proxyPort) document.getElementById('proxyPort').value = data.proxyPort; if (data.urlPattern) document.getElementById('urlPattern').value = data.urlPattern; });6. 添加高级功能(可选)
// 请求头修改 chrome.webRequest.onBeforeSendHeaders.addListener( function(details) { // 添加自定义请求头 details.requestHeaders.push({ name: "X-Custom-Header", value: "CustomValue" }); return { requestHeaders: details.requestHeaders }; }, { urls: ["<all_urls>"] }, ["blocking", "requestHeaders"] ); // 响应修改 chrome.webRequest.onHeadersReceived.addListener( function(details) { // 修改响应头 const headers = details.responseHeaders; headers.push({ name: 'Access-Control-Allow-Origin', value: '*' }); return { responseHeaders: headers }; }, { urls: ["<all_urls>"] }, ["blocking", "responseHeaders"] );主要功能点:请求拦截和修改:通过 chrome.webRequest.onBeforeRequest 拦截请求并修改 URL。代理服务器设置:通过 chrome.proxy.settings.set 设置代理服务器。自定义规则配置:通过 popup.html 和 popup.js 提供用户界面,保存配置到 chrome.storage。请求/响应头修改:通过 chrome.webRequest.onBeforeSendHeaders 和 chrome.webRequest.onHeadersReceived 修改请求和响应头。配置持久化存储:使用 chrome.storage 保存用户设置。使用说明:创建上述文件结构。在 Chrome 扩展管理页面启用开发者模式。点击“加载已解压的扩展程序”。选择插件目录即可安装。注意事项:需要适当的权限声明。考虑安全性问题。做好错误处理。提供用户反馈。遵守 Chrome 扩展开发规范。
这个示例提供了基本框架,你可以根据具体需求进行扩展和修改。
网友回复
python如何实现torrent的服务端进行文件分发p2p下载?
如何在浏览器中录制摄像头和麦克风数据为mp4视频保存下载本地?
go如何编写一个类似docker的linux的虚拟容器?
python如何写一个bittorrent的种子下载客户端?
ai能通过看一个网页的交互过程视频自主模仿复制网页编写代码吗?
ai先写功能代码通过chrome mcp来进行测试功能最后ai美化页面这个流程能行吗?
vue在手机端上下拖拽元素的时候如何禁止父元素及body的滚动导致无法拖拽完成?
使用tailwindcss如何去掉响应式自适应?
有没有直接在浏览器中运行的离线linux系统?
nginx如何保留post或get数据进行url重定向?