88

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.

Xan
  • 74,770
  • 16
  • 179
  • 206
Luke G
  • 1,741
  • 6
  • 23
  • 34

2 Answers2

153

References:

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

enter image description here

Sudarshan
  • 18,140
  • 7
  • 53
  • 61
  • Could someone elaborate on how to go from those two files --> to a local extension file --> to an installed extension? – Luke Sep 17 '14 at 15:59
  • @Luke use a template like this one : https://github.com/Ehesp/Chrome-Extension-Twitter-Bootstrap-3-Template – Sucrenoir Oct 09 '14 at 11:41
  • 6
    For developing I found the solution was to go to chrome://extensions, check the box for Developer mode, then Load unpacked extension, and select the directory that contains the files. – Luke Oct 10 '14 at 15:11
  • fyi, DOM is not HTML, if your intentions are to get some HTML from the web-server, and just before it is being parsed into DOM and shows in the browser, to edit it, this is the wrong answer to you.. keep Googling around... –  Mar 06 '15 at 13:04
  • How would we modify existing content on an HTML page? – Stevoisiak Jul 12 '18 at 19:36
11

@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:

255.tar.xz
  • 700
  • 7
  • 23