Chrome 扩展 - 如何获取 HTTP 响应正文

Chrome

如何在 Chrome 扩展中获取 HTTP 响应正文？

在开发 Chrome 扩展时，有时我们需要获取浏览器的 HTTP 响应正文。这对于构建网络爬虫、网页分析工具或任何需要处理网页内容的应用程序来说都是非常有用的。本文将介绍如何在 Chrome 扩展中获取 HTTP 响应正文的方法，并提供一个案例代码来帮助理解。

步骤一：声明权限

首先，在扩展的清单文件（manifest.JSon）中声明所需的权限。在 "permissions" 部分添加 "webRequest" 和 "webRequestBlocking" 权限，如下所示：

JSon
{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "http://*/*",
    "https://*/*"
  ],
  "background": {
    "scripts": ["background.JS"],
    "persistent": false
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png"
    }
  }
}

步骤二：编写后台脚本

在后台脚本（background.JS）中，我们将使用 Chrome 的 webRequest API 来拦截网络请求，并获取响应的正文。首先，我们需要添加一个监听器来捕获请求和响应：

Javascript
Chrome.webRequest.onCompleted.addListener(
  function(detAIls) {
    // 在这里处理响应
  },
  {urls: ["<all_urls>"]},
  []
);

在监听器函数中，我们可以通过访问 detAIls.responseBody 属性来获取响应的正文。然而，该属性返回的是一个 ArrayBuffer 对象，需要进一步转换为字符串。我们可以使用 TextDecoder 对象来进行解码：

Javascript
Chrome.webRequest.onCompleted.addListener(
  function(detAIls) {
    if (detAIls.responseBody) {
      let decoder = new TextDecoder("utf-8");
      let responseText = decoder.decode(detAIls.responseBody);
      console.log(responseText);
    }
  },
  {urls: ["<all_urls>"]},
  []
);

步骤三：测试扩展

现在，我们可以加载这个扩展并测试它了。在 Chrome 地址栏中输入 Chrome://extensions/，然后打开开发者模式。点击 "加载已解压的扩展程序" 按钮，选择包含扩展文件的文件夹，并点击 "确定"。扩展图标将显示在 Chrome 工具栏中。

在浏览器中打开任何网页时，扩展会自动拦截网络请求，并将响应的正文打印到控制台中。你可以在控制台中查看响应的正文内容。

案例代码：

manifest.JSon：

JSon
{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "http://*/*",
    "https://*/*"
  ],
  "background": {
    "scripts": ["background.JS"],
    "persistent": false
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png"
    }
  }
}

background.JS：

Javascript
Chrome.webRequest.onCompleted.addListener(
  function(detAIls) {
    if (detAIls.responseBody) {
      let decoder = new TextDecoder("utf-8");
      let responseText = decoder.decode(detAIls.responseBody);
      console.log(responseText);
    }
  },
  {urls: ["<all_urls>"]},
  []
);

通过上述步骤，我们可以在 Chrome 扩展中获取 HTTP 响应正文，并进一步处理它。这对于开发基于网页内容的应用程序非常有用，例如爬取网页数据或进行网页分析。希望这篇文章能对你理解如何在 Chrome 扩展中获取 HTTP 响应正文有所帮助。