Chrome插件webRequest拦截请求并获取POST请求体requestBody数据raw内容，解决中文乱码问题

一只蜗牛儿

于 2024-10-01 14:00:09 发布

阅读量203

点赞数 3

文章标签： chrome 前端

本文链接：https://blog.csdn.net/qq_42978535/article/details/142670452

版权

在开发Chrome扩展时，我们经常需要拦截网络请求并获取请求体中的数据。对于POST请求体中的内容，特别是包含中文字符时，可能会遇到乱码问题。本文将介绍如何使用chrome.webRequest API拦截请求，获取POST请求体，并解决中文乱码问题。

一、Chrome插件基本结构

在开发Chrome扩展时，通常会有以下几个文件：

manifest.json: 扩展的配置文件
background.js: 背景脚本，用于处理网络请求
popup.html: 弹出页面（可选）

二、manifest.json配置

首先，我们需要在manifest.json中添加webRequest和webRequestBlocking权限，并定义background脚本。

{
  "manifest_version": 3,
  "name": "Request Interceptor",
  "version": "1.0",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "storage",
    "<all_urls>"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": [
    "<all_urls>"
  ]
}

三、background.js实现请求拦截

在background.js中，我们使用chrome.webRequest.onBeforeRequest来拦截请求。通过requestBody可以获取到POST请求的数据。注意，由于Chrome的安全策略，我们需要在webRequest API中处理内容编码，确保正确获取中文字符。

1. 拦截POST请求

下面的代码示例展示了如何拦截POST请求并获取请求体中的数据：

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    if (details.method === "POST" && details.requestBody) {
      // 获取请求体
      const requestBody = details.requestBody;

      // 处理requestBody，获取raw内容
      let rawData = '';
      if (requestBody.raw) {
        // 使用TextDecoder解码
        const decoder = new TextDecoder('utf-8');
        rawData = decoder.decode(new Uint8Array(requestBody.raw[0].bytes));
      }

      console.log("Raw POST Data: ", rawData);

      // 进一步处理rawData，例如存储或发送到服务器
    }
  },
  { urls: ["<all_urls>"] },
  ["blocking", "requestBody"]
);

2. 处理中文乱码

在上述代码中，我们使用TextDecoder来解码原始字节流，确保中文字符不会出现乱码。TextDecoder支持多种编码格式，常用的包括utf-8和gbk，这里我们使用utf-8来处理请求数据。

四、示例

以下是完整的Chrome插件结构示例，展示了如何实现上述功能。

1. 目录结构

my-chrome-extension/
│
├── manifest.json
└── background.js

2. manifest.json

{
  "manifest_version": 3,
  "name": "Request Interceptor",
  "version": "1.0",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "storage",
    "<all_urls>"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": [
    "<all_urls>"
  ]
}

3. background.js

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    if (details.method === "POST" && details.requestBody) {
      // 获取请求体
      const requestBody = details.requestBody;

      // 处理requestBody，获取raw内容
      let rawData = '';
      if (requestBody.raw) {
        // 使用TextDecoder解码
        const decoder = new TextDecoder('utf-8');
        rawData = decoder.decode(new Uint8Array(requestBody.raw[0].bytes));
      }

      console.log("Raw POST Data: ", rawData);

      // 进一步处理rawData，例如存储或发送到服务器
    }
  },
  { urls: ["<all_urls>"] },
  ["blocking", "requestBody"]
);