How to inject into a html another html along with it css file using the content scripts?

Question

I'm completely confused how to inject an entire html to another html using content scripts in chrome extension.

I'm currently doing

document.body.innerHTML += 'html';

But that only helps when injecting some minor html code, and not an entire html file, which has its own css and js files.

How do I achieve this?

General solution: use iframes. NEVER use document.body.innerHTML += '..';, because it will break almost every dynamic site on the internet... — Rob W
– Rob W, Commented Nov 29, 2013 at 21:15
@RobW When I saw the code used by Pocket, it was injecting code into the html div, rather than an iFrame. — Hick
– Hick, Commented Nov 29, 2013 at 21:25
@RobW I am taking the Pocket example, as that is something that I want to achieve and a bit more. — Hick
– Hick, Commented Nov 29, 2013 at 21:26
.innerHTML += will remove all event listeners and invalidate any previous element references. It should only be used on content you "own". <body> elements in arbitrary web pages do certainly not meet that criterium. — Rob W
– Rob W, Commented Nov 29, 2013 at 21:28

Dave Alperovich · Accepted Answer · 2013-11-30 06:36:25Z

1

If you have been trying something similar to loading one html file into another, then the JQuery load() method might help:

$( "#mydiv" ).load( "thepageIwannaload.html" );

You can simply create the html you want to load as a separate html file and load it into your file.

edited Nov 30, 2013 at 6:36

Dave Alperovich

32.6k8 gold badges82 silver badges101 bronze badges

answered Nov 30, 2013 at 6:19

Developer.me

513 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Theo Anderson · Accepted Answer · 2013-11-29 21:27:15Z

If I understand correctly, have you tried some ajax? something along the lines of...

var xmlRequestObject;
if (window.XMLHttpRequest)
{
xmlRequestObject=new XMLHttpRequest();
}

xmlRequestObject.onreadystatechange=function()
{
if (xmlRequestObject.readyState==4 && xmlRequestObject.status==200)
{
document.getElementById("elementID").innerHTML=xmlRequestObject.responseText;
}
}

xmlRequestObject.open("GET","document.html",true);

xmlRequestObject.send();

this ajax would work for the main browsers and substitute the arguements for the correct ones obviously. Hope I understood your question correctly.

Collectives™ on Stack Overflow

How to inject into a html another html along with it css file using the content scripts?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related