如何在MV2 Chrome扩展的阻塞式onBeforeSendHeaders webRequest钩子中访问扩展本地存储？

这个问题我之前做MV2扩展时也踩过坑，阻塞式的webRequest钩子确实没法用异步的chrome.storage.local.get，用window对象同步的方式确实不太靠谱，给你分享个稳定且合规的解决方案：

核心思路 #

把需要用到的本地存储数据提前加载到内存变量中，然后在阻塞钩子中直接访问这个内存变量，同时监听存储变化事件，实时同步内存变量和本地存储的数据，保证两者始终一致。

具体实现步骤 #

1. 初始化时加载数据到内存
   在扩展的后台脚本启动时，先异步获取本地存储里需要的数据，存到一个全局内存变量中：

// 后台脚本中定义全局变量，用来缓存存储数据
let cachedStorageValue = null;

// 脚本启动时加载初始数据
chrome.storage.local.get(['your_target_key'], (result) => {
  cachedStorageValue = result.your_target_key;
});

2. 监听存储变化，同步内存变量
   为了避免本地存储数据更新后，内存变量还是旧值，需要监听chrome.storage.onChanged事件，实时更新内存变量：

chrome.storage.onChanged.addListener((changes, areaName) => {
  // 只处理local存储中目标key的变化
  if (areaName === 'local' && changes.your_target_key) {
    cachedStorageValue = changes.your_target_key.newValue;
  }
});

3. 在阻塞钩子中直接访问内存变量
   现在在onBeforeSendHeaders的阻塞监听里，就可以直接使用这个内存变量了，完全同步，不会有异步等待的问题：

chrome.webRequest.onBeforeSendHeaders.addListener(
  (details) => {
    // 直接使用缓存的变量
    if (cachedStorageValue) {
      // 这里根据你的需求处理请求头，比如添加自定义头
      details.requestHeaders.push({
        name: 'X-Custom-Header',
        value: cachedStorageValue
      });
    }
    return {requestHeaders: details.requestHeaders};
  },
  {urls: ['<all_urls>']}, // 替换成你需要匹配的URL规则
  ['blocking', 'requestHeaders'] // 阻塞模式必须声明这两个权限
);

额外注意事项 #

• 如果你的后台脚本是Event Page（非持久化），每次脚本被唤醒时都要重新执行初始化加载的逻辑，避免内存变量为空；如果是持久化后台脚本（persistent: true），则只需初始化一次。
• 如果需要访问多个存储key，可以把内存变量改成一个对象，比如let storageCache = {}，初始化时获取多个key，监听变化时更新对应属性即可。

备注：内容来源于stack exchange，提问作者amiregelz