Modify HTML of loaded pages using chrome extension

问题:

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.

回答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

回答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