本篇介绍如何在chrome扩展开发中拦截网页js并替换执行自己定义的js我会把其他代码写得尽量精简,为了凸显主要功能(红线标出是步骤核心)
工具/原料
chrome浏览器
最基本的js知识
准备工作
1、编辑manifest.json文件除了minifest必须的字段外你需要添加:迷撞笸痉两个权限:"webRequest","webRequestBl泠贾高框ocing" 和"web_accessible_resources":["returns.js"] (returns.js是你要注入的js文件名称)
2、在minifest.json文件里引入background.html在background.html里引入background.js使js在后台运行
实战
1、方便演示我准备了一个空网页和JS(clock.js)js所做的就是在网页和后台输出当前时间
2、现在来拦截:编辑后台运行的background.js文件(步骤一准备的)内容'''chrome.webRequest.onBeforeRequest.ad颊俄岿髭dListener( function(details) { return {redirectUrl: chrome.extension.getURL("returns.js")}; //returns.js是你要替换的js脚本 }, { urls: ["*://127.0.0.1/static/js/*"], //你要拦截的url地址 types: ["script"] //拦截类型为script, }, ["blocking"] //类型blocking为拦截,);'''
3、现在编写returns.js是你要注入的代码'''function hack(){document.write("<div><茑霁酌绡h1>现在是returns.js在工作!!!</h1></div>");}console.log("returns.js在工作!")hack();'''这个文件替换clock.js进行工作,看代码
4、最后把文件导入谷歌扩展
5、最后刷新hook的网页看效果计时clock.js被替换成returns.js