Angular 10 - Chrome Extension content script (in IFrame)

Hi All,
I have a chrome extension where I want to embed my angular application in an IFrame. So we navigate to specific sites, and we add the IFrame into content of the document. Like the following…

var $j = jQuery.noConflict(true);
var iframeSource = chrome.extension.getURL(‘coolcomponent/dist/coolcomponent/index.html’);

$j(document).ready(function() {
// Create the iframe
var iframe = document.createElement(‘iframe’);
iframe.setAttribute(‘src’, iframeSource);
iframe.setAttribute(‘id’, ‘my_iframe’); = 450 + ‘px’; = 200 + ‘px’;

So we embed the angular app into the dcoument, but the content of my component is not displaying.This is my index.html.


The “P” tag content displays perfectly, but the content of app-root does not display.

I have tried all kinds of experiments,but the content does not display. Everything works wonderful if I run the application with “ng serve”.

I am obviously missing something here. I saw this artical with Angular running in the background of the Chrome Extension.

Any suggestions would be greatly appreciated.