Javascript 使用 chrome 扩展修改加载页面的 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14068879/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modify HTML of loaded pages using chrome extensions
提问by Luke G
How can I add some HTML code to the loaded page if page's title contains specific text?
如果页面标题包含特定文本，如何向加载的页面添加一些 HTML 代码？
Chrome extensions are new grounds to me and your help would be greatly appreciated.
Chrome 扩展程序对我来说是新的领域，非常感谢您的帮助。
回答by Sudarshan
References:
参考：
You can take the following code as a reference for adding some HTML Code.
您可以参考以下代码添加一些 HTML 代码。
manifest.json
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
myscript.js
A trivial script for adding a button to Googlepage
用于向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
Output
You see a button added to a desired page
您会看到一个按钮添加到所需页面
回答by 255.tar.xz
@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:
@Sudarshan 的回答解释了页面的特殊性，很好，但是添加的评论呢？以下是如何以更简单更实用的方式完成他错过的事情，以修改现有内容或在页面上创建内容，最简单的方法是：
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:
大型代码注入（前一段时间完成的编码项目示例）请参阅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:
参考：
