Chrome Extension - add a table element written in html to a page

Question

I'm writing a Chrome Extension and I want to be able to write a table element with html tags and add it programmatically to a page with a content script. I know how to add elements to page like:

var myTable = document.createElement("table");
document.getElementById("Container").appendChild(myTable);

I want to be able to write something like:

<table> blah blah </table>

and add this element to a page. If possible even have this element in its own file. (and I don't want it to be in a different frame because of reasons)

Why? Cause it's a lot neater to design an element like this. Thanks in advance!

Answer 1

You can use jQuery to do this. Create a manifest.json file and put inside something like below:

{
"manifest_version": 2,
"name": "PLUGIN_NAME",
"version": "1",
"content_scripts": [
{
    "matches": [
      "http://your.website.com/*"
    ],
    "js": ["jquery.js", "plugin.js"]
  }
]
}

Inside plugin.js under the same directory put something like below:

jQuery(document).ready(function() {
    var element = jQuery('#id-of-div')
    jQuery('<table><tr><td>HEY !</td></tr></table>').appendTo(element )
});

Then download jquery and put under the same dir.