Змінюйте HTML завантажених сторінок за допомогою розширень Chrome

Як я можу додати трохи HTML-коду на завантажену сторінку, якщо заголовок сторінки містить певний текст?

Розширення Chrome - це нова підстава для мене, і ваша вдячність буде вдячна.

Список літератури:

• Скрипти вмісту
• Файл маніфесту

Ви можете взяти такий код як посилання для додавання деякого HTML-коду.

manifest.json

Цей файл реєструє сценарій вмісту до розширення.

{
"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

Банальний скрипт для додавання кнопки на Googleсторінку

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

Ви бачите кнопку, додану до потрібної сторінки

Відповідь @Sudarshan пояснює специфіку сторінки, чудово, але як щодо доданих коментарів? ось як зробити те, чого він упустив, простіше, практичніше, щоб змінити наявний вміст або створити вміст на сторінці, найпростішим методом буде:

Змінити

модифікація одного елемента:

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

або змінити атрибути:

document.getElementById("Id").class = "classname";

//or ->

document.getElementById("Id").style.color = "#a1b2c3";

для додавання кількох рядків коду виконайте наступне:

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 -->
`
;

• але як щодо легкої вставки елемента?

Створити

ін'єкція великого коду (приклад із проекту кодування, зробленого деякий час тому), див. API API AddAdjacentHtml :

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>
    `);

посилання:

• вставка - Суміжні - Html
• код вмісту