JS Injection Hack Usefuls (JavaScript)

nminchin · March 27, 2026, 6:43am

I thought I’d create a wiki topic to post useful JS “hacks”. It’d be good to include methods using the Markdown component as well as Ben Musson’s Periscope module’s system.perspective.runJavaScript* methods, but either or is ok initially and others can update your wiki reply later.

What I had in mind was to have posts include the JSON for the Markdown component that includes the JS script within it, so that all you need to do is copy the JSON and paste it into your View.

E.g.

Example Markdown JSON

[
  {
    "type": "ia.display.markdown",
    "version": 0,
    "props": {
      "style": {
        "position": "absolute"
      },
      "markdown": {
        "escapeHtml": false
      }
    },
    "meta": {
      "name": "JSInject_PowerChart_XTraceTagColours"
    },
    "position": {
      "shrink": 0,
      "basis": 0
    },
    "custom": {
      "inlineJavascript": "(function() {\n            function getPenColours() {\n                const map = {};\n                document.querySelectorAll('svg.pen-visibility-checkbox[data-pen-name]').forEach(svg => {\n                    const name = svg.getAttribute('data-pen-name');\n                    const fill = svg.style.fill;\n                    if (name && fill) map[name] = fill;\n                });\n                return map;\n            }\n\n            function colourXTraceLabels() {\n                const penColours = getPenColours();\n                document.querySelectorAll('.ia_powerChartComponent__xTrace__box__label').forEach(textEl => {\n                    const boldSpan = textEl.querySelector('tspan[style*=&quot;font-weight&quot;]');\n                    if (!boldSpan) return;\n                    const penName = boldSpan.textContent.replace(/:\\s*$/, '').trim();\n                    if (penColours[penName]) {\n                        textEl.style.fill = penColours[penName];\n                    }\n                });\n            }\n\n            if (window._xTraceObserver) window._xTraceObserver.disconnect();\n\n            window._xTraceObserver = new MutationObserver((mutations) => {\n                for (const mutation of mutations) {\n                    const hasXTrace = [...mutation.addedNodes].some(node =>\n                        node.nodeType === 1 && (\n                            node.classList?.contains('ia_timeMarker') ||\n                            node.querySelector?.('.ia_timeMarker')\n                        )\n                    );\n                    const isInsideXTrace = mutation.target.closest?.(\n                        '.ia_timeMarker, .ia_powerChartComponent__xTrace__box'\n                    );\n                    if (hasXTrace || isInsideXTrace) {\n                        colourXTraceLabels();\n                        break;\n                    }\n                }\n            });\n\n            window._xTraceObserver.observe(document.body, {\n                childList: true,\n                subtree: true,\n                characterData: true,\n            });\n\n            colourXTraceLabels();\n        })();"
    },
    "propConfig": {
      "props.source": {
        "binding": {
          "config": {
            "struct": {
              "script": "{this.custom.inlineJavascript}"
            },
            "waitOnAll": true
          },
          "transforms": [
            {
              "code": "#\tcode =  \"<img style='display:none' src='/favicon.ico' onload=\\\"\" + value.script.replace('\"', '&quot;') + '\\\"></img>'\n#\t\n#\tcode = code.replace(\"\\n\", \"\").replace(\"\\t\", \"\").replace(\"\\n\", \"\").replace(\"\\r\", \"\").replace(\"\\r\", \"\").replace(\"  \", \" \").replace(\"  \", \" \").replace(\"  \", \" \").replace(\"  \", \" \")\n#\t\n#\treturn code\n\tscript = value.script\n\tscript = script.replace('\"', '&quot;')\n\tscript = script.replace('\\n', '').replace('\\t', '').replace('\\r', '')\n\t\n\t# Collapse multiple spaces - repeat until stable\n\twhile '  ' in script:\n\t    script = script.replace('  ', ' ')\n\t\n\tcode = '<img style=\"display:none\" src=\"/favicon.ico\" onload=\"{}\"></img>'.format(script)\n\treturn code",
              "type": "script"
            }
          ],
          "type": "expr-struct"
        }
      }
    }
  }
]

This is the template that I use myself for Markdown JS hacking, and I just edit the custom.inlineJavaScript prop value with the JS script.
You need to make sure that the JS script is valid for inserting into a dummy DOM element’s onLoad script.

Please include a screenshot and a brief description of what the code does.

Please make sure to change your post to a wiki after posting so that others can edit if needed.

Feature Title

This is a description of the feature.

This is a screenshot of what the feature does.

Instructions

Copy and paste into a View...

Resources

Markdown Version

Periscope Version (N/A yet)

nminchin · March 27, 2026, 6:54am

Power Chart - Set X-Trace tag labels to their pen colour

This will set the tag labels and values shown in all x-trace panels to the colour of their chart pens. The script (dodgilly?) grabs the colours from the legend key at the bottom.

I haven’t tested if this works when the legend is collapsed into the smaller version

Instructions

Copy and paste into a View with a Power Chart and your operators will no longer become frustrated trying to eyeball x-trace tags with their corresponding pens on the chart.

Resources

Markdown Version

[
  {
    "type": "ia.display.markdown",
    "version": 0,
    "props": {
      "style": {
        "position": "absolute"
      },
      "markdown": {
        "escapeHtml": false
      }
    },
    "meta": {
      "name": "JSInject_PowerChart_XTraceTagColours"
    },
    "position": {
      "shrink": 0,
      "basis": 0
    },
    "custom": {
      "inlineJavascript": "(function() {\n            function getPenColours() {\n                const map = {};\n                document.querySelectorAll('svg.pen-visibility-checkbox[data-pen-name]').forEach(svg => {\n                    const name = svg.getAttribute('data-pen-name');\n                    const fill = svg.style.fill;\n                    if (name && fill) map[name] = fill;\n                });\n                return map;\n            }\n\n            function colourXTraceLabels() {\n                const penColours = getPenColours();\n                document.querySelectorAll('.ia_powerChartComponent__xTrace__box__label').forEach(textEl => {\n                    const boldSpan = textEl.querySelector('tspan[style*=&quot;font-weight&quot;]');\n                    if (!boldSpan) return;\n                    const penName = boldSpan.textContent.replace(/:\\s*$/, '').trim();\n                    if (penColours[penName]) {\n                        textEl.style.fill = penColours[penName];\n                    }\n                });\n            }\n\n            if (window._xTraceObserver) window._xTraceObserver.disconnect();\n\n            window._xTraceObserver = new MutationObserver((mutations) => {\n                for (const mutation of mutations) {\n                    const hasXTrace = [...mutation.addedNodes].some(node =>\n                        node.nodeType === 1 && (\n                            node.classList?.contains('ia_timeMarker') ||\n                            node.querySelector?.('.ia_timeMarker')\n                        )\n                    );\n                    const isInsideXTrace = mutation.target.closest?.(\n                        '.ia_timeMarker, .ia_powerChartComponent__xTrace__box'\n                    );\n                    if (hasXTrace || isInsideXTrace) {\n                        colourXTraceLabels();\n                        break;\n                    }\n                }\n            });\n\n            window._xTraceObserver.observe(document.body, {\n                childList: true,\n                subtree: true,\n                characterData: true,\n            });\n\n            colourXTraceLabels();\n        })();"
    },
    "propConfig": {
      "props.source": {
        "binding": {
          "config": {
            "struct": {
              "script": "{this.custom.inlineJavascript}"
            },
            "waitOnAll": true
          },
          "transforms": [
            {
              "code": "#\tcode =  \"<img style='display:none' src='/favicon.ico' onload=\\\"\" + value.script.replace('\"', '&quot;') + '\\\"></img>'\n#\t\n#\tcode = code.replace(\"\\n\", \"\").replace(\"\\t\", \"\").replace(\"\\n\", \"\").replace(\"\\r\", \"\").replace(\"\\r\", \"\").replace(\"  \", \" \").replace(\"  \", \" \").replace(\"  \", \" \").replace(\"  \", \" \")\n#\t\n#\treturn code\n\tscript = value.script\n\tscript = script.replace('\"', '&quot;')\n\tscript = script.replace('\\n', '').replace('\\t', '').replace('\\r', '')\n\t\n\t# Collapse multiple spaces - repeat until stable\n\twhile '  ' in script:\n\t    script = script.replace('  ', ' ')\n\t\n\tcode = '<img style=\"display:none\" src=\"/favicon.ico\" onload=\"{}\"></img>'.format(script)\n\treturn code",
              "type": "script"
            }
          ],
          "type": "expr-struct"
        }
      }
    }
  }
]

Periscope Version (N/A yet)

nminchin · March 27, 2026, 9:21am

Accordian - Allow smooth scrolling to items based on item index

This allows you to scroll an Accordian component to show a specific item, given an item index and the Accordian’s domId.

Instructions

Copy the JSON below and paste it into your View with the Accordian.
To your accordian component, add the meta.domId key and set it to something unique like “Accordian”
Inside the “JSInject_Accordian_ScrollToIndex” component, set the “accordianDomId” to what you set it to. Then you can scroll to a specific item index by setting the custom.index to the index number. You can bind to this or set its value via script

Resources

Markdown Version (Includes 2x Markdown components)

This contains 2x Markdown components:

“JSInject_Accordian_ScrollToIndexBase” injects the JS function scrollToAccordionItem
“JSInject_Accordian_ScrollToIndex” calls the function with the domID of the accordian to scroll, and the index to scroll to, based on custom props on the component.

[
  {
    "type": "ia.display.markdown",
    "version": 0,
    "props": {
      "style": {
        "position": "absolute"
      },
      "markdown": {
        "escapeHtml": false
      }
    },
    "meta": {
      "name": "JSInject_Accordian_ScrollToIndexBase"
    },
    "position": {
      "shrink": 0,
      "basis": 0
    },
    "custom": {
      "inlineJavascript": "window.scrollToAccordionItem = function(id, index) {\n            const accordion = document.querySelector('#' + id + '.ia_accordionComponent');\n            if (!accordion) {\n                console.warn('Accordion component not found for id: ' + id);\n                return;\n            }\n\n            const wrapper = accordion.querySelector('.ia_accordionComponent__wrapper');\n            const header = wrapper.querySelector('.ia_accordionComponent__header[data-index=&quot;' + index + '&quot;]');\n\n            if (!header) {\n                console.warn('Accordion item with index ' + index + ' not found.');\n                return;\n            }\n\n            const accordionTop = accordion.getBoundingClientRect().top;\n            const headerTop = header.getBoundingClientRect().top;\n            const offset = headerTop - accordionTop;\n\n            accordion.scrollTo({\n                top: accordion.scrollTop + offset,\n                behavior: 'smooth'\n            });\n        };"
    },
    "propConfig": {
      "custom.inlineJavascript": {
        "access": "PRIVATE"
      },
      "props.source": {
        "binding": {
          "config": {
            "struct": {
              "script": "{this.custom.inlineJavascript}"
            },
            "waitOnAll": true
          },
          "transforms": [
            {
              "code": "#\tcode =  \"<img style='display:none' src='/favicon.ico' onload=\\\"\" + value.script.replace('\"', '&quot;') + '\\\"></img>'\n#\t\n#\tcode = code.replace(\"\\n\", \"\").replace(\"\\t\", \"\").replace(\"\\n\", \"\").replace(\"\\r\", \"\").replace(\"\\r\", \"\").replace(\"  \", \" \").replace(\"  \", \" \").replace(\"  \", \" \").replace(\"  \", \" \")\n#\t\n#\treturn code\n\tscript = value.script\n\tscript = script.replace('\"', '&quot;')\n\tscript = script.replace('\\n', '').replace('\\t', '').replace('\\r', '')\n\t\n\t# Collapse multiple spaces - repeat until stable\n\twhile '  ' in script:\n\t    script = script.replace('  ', ' ')\n\t\n\tcode = '<img style=\"display:none\" src=\"/favicon.ico\" onload=\"{}\"></img>'.format(script)\n\treturn code",
              "type": "script"
            }
          ],
          "type": "expr-struct"
        }
      }
    }
  },
  {
    "type": "ia.display.markdown",
    "version": 0,
    "props": {
      "style": {
        "position": "absolute"
      },
      "markdown": {
        "escapeHtml": false
      }
    },
    "meta": {
      "name": "JSInject_Accordian_ScrollToIndex"
    },
    "position": {
      "shrink": 0,
      "basis": 0
    },
    "custom": {
      "accordianDomId": "ME",
      "index": 3
    },
    "propConfig": {
      "custom.accordianDomId": {
        "access": "PRIVATE"
      },
      "custom.index": {
        "access": "PRIVATE"
      },
      "custom.inlineJavascript": {
        "binding": {
          "config": {
            "expression": "if({this.custom.index} != \"\"\r\n\t,\"(function() {scrollToAccordionItem('\" + {this.custom.accordianDomId} + \"',  \" + {this.custom.index} + \");})();\"\r\n \t,\"\"\r\n)"
          },
          "type": "expr"
        },
        "access": "PRIVATE"
      },
      "props.source": {
        "binding": {
          "config": {
            "struct": {
              "script": "{this.custom.inlineJavascript}"
            },
            "waitOnAll": true
          },
          "transforms": [
            {
              "code": "#\tcode =  \"<img style='display:none' src='/favicon.ico' onload=\\\"\" + value.script.replace('\"', '&quot;') + '\\\"></img>'\n#\t\n#\tcode = code.replace(\"\\n\", \"\").replace(\"\\t\", \"\").replace(\"\\n\", \"\").replace(\"\\r\", \"\").replace(\"\\r\", \"\").replace(\"  \", \" \").replace(\"  \", \" \").replace(\"  \", \" \").replace(\"  \", \" \")\n#\t\n#\treturn code\n\tscript = value.script\n\tscript = script.replace('\"', '&quot;')\n\tscript = script.replace('\\n', '').replace('\\t', '').replace('\\r', '')\n\t\n\t# Collapse multiple spaces - repeat until stable\n\twhile '  ' in script:\n\t    script = script.replace('  ', ' ')\n\t\n\tcode = '<img style=\"display:none\" src=\"/favicon.ico\" onload=\"{}\"></img>'.format(script)\n\treturn code",
              "type": "script"
            }
          ],
          "type": "expr-struct"
        }
      }
    }
  }
]

Periscope Version (N/A yet)

travisaggiebrown · April 6, 2026, 8:04pm

I thought I would add this despite it not being an injection since it can be helpful even when trying to inspect data through window.__client.page.views._data (although you can change this path in the code if needed).

This utility attempts to find the shortest path, within a fixed time limit (currently hard‑coded to 40 seconds), to a target key, value, or prototype property, depending on how it is called.

Because the search space can be large and complex, the function may return multiple possible paths. Some of these paths may be React-related internals or may not actually point to the value you’re interested in, so you’ll need to manually choose the correct one from the results.

How It Works

The script walks through objects starting from window.__client.page.views._data.
It searches breadth‑first to find the shortest reachable paths.
Depending on the selected search type, it checks:
- Object keys
- Object values
- Prototype properties
The search stops when:
- A maximum number of results is reached (set to 10 in while statement), or
- The time limit expires

How to Use It

Open Inspect Element in your browser.
Go to the Sources tab.
Create a new JavaScript Snippet.
Paste the script into the snippet and save it.
Run the snippet so the function becomes available.

After that, you can call it directly from the browser console using findPath(arg1,arg2):

The first argument: the key, value, or prototype property you’re searching for.
The second argument: the search type (key, value, proto, or all).
an example would be something like findPath('virtualized','key').

Notes

The function returns several candidate paths; not all of them will necessarily be useful.
Some results may point to React internals or unrelated references.
This was written quickly, so while it should work, there may be minor edge cases or errors that were missed.

function findPath(target, searchType = 'all')
{ // 'key', 'value', 'proto', 'all'
const results = [];
const visited = new WeakSet();
const queue = [];
const startTime = Date.now();
const MAX_TIME = 40000;
const dataMap = window.__client?.page?.views?._data;
if (!dataMap) return console.error("Perspective client not found.");

dataMap.forEach((view, id) => {
    queue.push({ obj: view, path: `window.__client.page.views._data.get('${id}')` });
});

console.log(`Searching for ${searchType}: "${target}"...`);

while (queue.length > 0 && results.length < 10) {
    if (Date.now() - startTime > MAX_TIME) break;
    const { obj, path } = queue.shift();

    if (!obj || typeof obj !== 'object' || visited.has(obj)) continue;
    visited.add(obj);

    try {
        // 1. CHECK THE PROTOTYPE (The "Class" level)
        if (searchType === 'proto' || searchType === 'all') {
            const proto = Object.getPrototypeOf(obj);
            if (proto && proto.hasOwnProperty(target)) {
                console.log(`%c PROTO MATCH: "${target}" exists on ${path} prototype`, "color: #9C27B0; font-weight: bold;");
                results.push({ path: `${path}.__proto__['${target}']`, type: 'proto' });
            }
        }

        // 2. CHECK KEYS AND VALUES (The "Instance" level)
        for (const key in obj) {
            const val = obj[key];
            const currentPath = `${path}['${key}']`;

            if ((searchType === 'key' || searchType === 'all') && key === target) {
                console.log(`%c KEY MATCH: ${currentPath}`, "color: #2196F3; font-weight: bold;");
                results.push({ path: currentPath, type: 'key' });
            }
            
            if ((searchType === 'value' || searchType === 'all') && val === target) {
                console.log(`%c VAL MATCH: ${currentPath}`, "color: #4CAF50; font-weight: bold;");
                results.push({ path: currentPath, type: 'value' });
            }

            if (val && typeof val === 'object') {
                queue.push({ obj: val, path: currentPath });
            }
        }
    } catch (e) {}
}
return results;
}

if any edits need to be made, please let me know.

JS Injection Hack Usefuls (JavaScript)

Contents

Accordian

Power Chart

Feature Title

Instructions

Resources

Power Chart - Set X-Trace tag labels to their pen colour

Instructions

Resources

Accordian - Allow smooth scrolling to items based on item index

Instructions

Resources