Chrome扩展开发：按需捕获请求及过滤GET请求方案咨询

嘿，针对你开发Chrome扩展时遇到的请求捕获和XSS检测优化问题，我整理了一套实用的解决方案，来一步步帮你搞定：

一、实现「默认检查地址栏+按需捕获POST」的方案 #

1. 默认仅检查地址栏内容 #

你可以通过监听chrome.tabs.onUpdated事件，在标签页加载完成时获取地址栏的URL并解析GET参数——这样完全不会触发资源请求的捕获，只针对用户输入的初始URL：

// background.js
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // 只处理加载完成且是HTTP/HTTPS的URL
  if (changeInfo.status === 'complete' && tab.url?.startsWith('http')) {
    const url = new URL(tab.url);
    const getParams = Object.fromEntries(url.searchParams.entries());
    // 调用你的XSS评估API
    evaluateXSS({ method: 'GET', params: getParams });
  }
});

2. 点击弹窗按钮后才捕获POST请求 #

我们可以通过「弹窗按钮+消息通信」的方式，让用户手动触发POST请求的捕获功能，具体步骤如下：

第一步：弹窗页面代码

先做一个简单的开关按钮：

<!-- popup.html -->
<button id="togglePostCapture">开启POST请求检测</button>
<script src="popup.js"></script>

然后给按钮添加逻辑，切换状态并通知后台：

// popup.js
const toggleBtn = document.getElementById('togglePostCapture');
let isPostCapturing = false;

// 从本地存储恢复上次的状态（可选，避免弹窗刷新后重置）
chrome.storage.local.get('isPostCapturing', (result) => {
  isPostCapturing = result.isPostCapturing || false;
  updateBtnText();
});

toggleBtn.addEventListener('click', () => {
  isPostCapturing = !isPostCapturing;
  updateBtnText();
  // 给后台发消息，切换POST监听状态
  chrome.runtime.sendMessage({ action: 'togglePostCapture', status: isPostCapturing });
  // 保存状态到本地存储
  chrome.storage.local.set({ isPostCapturing });
});

function updateBtnText() {
  toggleBtn.textContent = isPostCapturing ? '关闭POST请求检测' : '开启POST请求检测';
}

第二步：后台脚本处理监听开关

后台脚本根据弹窗的指令，动态添加/移除POST请求的监听器：

// background.js
let listenToPost = false;

// 监听来自弹窗的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'togglePostCapture') {
    listenToPost = message.status;
    // 切换监听状态
    if (listenToPost) {
      chrome.webRequest.onBeforeRequest.addListener(
        handlePostRequest,
        { urls: ['<all_urls>'], types: ['main_frame', 'sub_frame'] }, // 可按需调整请求类型
        ['requestBody'] // 必须声明这个权限才能获取POST参数
      );
    } else {
      chrome.webRequest.onBeforeRequest.removeListener(handlePostRequest);
    }
  }
});

function handlePostRequest(details) {
  if (details.method === 'POST' && details.requestBody) {
    // 解析POST参数，兼容不同格式
    let postParams = {};
    if (details.requestBody.formData) {
      postParams = details.requestBody.formData;
    } else if (details.requestBody.raw) {
      // 处理JSON等原始格式
      const rawData = new TextDecoder('utf-8').decode(details.requestBody.raw[0].bytes);
      try {
        postParams = JSON.parse(rawData);
      } catch (e) {
        postParams = { rawContent: rawData };
      }
    }
    // 调用XSS评估API
    evaluateXSS({ method: 'POST', params: postParams });
  }
}

// 模拟你的XSS评估函数
function evaluateXSS(requestData) {
  console.log('正在评估XSS:', requestData);
  // 这里替换成你的实际API请求逻辑
}

二、关于「过滤GET请求，仅捕获初始URL」的问题 #

当然可以！完全不用放弃chrome.webRequest，只要通过配置监听参数，就能精准捕获用户输入的初始URL，排除页面资源的请求：

优化后的GET请求监听方案 #

// background.js
chrome.webRequest.onBeforeRequest.addListener(
  handleGetRequest,
  { urls: ['<all_urls>'], types: ['main_frame'] }, // 只监听主框架请求
  ['requestBody']
);

function handleGetRequest(details) {
  if (details.method === 'GET') {
    const url = new URL(details.url);
    const getParams = Object.fromEntries(url.searchParams.entries());
    evaluateXSS({ method: 'GET', params: getParams });
  }
}

这里的核心是types: ['main_frame']——这个参数会让监听器只捕获用户输入URL后加载的那个核心页面请求，像图片、CSS、JS这类子资源（script、image、sub_frame等类型）的GET请求会被自动过滤掉。

如果需要更精细的控制，还可以通过details.initiator判断请求发起者：比如只有当initiator为空（表示是用户直接输入的URL）时才处理，但通常main_frame类型已经足够满足你的需求了。

这样既保留了chrome.webRequest的实时性，又不会产生多余的请求，完美解决API服务器负载过大的问题。

内容的提问来源于stack exchange，提问作者Kushal Mondal