使用chrome.devtools.network API遇TypeError，求邮件附件捕获方案

为什么会报错？ #

chrome.devtools.network API只能在DevTools专属页面中运行，你把它放到了Service Worker（background.js）里，而Service Worker环境中不存在chrome.devtools对象，所以会抛出Cannot read properties of undefined (reading 'network')错误。

正确使用DevTools API捕获附件上传 #

步骤1：修正manifest配置 #

单独创建DevTools页面，不能复用background.js。修改后的manifest.json如下：

{
    "manifest_version": 3,
    "permissions": ["activeTab", "tabs", "storage"],
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
          "matches": ["<all_urls>"],
          "js": ["content.js"]
        }
    ],
    "action": {
        "default_popup": "index.html"
    },
    "devtools_page": "devtools.html" // 改为单独的DevTools页面
}

步骤2：创建DevTools页面文件 #

创建devtools.html：

<!DOCTYPE html>
<html>
<body>
  <script src="devtools.js"></script>
</body>
</html>

创建devtools.js，在这里使用chrome.devtools.network API：

// 监听网络请求完成事件
chrome.devtools.network.onRequestFinished.addListener(request => {
    // 判断是否是附件上传请求（根据请求URL、method、Content-Type等标识）
    const isAttachmentUpload = request.request.method === 'POST' && 
                              request.request.headers.some(h => 
                                  h.name.toLowerCase() === 'content-type' && 
                                  h.value.includes('multipart/form-data')
                              );

    if (isAttachmentUpload) {
        // 获取请求原始内容
        request.getContent((content, encoding) => {
            console.log('附件上传原始数据:', content);
            // 这里可以处理或存储捕获到的附件数据
        });
    }
});

替代方案：使用webRequest API（无需打开DevTools） #

如果你希望扩展在后台自动捕获上传请求，不需要依赖DevTools开启，可以用chrome.webRequest API（Manifest V3支持）：

步骤1：更新manifest权限 #

添加webRequest、webRequestBlocking权限，以及目标邮件网站的主机权限（比如*://mail.google.com/*）：

{
    "manifest_version": 3,
    "permissions": ["activeTab", "tabs", "storage", "webRequest", "webRequestBlocking"],
    "host_permissions": ["*://mail.google.com/*", "*://outlook.live.com/*"], // 按需添加邮件网站域名
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
          "matches": ["<all_urls>"],
          "js": ["content.js"]
        }
    ],
    "action": {
        "default_popup": "index.html"
    }
}

步骤2：在background.js中实现监听 #

// 监听请求发送前的事件，捕获上传数据
chrome.webRequest.onBeforeRequest.addListener(
    details => {
        // 判断是否是附件上传请求
        const isAttachmentUpload = details.method === 'POST' && 
                                  details.requestHeaders?.some(h => 
                                      h.name.toLowerCase() === 'content-type' && 
                                      h.value.includes('multipart/form-data')
                                  );

        if (isAttachmentUpload && details.requestBody) {
            // 处理请求体中的表单数据（包含附件）
            console.log('上传请求体:', details.requestBody);
            // 注意：如果附件是二进制数据，details.requestBody.raw会包含对应的Blob数据
        }
    },
    { urls: ["*://mail.google.com/*", "*://outlook.live.com/*"] }, // 匹配目标网站
    ["requestBody", "requestHeaders"] // 需要获取的请求信息
);

注意事项 #

• 使用DevTools API时，必须打开Chrome开发者工具才能触发监听；
• webRequest API可以在后台静默运行，但需要明确声明host_permissions，且无法直接获取完整的二进制附件内容（如需获取，可能需要结合chrome.debugger API，但复杂度更高）。

内容的提问来源于stack exchange，提问作者Yogev