使用Chrome插件修改网页内容

ゞ浴缸里的玫瑰 2022-10-24 01:36 626阅读 0赞

关于Chrome插件的入门Demo，详见：[《Chrome 插件开发，入门Demo》][Chrome _Demo]

Chrome 插件是可以拿到你想要的所有权限的，比如可以跨域请求网站，可以修改你打开的网站的 js 内容 html 内容来达到给网页植入内容的目的。针对这些，我建议你可以做一些自己用的工具，请勿做一些恶意的插件诱导网友安装使用来达到自己不可告人的目的！

针对如何通过插件修改网页内容（包括HTML和JS等），本文通过一个场景示例来演示具体怎么做。

**场景：**

我个人有个路由器，型号 H3C-XXX，我现在有一个需求，需要在路由器中维护很多 dns 解析。  
但是这个路由器限制了添加的 dns 记录的数量，只允许添加20条（路由器是企业级路由，很贵不过也比较老了，这里想吐槽一下厂家太不厚道了，只给20条）  
经过查看网页源码，发现网页中有一个全局js变量设定了这个20的限制，然后通过postman直接调用接口，是可以绕过20的js限制添加成功的，所以，我准备弄一个超级简单的chrome插件来把这个页面中的这个变量值给改掉，比如修改为 99999。

下面就是插件的 manifest.json 和 js 脚本了：

manifest.json

{
    "name":"H3C(Inject DOM)",
    "description":"H3C路由器DNS管理页内容修改",
    "version":"1.0.0",
    "manifest_version":2,
    "content_scripts": [
        {
          "matches": ["http://192.168.1.1/*"],
          "js": ["myscript.js"],
          "run_at": "document_start"
        }
      ]
    }

> 注意：“run\_at” 设置为 “document\_start”

myscript.js

// 绑定这个事件需要在 manifest 中设定 "run_at": "document_start"
    document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);
    
    function fireContentLoadedEvent () {
        //console.log ("DOMContentLoaded");
    
        // PUT YOUR CODE HERE.
        //document.body.textContent = "Changed this!
    
    	// Checking page title
    	if (document.title.indexOf("STATIC DNS SERVER") != -1) {
    		// 通过追加script脚本修改变量
    		var script = document.createElement("script"); 
    		script.textContent ="dnshn_maxnum='99999'";
    		
    		// 追加到head的结尾，复写这个变量的值
    		if(document.head){
    			document.head.appendChild(script); 
    		}
    
    	}
    
    }

最后将插件加载或者打包添加到浏览器的插件中即可享用。

> 关于如何打包和载入插件到浏览器，详见文初我以前写的一个 Demo

--------------------

（END）

[Chrome _Demo]: https://blog.csdn.net/catoop/article/details/70246058