Provide clean way to inject data into replayed pages

Problem I am trying to solve

To make access into an archive more user friendly, I need to inject some CSS and JavaScript into the head of every page. The pywb documentation states that this can be done via the template head_insert.html however changing it isn't recommended. Use cases are similar to what was proposed via periphery.

Indeed head_insert.html contains wombat related code that I would like avoid to change or keep in sync with updated versions of pywb.

Solution I would like to see

I would be great to have a clean and approved way of injecting code into a replayed page. Perhaps with a separate optional template like html_head_inject.html and html_body_inject.html, ideally with the whole wbrequest and metadata objects available.

Alternatives I considered

Manually updating every collection that uses a customized header inject on every pywb update. 🫤

Additional context

I have to take care about lots of individual collections :smiley:

Hello again, colleagues and I were just thinking through this again. Most of periphery's functionality could be implemented via with existing pywb functionality as soon as

there is a new optional template per collection that, if present, would be injected into replay,
that new template would have access to the collection's metadata.yaml and wbrequest object,
that new template could use {{ include 'filename' }} where filename would be either looked up from the collection's or the deployment's templates folder.

It would be good to use for

annotating missing items, such as "video was not available at time of archiing" or "login function not available"
hide or make elements inactive that do not make sense in a web archive, such as input fields that trigger a server-side search service or banners prompting users to sign up for a service—this would greatly reduce user frustration
disable the ability to follow links to URLs not included in the web archive for a particular reason (for instance, links to other users' profiles in a social media archive that weren't captured for privacy reasons)

This is metadata that would be well placed in a collection's metadata.yaml file and be interpreted during replay by a template and client-side JavaScript. Yaml makes for a great format to be edited manually by curators (as this work needs to be done manually).

(This shouldn't be too hard to make work on fully client-side replay as well once we arrive at a meaningful structure. Periphery is a great starting point already.)

webrecorder / pywb