mimicking another HTML document through script

Suppose I have a tree of web resources, including images and style sheets, centered on a index page, index.html. I wish to create a new page, index.prime.html, which would appear exactly the same as index.html, by pointing to it, not statically duplicating its content, except with a few additional style rules added.

In principle, one method is to place script in index.prime.html that loads index.html using fetch() from the browser API, modifying the resulting document tree, and then finally applying the new tree to the current document root.

Unfortunately, I find two problems. First, whereas the solution needs to work with local files as well as remote, fetch() appears not to work in the same way as a static resource reference, which uses the same protocol, be it file:// or http://, as the source document. Instead fetch() is only able to obtain content through a genuine HTTP request. Second, ideally, the solution would be effective even if the two HTML files are not located in the same directory, whereas replacing the document tree would cause the browser to attempt to resolve the resources given by index.html relative to index.prime.html.

Required is an effective solution that is fully client-side, which works equally well for local content accessed through the file:// protocol as for static content served via http://. It would need to be independent of any external resources such as JavaScript libraries served centrally.