javascript - 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