前端好帮手,请务必装上这个 Chrome 插件_谷歌插件,网页修改接口返回

修改后的界面:

操作界面.png

  1. 使用方法看视频教程:
    这里以修改文章列表中第一篇文章的title为例

注意事项

  1. 建议第一次安装完重启浏览器,或者刷新你需要使用的页面。
  2. 当你不需要使用该插件时,建议把开关关上(插件icon变为灰色),以免对页面正常浏览造成影响。
  3. 该插件只会在JS层面上对返回结果进行修改,即只会修改全局的XMLHTTPRequest对象和fetch方法里的返回值,进而影响页面展现。而你在chrome的devtools的network里看到的请求返回结果不会有任何变化

如何修改插件添加标签功能

作为资深用户,我觉得唯一不好的一点就是,当拦截的请求过多的时候,界面上不能很容易的区分出每个请求,必须要点到url里面查看才能知道,急需要一个备注或者标签的功能,所以我找到源码[2] ),自己加了一个。在iframe目录下的main.js中,找到界面:

别忘了修改处理函数和删除函数哟,修改之后重新构建添加到chrome 插件中就行啦。最后界面就是上面这个样子:

这样是不是直观一些?哈哈。

tips

要感谢当年那位同事,我为了自己方便也造了些轮子学到些东西(搞懂了nginx配置解决页面刷新404,写nodeServer做请求转发解决跨域等)。

了解了插件能做的事情之后,我自己也写了一些简单的小插件:

  • 比如隐藏指定页面侧边栏和header 因为我不喜欢看广告,还有不想被经过的人发现我在做什么,所以我写了这个:

  • 给另一半的生日惊喜 给他安装一个插件,在他生日当天打开浏览器的第一时间,弹出这样的画面:

想想,还是挺浪漫的吧!

chrome extensions 帮助我更好的工作和生活,最重要的是学到了一些解决问题的新思路。查看官方文档chrome extensions 官方文档[3]开启你的插件开发之旅吧。

帮助他人就是帮助自己,好东西当然要分享给大家。如果大家有有趣的点子也希望分享给我,一起做有趣的事啊!希望文章能对你有所帮助。关注我,定能有一点点收获!

结尾

学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。

html5

  • 25
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值