位置: IT常识 - 正文

[Chrome插件开发]监听网页请求和响应(chrome插件开发拦截ajax)

编辑:rootadmin
Chrome插件开发

推荐整理分享[Chrome插件开发]监听网页请求和响应(chrome插件开发拦截ajax),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:chrome插件开发框架,chrome插件开发文档,chrome插件开发 delphi,chrome插件开发拦截ajax,chrome插件开发文档,chrome插件开发,chrome插件开发文档,chrome插件开发文档,内容如对您有帮助,希望把文章链接给更多的朋友!

更新了使用油猴插件配合油猴脚本拦截请求数据的方式,比插件方式开发简单很多,推荐。 https://blog.csdn.net/Backspace110/article/details/128807263

监听网页请求和响应Chrome插件开发前言一、方案思路二、准备注入文件1. 监听XMLHttpRequest2.监听fetch三、注入1.权限设置2.注入文件注入到页面中总结前言

截至文章发布,chrome插件规范有v3和v2版本。我这里主要讲v2版本,他们改动不大,主要是manifest.json调整。

完整代码https://github.com/IOL0ol1/GetResponse 我们都能够在网上查到不少资料了。 不了解的可以先看看前置资料,个人认为对我这种只有c/c++/c#开发经验100%js新手来讲,我看的前置资料:

Chrome插件介绍 https://www.jianshu.com/p/3bfb248dacd9chrome插件的核心配置介绍 https://www.jianshu.com/p/db94dc5cd68dChrome插件的8种展示形式 https://www.jianshu.com/p/3f99a140276fchrome插件开发中5种类型的JS对比 https://www.jianshu.com/p/c57bef2cf43bchrome插件 各个js之间的消息通讯 https://www.jianshu.com/p/3c7fea458245补充 https://www.jianshu.com/p/77a1523b0c20 最权威的还是官方网址,不过google系你懂的。https://developer.chrome.com/docs/extensions/ Chrome插件的JS主要可以分为这5类:injected script (注入脚本,注入到document页面的脚本, 和页面js完全相同的上下文空间content script (内容脚本,能访问document,不能访问页面js中的数据popup script (弹窗脚本,点击插件的弹窗,和下文后台脚本差不多,而且可以互相访问,独立上下文空间background script (后台脚本,插件启用期间一直运行,独立上下文空间devtools script (自定义开发者工具,在F12中添加一个自定义选项卡

举个例子,我的插件是针对百度写的, 只要要打开浏览器,插件是启用状态,后台脚本就开始运行了。 我点击插件图标,弹窗弹出,触发弹窗脚本运行。 关闭弹窗,弹窗脚本结束 浏览器新建标签页A访问了百度,A页面的内容脚本和注入脚本开始运行。 浏览器新建标签页B访问了百度,B页面的内容脚本和注入脚本开始运行。 关闭标签页A,A页面的内容脚本和注入脚本结束运行。 关闭标签页B,B页面的内容脚本和注入脚本结束运行。 关闭浏览器或禁用插件,后台脚本结束。 后台脚本可以监听一些全局事件,而且可以发起跨域访问(全局的东西,没有域就不存在跨域,哈哈)。 内容脚本结合注入脚本主要处理当前页面,可以和后台脚本通讯。

[Chrome插件开发]监听网页请求和响应(chrome插件开发拦截ajax)

当然,这篇文章我是打算投原创的,所以主要写自己遇到的实际应用场景和解决方案: 我需要通过插件获取网页请求的响应数据,而且不能重复请求,即安装插件之后和之前,浏览器的请求数量不应发生改变(插件需要对后端透明)。

一、方案思路

因为要获取响应的body数据,所以基本思路就是通过content script 向当前页面注入 injected script 监听页面的请求和响应数据。但是存在两种 XMLHttpRequest 和 fetch 两种js请求操作,我需要监听这两种请求,所以下文会细说具体操作,我们可以根据应用场景选用。

二、准备注入文件1. 监听XMLHttpRequest

我的方案是将监听之后的响应数据发送到content script,这部分可以根据实际需要修改。 injectedXhr.js代码:

(function (xhr) { var XHR = XMLHttpRequest.prototype; var open = XHR.open; var send = XHR.send; XHR.open = function (method, url) { this._method = method; this._url = url; return open.apply(this, arguments); }; XHR.send = function (postData) { console.log('xhr request:', this._method, this._url, postData); this.addEventListener('load', function () { // sessionStorage['key'] = JSON.stringify(response); // 插件需要添加'storage'权限 // document.cookie // localStorage['key'] window.postMessage({ type: 'xhr', data: this.response }, '*'); // 将响应发送到 content script }); return send.apply(this, arguments); };})(XMLHttpRequest);2.监听fetch

代码如下(示例):

(function () { let origFetch = window.fetch; window.fetch = async function (...args) { const response = await origFetch(...args); console.log('fetch request:', args); response .clone() .blob() // 此处需要根据不同数据调用不同方法,这里演示的是二进制大文件,比如音频 .then(data => { // 对于二进制大文件可以创建为URL(blob:开头),供其它脚本访问 //sessionStorage['wave'] = URL.createObjectURL(data); // 插件需要添加'storage'权限 window.postMessage({ type: 'fetch', data: URL.createObjectURL(data) }, '*'); // send to content script }) .catch(err => console.error(err)); return response; }})();

以上两段代码存储为 injected.js,下文中我们将它注入到页面。

三、注入1.权限设置

需要注意manifest.json文件的设置,需要将注入到页面的文件设置为web_accessible_resources permissions如果有需要的权限也需要设置好

"content_scripts": [ { "matches": [ "*://*.yourweb.com/*" ], "js": [ "./content.js" ], "run_at": "document_start", "all_frames": true } ], "web_accessible_resources": ["injected.js"] "permissions": [ "cookies", "storage", "<all_urls>" ]2.注入文件注入到页面中

content.js文件中将injected.js文件注入到页面中。

console.log('content script start');// inject injected scriptvar s = document.createElement('script');s.src = chrome.runtime.getURL('injected.js');s.onload = function () { this.remove();};(document.head || document.documentElement).appendChild(s);// receive message from injected scriptwindow.addEventListener('message', function (e) { console.log('content script received:' , e.data.type, e.data.data);});总结

一点点笔记,目前刚接触js,不是特别了解,很多语言层面的特性不是很会,计划是之后转到ts上。 另外如果没有特殊需求,还是推荐使用油猴插件+油猴脚本,省去很多无聊的负担。 顺便吐槽js真是个屎坑。require/import这种c(#include)都有的模块引用机制还得到es6才添加到语言层面。 很多语言层面应该支持的东西,都要通过库来曲线实现,整个一填坑史。

本文链接地址:https://www.jiuchutong.com/zhishi/311929.html 转载请保留说明!

上一篇:vue报错:We‘re sorry but doesn‘t work properly without JavaScript enabled. Please enable it to continue(vue was assigned to but)

下一篇:ajax - 终结篇jsonp,防抖节流(ajax json请求)

  • 浅析企业品牌推广的方法(企业品牌推广方式有哪些)

    浅析企业品牌推广的方法(企业品牌推广方式有哪些)

  • 华为手机重启怎么操作(华为手机重启怎么办)

    华为手机重启怎么操作(华为手机重启怎么办)

  • 小米8手机无故响提示音(小米手机无故关机怎么回事)

    小米8手机无故响提示音(小米手机无故关机怎么回事)

  • 公网对讲机能换卡吗(公网对讲机能换频道吗)

    公网对讲机能换卡吗(公网对讲机能换频道吗)

  • word和excel统称(word,excel的区别)

    word和excel统称(word,excel的区别)

  • e5 1620 v3相当于i几(e5-1620相当于)

    e5 1620 v3相当于i几(e5-1620相当于)

  • 微博开启相机权限在哪里设置(怎么让微博访问相机权限)

    微博开启相机权限在哪里设置(怎么让微博访问相机权限)

  • 苹果平板怎么下载钉钉(苹果平板怎么下载微信)

    苹果平板怎么下载钉钉(苹果平板怎么下载微信)

  • 苹果7p充不进电怎么回事(苹果7p充不进电是什么原因)

    苹果7p充不进电怎么回事(苹果7p充不进电是什么原因)

  • 电脑end键在哪里(华为电脑end键在哪里)

    电脑end键在哪里(华为电脑end键在哪里)

  • 手机能改路由器密码么(如何用手机设置路由器)

    手机能改路由器密码么(如何用手机设置路由器)

  • 荣耀play3解锁方式(荣耀play3锁屏密码忘记了怎样解锁)

    荣耀play3解锁方式(荣耀play3锁屏密码忘记了怎样解锁)

  • 水印相机是什么意思(水印相机是什么相机)

    水印相机是什么意思(水印相机是什么相机)

  • 抖音看不到直播怎么回事(抖音看不到直播人数怎么回事)

    抖音看不到直播怎么回事(抖音看不到直播人数怎么回事)

  • 录音权限被禁止怎么办(录音权限被禁止怎样打开)

    录音权限被禁止怎么办(录音权限被禁止怎样打开)

  • vivox23和x27区别(vivox23和x27有多大区别)

    vivox23和x27区别(vivox23和x27有多大区别)

  • 华为mate20pro有畅连通话吗(华为mate20畅享版)

    华为mate20pro有畅连通话吗(华为mate20畅享版)

  • 乐视手机的售后电话是什么(乐视手机售后维修点)

    乐视手机的售后电话是什么(乐视手机售后维修点)

  • 网购确认收货还能退吗(网购确认收货还能7天无理由)

    网购确认收货还能退吗(网购确认收货还能7天无理由)

  • boss直聘怎么申请面试(boss直聘怎么申请退款)

    boss直聘怎么申请面试(boss直聘怎么申请退款)

  • 耳机上的l代表什么(耳机上的L代表什么)

    耳机上的l代表什么(耳机上的L代表什么)

  • 华为nova5pro时间怎么设置24小时(华为nova5pro时间在哪设置)

    华为nova5pro时间怎么设置24小时(华为nova5pro时间在哪设置)

  • iphone x天线藏到哪了(iphonex天线位置)

    iphone x天线藏到哪了(iphonex天线位置)

  • 抖音消息怎么没提示了(抖音消息怎么没有好友在线状态提醒)

    抖音消息怎么没提示了(抖音消息怎么没有好友在线状态提醒)

  • 苹果xs真的防水吗(苹果xs真的防水吗知乎)

    苹果xs真的防水吗(苹果xs真的防水吗知乎)

  • linux命令之top该怎么用?top命令详解(linux命令top作用)

    linux命令之top该怎么用?top命令详解(linux命令top作用)

  • 汉诺塔问题分治求解(汉诺塔问题动画演示)

    汉诺塔问题分治求解(汉诺塔问题动画演示)

  • 个税抵扣申报晚好了需要跟公司申报吗?
  • 办公室购买清洁剂
  • 利润表季报的本期金额是本年累计吗
  • 关联方交易的会计处理方法
  • 委托加工物资属于企业资产吗
  • 纳税申报表真伪验证
  • 技术服务费属于哪个商品编码
  • 同一控制下企业合并取得的长期股权投资
  • 转增股本是不是缴个人所得税
  • 分类账和明细账平行登记规则
  • 质量不合格起诉状
  • 增值税税收返还资料
  • 叉车车船税每年都要交吗
  • 增值税申报表第31栏为什么有数字
  • 长期待摊费用要设明细科目吗
  • 增值税发票红冲后增值税销项为负数
  • 出租车库收入是否需要计算缴纳土地增值税
  • 递延资产摊销属于什么科目
  • 购房时收取的卖方费用
  • 消费税税目是否含税
  • 年末结转本年利润后再结账吗
  • mac怎么打出@符号
  • 财务费用增加记借方还是贷方
  • 退货需要进行的操作
  • 租赁合同维修费用
  • 怎么删除office
  • 软件远程调用失败是什么意思
  • 虎杖的养殖方法和用量
  • Windows11预览体验
  • 支付宝提现到企业账户 怎么开票
  • 购买理财产品收到的利息分录
  • php初学实例教程
  • 去年未计提费用,今年付怎么做账
  • win7系统修改
  • phpif函数的使用方法
  • 最贵的十张照片
  • the模板引擎
  • 潜水时看到的鱼
  • json与json字符串
  • id3决策树伪代码
  • mongodb 查询条件
  • thinkphp apidoc
  • php简单获取网站的方法
  • 保险公司发票能在异开吗
  • 单位购日用品计提折旧吗
  • 金税盘开票如何增加商品编码
  • 季度销售额未超过30万元 季度中间
  • 给法院交的诉讼费没有发票怎么入账
  • 盈余公积转增资本会计科目
  • 企业所得税计提金额怎么算
  • 环保工程会计处理
  • 企业之间交换房地产要交土地增值税吗
  • 向农业生产者收购的原木 进项
  • 进项税额有留底怎么做分录
  • 增资如何做账务处理
  • 土地承包费和土地租赁费收入记账
  • 主营业务成本借贷方向增减
  • 出售设备账务处理
  • 固定资产的入账时间应该是什么时间
  • 多余备用金记账会计分录
  • 非营利医疗机构是什么单位
  • mysql数据库增量备份命令
  • sql server存储过程教程
  • 微型创新是什么
  • cf分屏不全屏
  • Linux系统中修改文件权限
  • xp 控制面板
  • linuxcpu监控
  • win10系统开机桌面图标不见了
  • 设计师的悲哀
  • 商务英语考英语笔译 算跨考吗
  • nodejs model
  • angular const
  • 如何利用百度地图定位
  • 河北电子税务局新版登录
  • 国家税务总局江西省
  • 一般纳税人按季申报的行业
  • 大同县税务局
  • 固定资产折旧的影响因素
  • 开票信息哪里查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设