Chrome extension content script with angular 10 IFrame

[Tom Lee]

Hi All,

I have a chrome extension which creates an IFrame for a couple of web pages. I am able to create the IFrame, but the IFrame is not displaying any content. I want to setup messaging between the parent doument and the IFrame. Has anybody done this before? 

This is my code to add the IFrame in the content script.

*************

var $j = jQuery.noConflict(true);

var iframeSource = chrome.extension.getURL('bootstrap/dist/bootstrap/index.html');

$j(document).ready(function() {

    // Create the iframe

    var iframe = document.createElement('iframe');

    iframe.setAttribute('src', iframeSource);

    iframe.setAttribute('id', the_iframe');

    iframe.style.width = 450 + 'px';

    iframe.style.height = 200 + 'px';

    document.body.appendChild(iframe);

});

****

I definitely create the Iframe and it shows my page with nothing displayed (debug image attached). 

I think I am missing something when loading Angular in an IFrame.

Any suggestions would be appreciated.

Thanks, Tom

[Tom Lee]

Okay, I go to the bottom of the problem, but I am not sure how to fix it.  

I removed the IFrame approach, and just tried to add the element to the document in the content script.

I am getting the error "tk-e.js:1 Uncaught TypeError: Cannot read property 'bind' of undefined"

With this extension I am using Jquery, and I do not know if that has something to do with this issue or not. SoI created a test extension without jquery, and my custom element inserts just fine.

Bottom line is I do not know how to fix this issue.

Any suggestions?