chrome扩展程序(一) 拦截、修改网络请求

4,164 阅读2分钟

概述

API chrome.declarativeNetRequest 用于通过指定声明性规则来阻止或修改网络请求

权限

//manifest.json 
{
 "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestWithHostAccess",
    "declarativeNetRequestFeedback"
  ]
}

权限详细配置

要使用大多数Chrome API ,扩展程序必须在manifest.json的权限字段中声明其意图。扩展可以请求四类权限

  • permissions 包含来自已知字符串列表(例如"declarativeNetRequest")
  • optional_permissions 类似 optional_permissions 在运行时由扩展的用户授予,而不是提前授予
  • host_permissions 包含一个或多个匹配模式,这些模式可以访问一个或多个主机
  • optional_host_permissions 类似于 host_permissions 但在运行时由扩展的用户授予,而不是提前授予

配置规则,修改网络请求

下面来实现一个功能:访问baidu时的所有xhr请求中添加请求头myheader,值为:123456, 注意我们使用chrome扩展程序的v3版本,v2版本很多api已经弃用

manifest.json文件:

{
  "name": "拦截百度请求-chrome扩展",
  "version": "1.0.1",
  "manifest_version": 3,
  "description": "拦截百度请求-chrome扩展",
  "background": {
    "service_worker": "background.js"
  },

  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestWithHostAccess",
    "declarativeNetRequestFeedback"
  ],
  "host_permissions": ["https://www.baidu.com/*"]
}

background.js文件:


// 在扩展程序启动时添加初始规则
chrome.runtime.onInstalled.addListener(() => {
 //定义规则
  const initialRules = [
    {
      id: 2,
      priority: 2,
      action: {
        type: "modifyHeaders", // 参考:https://developer.chrome.com/docs/extensions/reference/declarativeNetRequest/#type-RuleActionType
        requestHeaders: [
          {
            header: "myheader",
            operation: "set",//还可以是 append remove 等
            value: "123456",
          },
        ],
      },
      condition: {
        urlFilter: "www.baidu.com",
        resourceTypes: ["xmlhttprequest"],
      },
    },
  ];
  chrome.declarativeNetRequest.getDynamicRules(function (res) {
    let rules = res.map((e) => e.id);
    chrome.declarativeNetRequest.updateDynamicRules(
      {
        addRules: initialRules, //Rule[] optional
        removeRuleIds: rules, //number[] optional
      },
      function (callback) {}
    );
  });
});

可以看到访问百度的时候,已经加了自定义请求头

image.png

注意

如果你网上查询到的教程是 用 chrome.webRequest

权限配置是这样:

{
  "name": "My Extension",
  "version": "1.0",
  "permissions": ["webRequest", "webRequestBlocking", "<all_urls>"],
  ...
}

这是v2版本的方式,在v3版本中要用 chrome.declarativeNetRequest

本例子中使用的是 chrome.declarativeNetRequest.getDynamicRules这个方法在js中动态添加规则,还有一种是使用json配置文件,配置静态规则,但不太灵活。

应用场景

通过以上方式可以添加,修改请求头信息,可以实现一些网站的自动登录功能,还可使用pc访问时,模拟移动设备

使用中遇到的问题 & 优化

上面提到的功能我是开发了一个自动登录扩展,但使用过程中遇到问题:每次都要重新安装扩展,才能实现自动登录,分析了一下应该是我把主程序放到了background.jschrome.runtime.onInstalled.addListener()函数中,所以通过该请求头实现的自动登录(基于http base 认证) 每次都要重新加载扩展程序。应该改成每次打开tab页的时候,都加载扩展程序,下面是优化:

//backgound.js
function Init() {
      ...这里是主程序
}
//每次打开tab页的时候判断是否加载自动登录脚本
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (
    changeInfo.url &&
    changeInfo.url.indexOf("http://www.xxx.com") != -1
  ) {
    Init();
  }
});


下一篇分享:

chrome扩展程序(二) 获取指定网站Cookie并存储