搜索

回答

以下是主要步骤和关键代码示例：

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 扩展开发规范。

这个示例提供了基本框架，你可以根据具体需求进行扩展和修改。

网友回复

我知道答案，我要回答

我有问题

私活外包

回答

开发了一个网站ai聊天助手

一个月开发一套类似coze的智能体平台

部署一套内网离线ai助理

私有ai助理开发

类似如家的租房app开发

h5手机端考试网站开发

开发一个短剧解锁剧集的小程序

我要开发一个酒类拍卖交易平台

开发艺术品拍卖收藏买画卖画h5网站

帮我做个数字货币交易所网站

python如何实现torrent的服务端进行文件分发p2p下载？

如何在浏览器中录制摄像头和麦克风数据为mp4视频保存下载本地？

go如何编写一个类似docker的linux的虚拟容器？

python如何写一个bittorrent的种子下载客户端？

ai能通过看一个网页的交互过程视频自主模仿复制网页编写代码吗？

ai先写功能代码通过chrome mcp来进行测试功能最后ai美化页面这个流程能行吗？

vue在手机端上下拖拽元素的时候如何禁止父元素及body的滚动导致无法拖拽完成？

使用tailwindcss如何去掉响应式自适应？

有没有直接在浏览器中运行的离线linux系统？

nginx如何保留post或get数据进行url重定向？