Accessing DOM data from browser console in Angular 15 (with __ngContext__ no longer storing it)

Question

I wrote a chrome extension to add some functionalities to a third-party website written in Angular. In order to read values (e.g. from textboxes), my javascript code would select the DOM item and read the ngContext property to extract the values:

function getSubmissionDataFromMemory() {
    var submission = undefined;
    document.querySelector("app-submission").__ngContext__.forEach(function(contextItem) {
        if (contextItem != undefined && contextItem[0]) {
            if (contextItem[0].nodeName == "APP-SUBMISSION") {
                return contextItem.forEach(function(nodeCtxItem) {
                    if (nodeCtxItem && nodeCtxItem.code != undefined) {
                        submission = nodeCtxItem;
                    }
                });
            }
        }
    });
    return submission;
}

With the migration to Angular 15, this code is no longer working as Angular is now only returning the ID of the LView in the ngContext property.

My question is: now that ngContext only returns the ID of the LView item, how and where can I access these LViews from my browser console?

• I tried looking into other window objects but could not immediately find where these would be stored

Answer 1

Did you try ng.getInjector(ng.getComponent(####) (where #### is the element corresponding to your component) ?

The injector contains the lView and the tNode.