Why does chrome extension load an html template excluding it's head and body tags?

1
votes

I've ran into an extremely strange issue recently. My script(which is shown below) loads everything from an HTML template file just fine, except it excludes head and body tags and spits the entire content directly into <html> </html> tags. Here is the code which is run in the content-script:

// load new <html> and replace current <html> with it
$.get(chrome.extension.getURL('index.html'), function(data) {
    $('html').empty().append($.parseHTML(data));
});

I don't have the slightest clue about why is this happening. Any ideas about what might be causing this problem?

Google chrome screenshot

Updates:

I've tried to load head and body separately and.. it worked! Here is the updated code:

// load new <head> and replace current <head> with it
$.get(chrome.extension.getURL('head.html'), function(data) {
    $('head').empty().append($.parseHTML(data));
});

// load new <body> and replace current <body> with it
$.get(chrome.extension.getURL('body.html'), function(data) {
    $('body').empty().append($.parseHTML(data));
});

It would be better if it didn't work. Now I am even more confused. What difference does the new code make? Does JQuery have problems parsing head and body tags?

1
jquerygoogle-chromegoogle-chrome-extension

1 Answers

0
votes

I hope javascript gods will not get offended by what I'm going to say now. It seems like the problem with parsing <head> and <body> tags lurks down in the depths of JQuery code. I am not sure if it's a bug or not, but JQuery just ignores the mentioned tags along with the <html> tag also. *gasp*. Here is the code to illustrate this behavior:

console.log($.parseHTML('
  <html>
    <head>
      <link href="some.css">
    </head>
    <body>
      <p>nobody cares</p>
    </body>
  </html>
'));

The output of the above code is [link, p]