如何基于Manifest V3开发Chrome扩展实现HTTP请求记录与本地持久化

架构老林

2026-9-27

问题解答

需求可行性

你的需求完全可以实现，不存在技术限制。

现有代码的核心问题

异步API时序错误：chrome.storage.local.get是异步接口，你调用后未等待回调执行就直接使用urls变量，此时变量还未被赋值为存储内的历史数据，始终是空数组。
存储键名不匹配：读取存储时指定的键是data，写入时用的键是urls，两者完全不对应，永远读不到历史存储的请求列表。
冗余逻辑冲突：你同时在background的回调和recordClick函数中执行存储更新操作，两个异步写操作会互相覆盖，导致数据丢失。
对Manifest V3的运行机制理解有误：MV3的background是Service Worker，没有持久的全局上下文，变量会随着Service Worker的回收重置，无法靠全局变量保存实时数据。

修正后的实现方案

第一步：manifest.json 必要配置

你需要在配置中声明对应权限：

{
  "manifest_version": 3,
  "name": "HTTP请求记录工具",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["webRequest", "storage"],
  "host_permissions": ["<all_urls>"] // 可以替换为你要监听的预定义主机
}

第二步：background.js 代码

用async/await处理异步逻辑，所有存储操作串行执行，避免时序问题：

// 监听请求
chrome.webRequest.onBeforeRequest.addListener(
  async (details) => {
    // 1. 先读取存储中的历史列表，默认给空数组兜底
    const storageRes = await chrome.storage.local.get('urls');
    const urlList = storageRes.urls || [];
    // 2. 追加新的请求数据
    urlList.push(details);
    // 3. 写回存储
    await chrome.storage.local.set({urls: urlList});
    console.log('当前记录条数：', urlList.length);
  },
  {urls: ["<all_urls>"]} // 替换为你的预定义主机规则
);