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

Question

我正在开发一个使用 chrome.devtools.network API.

拦截网络请求的扩展

扩展是用 React 编写的。

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

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

有什么建议吗？

Answer 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;

})  })

Panel.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 停止捕获请求
面板处理在 devtools 捕获的请求
面板注册到网络请求

谢谢

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

Chrome DevTools Extension - Intercept network in background

google-chrome

google-chrome-extension

google-chrome-devtools