使用 chrome 扩展修改加载页面的 HTML答案

【问题标题】：Modify HTML of loaded pages using chrome extensions使用 chrome 扩展修改加载页面的 HTML
【发布时间】：2012-12-13 16:21:31
【问题描述】：

如果页面标题包含特定文本，我如何向加载的页面添加一些 HTML 代码？

Chrome 扩展程序对我来说是新的领域，非常感谢您的帮助。

【问题讨论】：

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

参考资料：

您可以参考以下代码添加一些 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`

您会看到一个添加到所需页面的按钮

【讨论】：

有人能详细说明如何从这两个文件 --> 到本地扩展文件 --> 到已安装的扩展吗？
@Luke 使用这样的模板：github.com/Ehesp/Chrome-Extension-Twitter-Bootstrap-3-Template
对于开发，我发现解决方案是转到 chrome://extensions，选中开发人员模式复选框，然后加载解压缩的扩展程序，然后选择包含文件的目录。
fyi，DOM 不是 HTML，如果您的意图是从网络服务器获取一些 HTML，并且在它被解析为 DOM 并在浏览器中显示之前，编辑它，这是给你的错误答案..继续谷歌搜索...
我们如何修改 HTML 页面上的现有内容？

【解决方案2】：

@Sudarshan 的回答解释了页面特异性，很好，但是添加的 cmets 呢？以下是如何以更简单更实用的方式完成他错过的事情要修改现有内容或在页面上创建内容，最简单的方法是：

修改

单项修改：

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

但是现在如何轻松插入元素呢？

创建

大型代码注入（来自不久前完成的编码项目的示例）请参阅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>
    `);

参考：

【讨论】：