Chrome DevTools 扩展 - 在后台拦截网络答案

【问题标题】：Chrome DevTools Extension - Intercept network in backgroundChrome DevTools 扩展 - 在后台拦截网络
【发布时间】：2022-02-01 22:37:50
【问题描述】：

我正在开发一个使用chrome.devtools.network API 拦截网络请求的扩展。

扩展是用 React 编写的。

目前，拦截是在devTools面板上完成的，所以只有当用户输入我的扩展时才会开始拦截。

我可以将拦截逻辑移动到devTools，但我想知道如何将数据动态传递给面板，因此面板上的React组件将使用新数据进行更新并显示出来。

有什么建议吗？

【问题讨论】：

标签： google-chrome google-chrome-extension google-chrome-devtools

【解决方案1】：

我已经通过类似this 的方法解决了这个问题：

devTools.tsx：

chrome.devtools.panels.create('Apex Network', "", 'panel.html', function (extensionPanel) {
var _window; // Going to hold the reference to panel.html's `window`
let reqs = [];

const requestHandler = request => {
        reqs.push(request);
};

chrome.devtools.network.onRequestFinished.addListener(requestHandler)
extensionPanel.onShown.addListener(function tmp(panelWindow) {
    extensionPanel.onShown.removeListener(tmp); // Run once only
    chrome.devtools.network.onRequestFinished.removeListener(requestHandler)
    _window = panelWindow;
    _window.INITIAL_DATA = reqs;

})  })

面板.tsx

declare global {
interface Window { INITIAL_DATA: any; }
}
window.INITIAL_DATA = window.INITIAL_DATA || {};

const Panel = () => {

    const requestHandler = (request) => {...}

    useEffect(()=>{                                                               
    window.INITIAL_DATA?.forEach(requestHandler)
    window.INITIAL_DATA = [];
    chrome.devtools.network.onRequestFinished.addListener(requestHandler)
});
}

所以最后，它是这样做的：

当 devtools 打开时，devtools 会注册网络请求并将它们存储在一个数组中。
当 devtools 扩展打开时，devtools 取消注册网络请求并将请求传递到面板并且 devtools 停止捕获请求
面板处理在开发工具中捕获的请求
面板注册到网络请求

谢谢

【讨论】：