Angular 10 - Chrome Extension content script (in IFrame)

angular
1

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’);
iframe.style.width = 450 + ‘px’;
iframe.style.height = 200 + ‘px’;
document.body.appendChild(iframe);
});

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

image

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.

Thanks,
Tom