Support arbitary depth config overloading of DOM properties

Author: jonathanKingston

integration-test/test-pages/runtime-checks/config/script-overload.json

@@ -20,6 +20,10 @@
                     "document.cookie": {
                         "type": "string",
                         "value": "testingThisOut"
+                    },
+                    "navigator.mediaSession.playbackState": {
+                        "type": "string",
+                        "value": "playing"
                     }
                 }
             }

integration-test/test-pages/runtime-checks/pages/script-overload.html

@@ -24,6 +24,9 @@
                     n: navigator.userAgent,
                     w: window.navigator.userAgent,
                     g: globalThis.navigator.userAgent,
+                    pb: navigator.mediaSession.playbackState,
+                    wpb: window.navigator.mediaSession.playbackState,
+                    gpb: globalThis.navigator.mediaSession.playbackState,
                 }
             `;
             scriptElement.id = 'overloadedScript';
@@ -34,14 +37,22 @@
             const scripty = document.querySelector('script#overloadedScript');
             const nodeAndFakeNodeMatch = scripty === scriptElement;
             const expectedUserAgentOverload = 'testingThisOut';
+            const expectedPlaybackState = 'playing';
             // We shouldn't break out of the context we're overloading
             const doesntMatchParentContext = navigator.userAgent !== 'testingThisOut';
             return [
                 { name: 'hadInspectorNode', result: hadInspectorNode, expected: true },
                 { name: 'instanceof matches HTMLScriptElement', result: instanceofResult, expected: true },
                 { name: 'script ran', result: window.scriptyRan, expected: true },
                 { name: 'node and fake node match', result: nodeAndFakeNodeMatch, expected: false },
-                { name: 'user agent is overloaded', result: window.scriptOutput, expected: { n: expectedUserAgentOverload, w: expectedUserAgentOverload, g: expectedUserAgentOverload } },
+                { name: 'user agent is overloaded', result: window.scriptOutput, expected: {
+                    n: expectedUserAgentOverload,
+                    w: expectedUserAgentOverload,
+                    g: expectedUserAgentOverload,
+                    pb: expectedPlaybackState,
+                    wpb: expectedPlaybackState,
+                    gpb: expectedPlaybackState
+                } },
                 { name: 'user agent doesnt match parent context', result: doesntMatchParentContext, expected: true }
             ];
         });

src/features/runtime-checks.js

@@ -138,6 +138,11 @@ class DDGRuntimeChecks extends HTMLElement {
          * @returns {Proxy}
          */
         function constructProxy (scope, outputs) {
+            if (Object.is(scope)) {
+                // Should not happen, but just in case fail safely
+                console.error('Runtime checks: Scope must be an object', scope, outputs)
+                return scope
+            }
             return new Proxy(scope, {
                 get (target, property, receiver) {
                     const targetObj = target[property]
@@ -157,32 +162,55 @@ class DDGRuntimeChecks extends HTMLElement {
 
         let prepend = ''
         const aggregatedLookup = new Map()
+        let currentScope = null
         /* Convert the config into a map of scopePath -> { key: value } */
         for (const [key, value] of Object.entries(processedConfig)) {
             const path = key.split('.')
-            const scopePath = path.slice(0, -1).join('.')
+
+            currentScope = aggregatedLookup
             const pathOut = path[path.length - 1]
-            if (aggregatedLookup.has(scopePath)) {
-                aggregatedLookup.get(scopePath)[pathOut] = value
-            } else {
-                aggregatedLookup.set(scopePath, {
-                    [pathOut]: value
-                })
-            }
+            // Traverse the path and create the nested objects
+            path.slice(0, -1).forEach((pathPart, index) => {
+                if (!currentScope.has(pathPart)) {
+                    currentScope.set(pathPart, new Map())
+                }
+                currentScope = currentScope.get(pathPart)
+            })
+            currentScope.set(pathOut, value)
         }
 
-        for (const [key, value] of aggregatedLookup) {
-            const path = key.split('.')
-            if (path.length !== 1) {
-                console.error('Invalid config, currently only one layer depth is supported')
-                continue
+        /**
+         * Output scope variable definitions to arbitrary depth
+         */
+        function stringifyScope (scope, scopePath) {
+            let output = ''
+            for (const [key, value] of scope) {
+                const varOutName = [...scopePath, key].join('_')
+                if (value instanceof Map) {
+                    const keys = Array.from(value.keys())
+                    output += stringifyScope(value, [...scopePath, key])
+                    const proxyOut = keys.map((keyName) => `${keyName}: ${[...scopePath, key, keyName].join('_')}`)
+                    output += `
+                    let ${varOutName} = constructProxy(${scopePath.join('.')}.${key}, {${proxyOut.join(', ')}});
+                    `
+                    // If we're at the top level, we need to add the window and globalThis variables (Eg: let navigator = parentScope_navigator)
+                    if (scopePath.length === 1) {
+                        output += `
+                        let ${key} = ${varOutName};
+                        `
+                    }
+                } else {
+                    output += `
+                    let ${varOutName} = ${JSON.stringify(value)};
+                    `
+                }
             }
-            const scopeName = path[0]
-            prepend += `
-            let ${scopeName} = constructProxy(parentScope.${scopeName}, ${JSON.stringify(value)});
-            `
+            return output
         }
-        const keysOut = [...aggregatedLookup.keys()].join(',\n')
+
+        prepend += stringifyScope(aggregatedLookup, ['parentScope'])
+        // Stringify top level keys
+        const keysOut = [...aggregatedLookup.keys()].map((keyName) => `${keyName}: parentScope_${keyName}`).join(',\n')
         prepend += `
         const window = constructProxy(parentScope, {
             ${keysOut}