Is there a method of cache control over local resources used in an extension?

This question concerns part of an extension that has the user open a local HTML file which is just an empty container into which the extension sends the page HTML, JS, CSS. The user also previously provided the names of local resources–such as images, PDF, HTML, audio, video–stored in a directory in the same origin as the local HTML file, which permits the extension to load and display these files without further permisson. The names of the resource fies are stored in indexedDB but the physical files are on the local disk.

This part works. My question is is there a way to control how the local resources are cached, such that something similar to ‘Cache-Control: no-cache’ could be employed? The objective is to have the browser reload a local resource if the user altered it since it was last cached. Currently, if the user edited a resource without clearing the cache, the previous version is displayed. I’d like to make it such that the user doesn’t have to worry about this.

It appears that HTML meta tags under http-equiv are no longer valid for this purpose and likely would not have worked well anyway for the resource files. I don’t understand whether or not it is possible to add something to an HTTP header by intercepting and altering a web request since I don’t understand if any form of a request is made to load a local HTML page and inject code into it from the extension, and haen’t been able to get a listener to detect one for onBeforeRequest and up and don’t think it ever reaches the point at which the response header can be modified because there won’t be one.

Thank you.

UPDATE:

I must’ve been very confused about what takes place regarding the cache and local resources. I put this off for several months as I worked through other issues with this extension and, in coming back to it, was sure that the issue was that I had to use CTRL + R to get a ‘fresh’ load of a local resource if it had been edited; and clicking the refresh/reload button would not work. However, in testing this again now, that does not seem to be true. The local resources don’t appear to be placed in the cache at all; at least the options tab in the browser shows no data in the cache after loading local resources. A click of the refresh/reload button will lead to the edited resource being used.

However, I’d like the edited resource to be loaded if the user edits it and doesn’t reload the page. For example, if HTML containing a local resource is built in a document fragment and added to the page, and then the source is edited and that portion of the page is replaced with a newly built fragment, the browser should load the recently edited file.

Thank you.

That is a very hard problem. Not only to define what a file is that can change and change should somehow be reflected, but also how replacing the file works. Sure, for an image, CSS or HTML it seems fairly straight forward, but for JS it is everything but. This feature is known as “hot reloading” and it does exist for JS based projects too (in a web context usually with a bundler like webpack), however every time a resource changes the entire page is essentially reset, because the JS state can not be preserved. Else you’d always have to write migration handlers every time you save a file :wink:

Thank you for responding and for the information. This would only deal with images, audio, video, PDF, and HTML (in an iframe); and, if there’s not a reaonable solution for these specific file types, it’s not a significant negative.

Just out of curiosity, how are local files of these types handled by the browser? Are they placed in cache? It didn’t appear that they were but I don’t understand how the browser uses the ‘old’ version if not reloaded. For example, if an image with a source of a relative path to a local file is displayed and then programmatically removed from the DOM, after which that local file is replaced by another with the exact same name, and the image is programmatically appended to the DOM (by creating a new image element and assigning the same source path), the old version is still displayed. Where is that old version stored if not in the cache and no longer exists at the path on the local disk, that is, the file at that path is new?

Thank you.

To my understanding there is not just one cache, there are multiple caching layers and also multiple mechanisms for deciding the caching key that devides when a resource changed. The cache kayers aren’t all “on disk”, there is also in-RAM caching.

Thank you. I’ll have to attempt to investigate this much further because it raises a concern that I hadn’t thought of regarding the use of local files, apart from the user altering a file without reload. I didn’t know enough to even think of it.

If a large part of the extension involves retrieving data from indexedDB (previously provided by the user including the relative paths to local resources) and using it to build HTML that replaces various sections of the current page in order to display the data and local resources, will an increasing amount of RAM be consumed between reloads of the page?

The user can click through many such sections they previously ‘built’ which can load many local resources in a single session without a reload of the main page, similar to using XMLHttpRequest or fetch but from the local disk. Thus far, I have dealt only with small sections in building the tool and will have to perform a lot more testing in building larger projects and watching RAM. If removing the parent node that contains each set of these resources doesn’t release that memory, then that’ll be a significant problem and not one of hot reloading anymore but one similar to a memory leak.

As I write this I recall that I have used larger test projects in the past without issue but I used them as I continually modifed the JS, CSS, and HTML and reloaded the page with every change; thus, I would not have noticed an issue of consuming RAM during a long session without reload. I’ll have to determine where local resources are cached and, if in RAM, perhaps tell the browser that they can be garbage collected if that is possible.

I thought perhaps it was possible to fetch local resources under the same-origin when the HTML file is local but it doesn’t appear to be possible. I came across a web site that wrote an article stating it is possible but I think that is incorrect and and they do not provide a working example; so, I’m not going to even mention the site here. I thought this was an issue of using an extension API to manage the cache, but I assume it is now no longer an extension question. Thanks again.

UPDATE:

I haven’t been able to locate any cache area that has data in it while the files are being displayed and the security measures make options like fetch unavailable to local HTML pages. I think these types of local resources are stored in RAM because, after failing to come up with a solution that offers programmatic control of memory, I simply loaded, via a setInterval, 101 5MB images in turn and observed the RAM usage. I have an old machine that has 2GB of RAM and the OS consumes nearly half that. The RAM was 52% at the start and climbed to 62% when the images changed every 1/2 sec and 59% for a 1-second change interval. If the RAM doesn’t drop during the interval, it drops back to 52% about 10 seconds after the script completes. Thus, it appears that the resources are cached in RAM and are garbage collected.