Injection API

[JayPanoz]

This PR adds an Injection API so that resources can be passed to the Navigator in order to inject them in a given list of resources – regex is also an option.

For instance:

const injectables: IInjectablesConfig = {
          allowedDomains: [
            'fonts.googleapis.com',
            'fonts.gstatic.com'
          ],
          rules: [
            // In all XHTML files, inject a Google Font
            { 
              resources: [/\.xhtml$/], 
              injectables: [
                // Google Fonts preconnect 1
                {
                  type: 'link',
                  target: 'head',
                  insertion: 'prepend',
                  url: 'https://fonts.googleapis.com',
                  attributes: {
                    rel: 'preconnect'
                  }
                }
                // Google Fonts preconnect 2
                {
                  type: 'link',
                  target: 'head',
                  insertion: 'prepend',
                  url: 'https://fonts.gstatic.com',
                  attributes: {
                    rel: 'preconnect',
                    crossorigin: ''
                  }
                } 
                // Google Fonts stylesheet
                {
                  type: 'link',
                  target: 'head',
                  insertion: 'append',
                  url: 'https://fonts.googleapis.com/css2?family=Momo+Signature&display=swap',
                  attributes: {
                    rel: 'stylesheet'
                  }
                } 
                // Custom styles
                {
                  type: 'link',
                  target: 'head',
                  insertion: 'append',
                  attributes: {
                    rel: 'stylesheet',
                    type: 'text/css'
                  },
                  blob: new Blob([`
                    p {
                      font-family: "Momo Signature", "Rubik Storm", system-ui !important;
                      font-weight: 400 !important;
                      font-style: normal !important;
                    }
                  `], { type: 'text/css' })
                }
              ] 
            }
          ]
        }

At the moment, the API accepts either a Blob or a url. For CSP, a list of allowedDomains has to be passed to check whether url is valid and create a link/script to it. It does not accept a raw string.

An Injector class is taking care of applying rules, etc. Blobs URL are also shared and released when possible, so that they are not duplicated for each document.

More testing to do. Although no memory leaks have surfaced during the initial extensive testing, there is additional testing to do with more complex use cases such as significant scripts. I must also migrate the internal scripts and stylesheets we inject by default to the API.

Probably some improvements to make as well, as you need to be very explicit through attributes, etc.

So it’s time to open a draft PR so that issues can be caught early, and inputs/feedbacks collected for API improvements.