How to inject html codes, chrome extensions

Question

i want to insert html codes using chrome extension. Adding complex HTML using a Chrome content script this link works but i need to insert more specific area. For example this links add html codes to top of codes but i need to insert in specific codes like

<html>
 <body>
 ...
 ...
 <div> 
  //codes
 </div>

  // i want my code goes here
  // <div>
  // </div>
 ...
 ...
 </body>
</html>

if im still can't explain myself, there is a chrome extension which name is "looper for youtube" this extension is doing what i need. Thanks for any helps, and sorry for my bad english

Jordan P · Accepted Answer · 2014-02-16T05:07:01.460

You have to write code in the content_script to specify where your HTML will be injected. For example, you could use the insertBefore function to insert HTML code before an existing element.

There are many functions surrounding the DOM tree which can help you specify the exact point in the document to insert new objects. Do not think about the HTML as a text file, think about it as a document tree (with parent nodes, child nodes, and ids). Here is a list of functions to get you started:

http://www.w3schools.com/jsref/dom_obj_all.asp

For example, something like:

document.getElementById('test').innerHTML = "HI!";

Will insert "HI!" inside the div tags in the following HTML:

<html>
<body>
<div id='test'>
</div>
</body>
</html>

If you require further assistance, please be more specific with your request. Where (exactly) do you need the HTML to be injected?

How to inject html codes, chrome extensions

1 Answers1