How to access ng object in chrome devtools content script

Question

I am trying to create a simple chrome extension to inspect an Angular 10 app where I am not able to access ng object in my content script.

content.js

const mouseUp = () => {
    console.log(' window', window?.ng); // prints undefined
    let selectedText = window.getSelection();
    console.log(selectedText);
};

window.addEventListener('mouseup', mouseUp);

background.js

console.log('From background js');

manifest.json

{
    "manifest_version": 2,
    "name": "Angular inspect extension",
    "description": "Angular inspect ",
    "version": "1.0.0",
    "permissions": [
        "tabs",
        "http://*/*",
        "https://*/*"
    ],
    "background": {
        "scripts": [
            "./background.js"
        ]
    },
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "content.js"
            ]
        }
    ]
}

But when I check the window object in an angular app's console I could see the required ng object.

So how can I access ng object in my content script so that I can pass that object to my devtools page and do further processing.

Note: I am aware that the content scripts are scoped and they cannot directly access dom properties of web page.

Any other possible way to achieve this with injecting a custom hook script in the content script??