概述
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) {}
);
});
});
可以看到访问百度的时候,已经加了自定义请求头
注意
如果你网上查询到的教程是 用 chrome.webRequest
权限配置是这样:
{
"name": "My Extension",
"version": "1.0",
"permissions": ["webRequest", "webRequestBlocking", "<all_urls>"],
...
}
这是v2版本的方式,在v3版本中要用 chrome.declarativeNetRequest
本例子中使用的是 chrome.declarativeNetRequest.getDynamicRules
这个方法在js中动态添加规则,还有一种是使用json配置文件,配置静态规则,但不太灵活。
应用场景
通过以上方式可以添加,修改请求头信息,可以实现一些网站的自动登录功能,还可使用pc访问时,模拟移动设备
使用中遇到的问题 & 优化
上面提到的功能我是开发了一个自动登录扩展,但使用过程中遇到问题:每次都要重新安装扩展,才能实现自动登录,分析了一下应该是我把主程序放到了background.js
中 chrome.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();
}
});