谷歌插件开发ajax请求,2020-01-03(chrome插件:拦截ajax请求并修改返回结果)

这个插件可以拦截页面上的 ajax 请求,并把返回结果替换成任意文本。它对 mock 数据、排查一些线上问题等会有很大帮助。(当然 chales 等抓包软件也可以做到,然而使用起来比较繁琐,做成 chrome 插件的形式会方便许多)

使用示例(视频)

weibo.com/tv/v/HlVZD8cR9?fid=1034:4352275389595232

Chrome 商店地址

地址:https://chrome.google.com/webstore/detail/ajax-interceptor/nhpjggchkhnlbgdfcbgpdpkifemomkpg

注意

建议第一次安装完重启浏览器,或者刷新你需要使用的页面。

当你不需要使用该插件时,建议把开关关上(插件icon变为灰色),以免对页面正常浏览造成影响。

该插件只会在JS层面上对返回结果进行修改,即只会修改全局的XMLHTTPRequest对象和fetch方法里的返回值,进而影响页面展现。而你在chrome的devtools的network里看到的请求返回结果不会有任何变化。

github (求star~有问题也可来提issue)

https://github.com/YGYOOO/ajax-interceptor

核心代码在这:

https://github.com/YGYOOO/ajax-interceptor/blob/master/pageScripts/main.js

基本原理就是把页面全局的XMLHttpRequest对象和fetch方法覆盖掉,做一些特殊处理。

————————————————

版权声明:本文为CSDN博主「Y__G__Y」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/y__g__y/article/details/89489493

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是大致的步骤: 1. 创建一个新的Chrome插件项目,可以在manifest.json文件中指定需要的权限,例如拦截网络请求和访问DOM。 2. 在background.js文件中编写拦截请求的代码。可以使用chrome.webRequest.onBeforeRequest监听XMLHttpRequest和fetch请求,并在回调函数中修改响应结果。 ```javascript chrome.webRequest.onBeforeRequest.addListener( function(details) { // 拦截请求修改响应结果 return {redirectUrl: "data:text/plain;charset=UTF-8," + encodeURIComponent("Hello, World!")}; }, {urls: ["<all_urls>"]}, ["blocking"] ); ``` 3. 在manifest.json文件中指定需要注入的内容脚本,例如可以在所有页面注入一个JS文件,以便在页面上修改响应结果。 ```json "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] } ] ``` 4. 在content.js文件中编写修改响应结果的代码。可以使用MutationObserver监听DOM的变化,并在回调函数中修改响应结果。 ```javascript var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { // 修改响应结果 mutation.target.textContent = "Hello, World!"; }); }); observer.observe(document, {subtree: true, characterData: true, childList: true}); ``` 5. 打包并安装插件。在Chrome浏览器中打开扩展程序页面,点击“加载已解压的扩展程序”按钮,选择插件的根目录,即可安装插件并测试拦截修改请求的功能。 以上是一个简单的拦截修改请求Chrome插件的步骤,具体实现还需要根据自己的需求进行调整。希望这些信息能对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值