开发一个chrome插件修改响应数据，同步修改network面板的响应值

Question

我们接口的响应数据是加密的，每次查看很不方便，想开发一个插件。

1，在请求接口数据返回后，进行解密，并且覆盖network（网络面板的加密数据）

Answer 1

好的，这是一个比较实用且高效的插件功能。我可以为您提供以下步骤：

1. 首先，您需要编写一个chrome插件的框架，并且注册一个chrome.webRequest.onCompleted事件监听器。

2. 在事件监听器中，您需要获取到这次请求的响应数据，进行解密处理，并覆盖network面板的响应值。

下面是实现的代码：

manifest.json文件

{
    "name": "响应数据解密插件",
    "version": "1.0",
    "manifest_version": 2,
    "description": "解密加密的响应数据，同步修改network面板的响应值",
    "permissions": [
        "webRequest",
        "webRequestBlocking",
        "<all_urls>",
        "tabs"
    ],
    "background": {
        "scripts": ["background.js"]
    }
}

background.js文件

chrome.webRequest.onCompleted.addListener(
    function(details) {
        // 判断是否为Ajax请求
        if(details.tabId == -1){ 
            // 解密接口响应数据
            var responseData = decryptResponse(details.responseBody);
            // 将解密后的数据覆盖network面板的响应值
            chrome.devtools.network.getHAR(function(harLog){
                harLog.entries.forEach(function(entry) {
                    if (entry.request.url == details.url) {
                        entry.response.content.text = responseData;
                    }
                });
                chrome.devtools.network.show(harLog);
            });
            // 将解密后的数据返回给接口
            return {responseBody: responseData};
        }
    },
    {urls: ["<all_urls>"]},
    ["responseHeaders", "extraHeaders"]
);

function decryptResponse(responseBody) {
    return responseBody; // 在这里编写解密接口响应数据的代码
}

这样，当您使用chrome浏览器打开一个网页并发起Ajax请求时，插件便会自动解密响应数据，同步修改network面板的响应值。