Javascript 使用chrome扩展修改加载页面的HTML
如果页面标题包含特定文本,如何向加载的页面添加一些HTML代码 Chrome扩展对我来说是一个新的领域,非常感谢您的帮助。参考资料:Javascript 使用chrome扩展修改加载页面的HTML,javascript,google-chrome,google-chrome-extension,Javascript,Google Chrome,Google Chrome Extension,如果页面标题包含特定文本,如何向加载的页面添加一些HTML代码 Chrome扩展对我来说是一个新的领域,非常感谢您的帮助。参考资料: 您可以将以下代码作为添加一些HTML代码的参考 manifest.json 此文件将内容脚本注册到扩展名 { "name":"Inject DOM", "description":"http://stackoverflow.com/questions/14068879", "version":"1", "manifest_version":2, "cont
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);
}
输出
您将看到添加到所需页面的按钮
@Sudarshan的回答解释了页面的特殊性,很好,但是添加的评论呢?以下是如何以一种更简单、更实际的方式来完成他错过的事情 要修改现有内容或在页面上创建内容,最简单的方法是: 修改 单项修改:
document.getElementById("Id").innerHtml = this.innerHtml + "<some code here>";
要添加多行代码,请执行以下操作:
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 -->
`
;
document.getElementById(“Id”).innerHtml=this.innerHtml+`
我们在多条线上“也可以插入变量!”+`
有人能详细说明如何从这两个文件-->到本地扩展文件-->再到已安装的扩展吗?@Luke使用这样一个模板:对于开发,我发现解决方案是转到chrome://extensions,选中“开发人员模式”框,然后加载解包扩展名,并选择包含文件的目录。仅供参考,DOM不是HTML,如果您的目的是从web服务器获取一些HTML,并且就在它被解析为DOM并显示在浏览器中之前,编辑它,那么这对您来说是错误的答案。。继续用谷歌搜索…我们如何修改HTML页面上的现有内容?
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 -->
`
;
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>
`);