Modify HTML of loaded pages using chrome extensions

Question

How can I add some HTML code to the loaded page if page's title contains specific text?

Chrome extensions are new grounds to me and your help would be greatly appreciated.

Answer 1

References:

• Content Scripts
• Manifest File

You can take the following code as a reference for adding some HTML Code.

manifest.json

This file registers content script to extension.

{ "name":"Inject DOM", "description":"http://stackoverflow.com/questions/14068879", "version":"1", "manifest_version":2, "content_scripts": [     {       "matches": ["http://www.google.co.in/*","https://www.google.co.in/*"],       "js": ["myscript.js"]     }   ] } 

myscript.js

A trivial script for adding a button to Google page

// Checking page title if (document.title.indexOf("Google") != -1) {     //Creating Elements     var btn = document.createElement("BUTTON")     var t = document.createTextNode("CLICK ME");     btn.appendChild(t);     //Appending to DOM      document.body.appendChild(btn); } 

Output

You see a button added to a desired page

Answer 2

@Sudarshan 's answer explains page specificity, Great, but what about the comments added? here's how to do what he missed in an easier more practical manner to modify existing content or to create content on an page the easiest method would be:

Modify

single item modification:

document.getElementById("Id").innerHtml = this.innerHtml + "<some code here>"; 

or to modify attributes:

document.getElementById("Id").class = "classname";  //or ->  document.getElementById("Id").style.color = "#a1b2c3"; 

for adding multiple lines of code do the following:

document.getElementById("Id").innerHtml = this.innerHtml + `  <some code here>                                                            <!-- Line 1 -->  and we're on multiple lines!` + "variables can be inserted too!" + `        <!-- Line 2 -->  <this code will be inserted directly **AS IS** into the DOM                 <!-- Line 3 --> ` ; 

• but now what about easy element insertation?

Create

large code injection (example from coding project done a while back) see insertAdjacentHtml API :

var bod = document.getElementsByTagName('body')[0];  bod.insertAdjacentHTML('afterbegin', `     <div class="Boingy" id="Boingy">         <div class="Boihead" id="BoiHead">             <div class="deXBox" id="deXBox">                 <div class="Tr-Bl_Button" style="height: 25px;width: 2px;margin-left: 11.65px;background-color: gray;transform: rotate(45deg);-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);Z-index: 1;">                     <div class="Tl-Br_Button" style="height: 25px;width: 2px;background-color: gray;transform: rotate(90deg);-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);Z-index: 2;">                         </div>                     </div>                 </div>             </div>             <embed id="IframeThingyA" src="` + "url" + `" type="text/html">             </embed>         </div>     `); 

references:

• insert - Adjacent - Html
• content specific code