使用 Chrome 扩展修改加载页面的 HTML

小开

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

最佳答案

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