以下是主要步骤和关键代码示例：
1. 首先创建插件的基本结构my-chrome-proxy/
├── manifest.json
├── background.js
├── popup.html
├── popup.js
└── icons/
├── icon16.png
├── icon48.png
└── icon128.png 2. 配置 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 扩展开发规范。这个示例提供了基本框架，你可以根据具体需求进行扩展和修改。
网友回复
我知道答案，我要回答
私活外包
