使用chrome扩展名修改已加载页面的HTML


Answers:


138

参考文献:

您可以将以下代码作为添加一些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

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

在此处输入图片说明


有人可以详细说明如何从这两个文件->到本地扩展文件->到已安装的扩展名吗?
路加福音


4
对于开发人员,我发现解决方案是转到chrome:// extensions,选中“开发人员”模式复选框,然后选择“加载解压的扩展名”,然后选择包含文件的目录。
路加福音

仅供参考,DOM不是HTML,如果您打算从Web服务器获取一些HTML,并且在将其解析为DOM并显示在浏览器中进行编辑之前,这是对您的错误答案。谷歌搜索...

我们将如何修改HTML页面上的现有内容?
Stevoisiak

3

@Sudarshan的答案解释了页面的特殊性,很好,但是添加的注释又如何呢?这是一种以更轻松,更实用的方式来修改他现有的内容或在页面上创建内容的方法,最简单的方法是:

修改

单项修改:

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

参考资料:

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.