Javascript 如何仅阻止未使用chrome扩展缓存的图像？

我正在开发一个chrome扩展来保存数据，我需要阻止图像。使用WebRequestAPI可以很容易地做到这一点，并且可以正常工作。但是现在我想知道我是否可以阻止不在缓存中的图像，因为如果它们在缓存中，那么在数据使用方面不会有任何显著的差异，只是在用户看不到缓存中的图像带来的不便方面。是否有我可以取消阻止缓存的图像？

这里有一个想法：只有在缓存模式下，才使用chrome.webRequest将所有图像重定向到一个透明的1x1像素，同时通过

获取
检查缓存。如果成功，则恢复内容脚本中的原始URL

manifest.json：


权限
应包含
“
，
“webRequest”
，
“webRequestBlocking”
声明内容脚本和背景脚本

background.js（未经测试）：

const GIF_1x1='数据：image/GIF；base64，r0lgodlhaqabaaap///waaach5baaaaaaaaaaaaaaaaaaaaicraaaw=='；
常量获取选项={
缓存：'仅当缓存'，
模式：“同一来源”，
方法：'头'，
};
const isCached=新映射（）；
chrome.webRequest.onBeforeRequest.addListener（信息=>{
const{url}=info；
如果（！isCached.has（url））{
常量数据={url，urlHash:'#'+encodeURIComponent（url）}；
获取（url，获取选项）。然后（（）=>{
isCached.set（url，performance.now（））；
setTimeout（（）=>isCached.delete（url），1000）；
sendMessage（info.tabId，{cmd:'show'，data}，{frameId:info.frameId}）；
});
返回{redirectUrl:GIF_1x1+data.urlHash}；
}
}, {
类型：['image']，
网址：['']，
}，[“阻塞]）；

content.js（未经测试）：

chrome.runtime.onMessage.addListener（{cmd，data}）=>{
如果（cmd=='show'）{
for（document.querySelectorAll的常量（`img[src^=“data:”][src$=“${data.urlHash}”]`））{
el.src=data.url；
}
}
});

进一步的增强是从缓存相关的HTTP头计算持续时间，并在setTimeout中使用它，而不是在1000中