Chrome插件入门演示请参见:《Chrome插件开发入门演示》
Chrome插件可以获得你想要的一切权限,比如跨域请求网站,改变你打开的网站的js内容和html内容,以达到在网页上嵌入内容的目的。 对于这些,我建议大家可以制作一些自己使用的工具,不要制作一些恶意插件来诱导网友安装使用来达到你们不可告人的目的!
对于如何通过插件改变网页内容(包括HTML和JS等),本文通过一个场景示例来演示如何操作。
场景:
我个人有一个路由器,型号为H3C-XXX,现在我需要在路由器中维护很多dns解析。
但是这个路由器限制了添加dns记录的数量,只允许20条(该路由器是企业级路由器,很贵而且也比较老,这里我想吐槽一下厂家太不厚道了网页游戏源码是什么意思网页游戏源码是什么意思,只允许20条)
检查网页源码后发现,网页中有一个全局js变量设置了20的限制,然后直接通过postman调用socket就可以绕过js限制20,添加成功。 因此,我打算制作一个超级简单的chrome插件来改变这个页面中这个变量的值,例如改为99999。
以下是插件的manifest.json和js脚本:
清单.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
(结尾)