Sửa đổi HTML của các trang đã tải bằng tiện ích mở rộng chrome

Làm cách nào để thêm một số mã HTML vào trang đã tải nếu tiêu đề của trang chứa văn bản cụ thể?

Các tiện ích mở rộng của Chrome là cơ sở mới đối với tôi và sự trợ giúp của bạn sẽ được đánh giá rất cao.

Người giới thiệu:

• Tập lệnh nội dung
• Tệp kê khai

Bạn có thể lấy đoạn mã sau làm tham chiếu để thêm một số Mã HTML.

manifest.json

Tệp này đăng ký tập lệnh nội dung thành phần mở rộng.

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

Một tập lệnh nhỏ để thêm một nút vào Googletrang

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

Bạn thấy một nút được thêm vào một trang mong muốn

Câu trả lời của @Sudarshan giải thích tính cụ thể của trang, Tuyệt vời, nhưng còn những nhận xét được thêm vào thì sao? đây là cách thực hiện những gì anh ấy đã bỏ lỡ một cách dễ dàng thực tế hơn để sửa đổi nội dung hiện có hoặc tạo nội dung trên một trang, phương pháp đơn giản nhất sẽ là:

Sửa đổi

sửa đổi một mặt hàng:

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

hoặc để sửa đổi các thuộc tính:

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

//or ->

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

để thêm nhiều dòng mã, hãy làm như sau:

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

• nhưng bây giờ những gì về việc chèn phần tử dễ dàng?

Tạo nên

chèn mã lớn (ví dụ từ dự án mã hóa được thực hiện một thời gian trước) xem API insertAdjacentHtml :

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

người giới thiệu:

• insert - Liền kề - Html
• nội dung cụ thể mã