chrome插件篇:资源监控01

前言:

因一些需求,前阵子需要帮助某些同学,检测网络请求并下载之。

身为一只前端程序猿,首先想到的,就是开发chrome插件。

BUT,旅途各种忐忑,木有中文api,官方缺少重要的例子,各种层次api的运行不正确 & 等等,等等~。

 

 

功能说明:

1、监控网络请求

2、下载(这部分以后再讲

 

界面如下:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,下面是大致的步骤: 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插件的步骤,具体实现还需要根据自己的需求进行调整。希望这些信息能对你有所帮助!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值