chrome extensions 谷歌插件开发 监听请求和获取响应数据

这篇具有很好参考价值的文章主要介绍了chrome extensions 谷歌插件开发 监听请求和获取响应数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

manifest.json 中的权限

"permissions": [
    "proxy",
    "unlimitedStorage",
    "<all_urls>",
    "declarativeContent",
    "browsingData",
    "cookies",
    "tabs",
    "storage",
    "notifications",
    "webRequest",
    "webRequestBlocking",
    "http://*/*",
    "https://*/*",
    "debugger",
    "activeTabs"
  ],

一、使用 webRequest

使用权限 "webRequest","webRequestBlocking"
在背景页中拦截并发出请求获取数据,
webRequest只能拦截到请求,想要获取响应数据可以重发一次请求

const axios = require('axios');
//封装get请求
function axiosGet(url){
    return new Promise((res,rej)=>{
        axios.get(url).then(e=>{
            res(e)
        }).catch(e=>{
            rej(e)
        })
    })
}

/**
 * 拦截请求并修改指定请求头信息
 */
chrome.webRequest.onBeforeSendHeaders.addListener(async function (details) {
		// 可以自行添加头部
        details.requestHeaders.push({name: 'Referer', value: 'https://h5.m.taobao.com/'});
        if (details.tabId != -1) {
            if (/getdetail|getdesc/.test(details.url) && !/i=6666/.test(details.url)){
                let res = await axiosGet(`${details.url}&i=6666`)
                console.log('res',res)
            }
        }
        return { requestHeaders: details.requestHeaders };
    }, {
        urls: [
            "*://h5api.m.taobao.com/h5/mtop.taobao.detail.*",
        ]
    }, ['blocking', 'requestHeaders','extraHeaders']
);

二、使用 debugger

使用权限 "debugger","activeTabs"
背景页使用该方法

async function debuggerAttach() {
    let currentTab;
    let version = '1.3';
    let debuggee = ''

    chrome.tabs.query({url: '所要监听页面的url'}, (tabs) => {
        currentTab = tabs[0]
        chrome.debugger.attach({
            tabId: currentTab.id
        }, version, onAttach.bind(null, currentTab.id));
    });

    function onAttach(tabId) {
        if (chrome.runtime.lastError) {
            console.log('onAttach-Error', chrome.runtime.lastError);
            return
        }
        console.log("onAttach-Success");
        chrome.debugger.sendCommand({
            tabId: tabId
        }, "Network.enable");
        chrome.debugger.onEvent.addListener(allEventHandler);
    }

    function allEventHandler(debuggeeId, message, params) {
        debuggee = debuggeeId
        if (currentTab.id !== debuggeeId.tabId) {
            console.log('currentTab.id !== debuggeeId.tabId')
            return;
        }
        if (message === "Network.responseReceived") {
            let url = params?.response?.url
            chrome.debugger.sendCommand({
                tabId: debuggeeId.tabId
            }, "Network.getResponseBody", {
                "requestId": params.requestId
            }, async function (response) {
                    console.log('response======>', response)
                }
            });
        }
    }
    console.log('关闭调试')
    debuggee && chrome.debugger.detach(debuggee)
}
debuggerAttach()

三、使用 ajax_interceptor_manny

该方法只能拦截到 Fetch/XHR 类型 的数据

window.ajax_interceptor_manny = {
    settings: {
      switchOn: false,
      switchQuery:false
    },
    originalXHR: window.XMLHttpRequest,
    myXHR: function() {
      let pageScriptEventDispatched = false;
      const modifyResponse = () => {
        //this.responseText = overrideTxt;
        //this.response = overrideTxt;
        if (pageScriptEventDispatched) {
          return;
        }
        pageScriptEventDispatched = true;
        ajax_interceptor_manny.download(this.responseText, this.responseURL);
      }

      // new 一个原生的 XMLHttpRequest 不需要参数,将 xhr 的属性,都复制给this,暴露到外面
      const xhr = new ajax_interceptor_manny.originalXHR();

      for (let attr in xhr) {
        if (attr === 'onreadystatechange') {
          xhr.onreadystatechange = (...args) => {
            if (this.readyState == 4 && this.status == 200) {
              // 请求成功
              if (ajax_interceptor_manny.settings.switchOn) {
                // 开启拦截
                modifyResponse();
              }
            }
            this.onreadystatechange && this.onreadystatechange.apply(this, args);
          }
          continue;
        } else if (attr === 'onload') {
          xhr.onload = (...args) => {
            // 请求成功
            if (ajax_interceptor_manny.settings.switchOn) {
              // 开启拦截
              modifyResponse();
            }
            this.onload && this.onload.apply(this, args);
          }
          continue;
        }

        if (typeof xhr[attr] === 'function') {
          this[attr] = xhr[attr].bind(xhr);
        } else {
          if (attr === 'responseText' || attr === 'response') {
            var k = "_"+attr;
            Object.defineProperty(this, attr, {
              get: () => this[k] == undefined ? xhr[attr] : this[k],
              set: (val) => this[k] = val,
            });
          } else {
            Object.defineProperty(this, attr, {
              get: () => xhr[attr],
              set: (val) => xhr[attr] = val,
            });
          }
        }
      }
    },
    originalFetch: window.fetch.bind(window),
    myFetch: function(...args) {
      return ajax_interceptor_manny.originalFetch(...args).then((response) => {
        if (response.ok) {
          response.clone().text().then((res) => {
            ajax_interceptor_manny.download(res, response.url);
          }).catch((e) => {
            console.warn(e)
          });
        }
        return response;
      });
    },
    download(data, url) {
      try {
        if (ajax_interceptor_manny.settings.switchOn) {

          if (data && typeof data == "string") {
            data = JSON.parse(data);
            data.url = url;
          }
          if (data){
            //遍历需要捕获的接口
            captureInterfaces.forEach((item)=>{
              if(data.url.indexOf(item) >-1){
                	console.log('data',data)
                }
              }

            })

          }

        }
      } catch (e) {
        console.error("数据获取失败", e);
      }

    },

    setSetting(data) {
      if (typeof data !== "object") {
        return;
      }
      //设置环境
      for (var i in data) {
        ajax_interceptor_manny.settings[i] = data[i];
      }
    },
    init() {
      window.XMLHttpRequest = ajax_interceptor_manny.myXHR;
      window.fetch = ajax_interceptor_manny.myFetch;
    }
  }
  ajax_interceptor_manny.init();
  ajax_interceptor_manny.setSetting({
    switchOn:true
  })

四、拦截 script 类型 数据

可以使用js注入拦截方法,如未获取到可使用setTimeout等待文章来源地址https://www.toymoban.com/news/detail-573005.html

let jsonp1 = ''
let jsonp2 = ''
window.setTimeout(()=>{
  window.mtopjsonpCopy1 = window.mtopjsonp1
  window.mtopjsonp1 = function(res) {
    console.log('@@@@@mtopjsonp1',res)
    jsonp1 = res
    window.mtopjsonpCopy1(res)
    window.setTimeout(()=>{
      window.mtopjsonpCopy3 = window.mtopjsonp3
      window.mtopjsonp3 = function(res) {
        console.log('@@@@@mtopjsonp3',res)
        jsonp2 = res
        window.mtopjsonpCopy3(res)
      }
    },200)
  }
},200)

到了这里,关于chrome extensions 谷歌插件开发 监听请求和获取响应数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Axure插件axure-chrome-extension安装

    chrome浏览器打开axure生成的HTML静态文件页面预览打开如下图显示 ,这是因为chrome浏览器没有安装Axure插件axure-chrome-extension导致的。 方式一:先下载Axure谷歌浏览器插件,然后在浏览器中添加扩展程序。添加已解压得扩展程序。 插件下载地址:https://download.csdn.net/download/qq_41

    2024年02月11日
    浏览(91)
  • 【谷歌插件开发】获取当前网站COOKIE并上报HTTP-API

    由于本人每天需要登录网站查看数据并分析统计汇总,而每次机械式地搜索和简单计算,十分繁琐。我们可以写个定时任务,每天根据cookie获取网站数据并遍历统计。 脚本得以成功执行的关键是需要获取到COOKIE 故,写了个谷歌插件用来上报COOKIE manifest.json index.html mystyle.css

    2023年04月25日
    浏览(42)
  • chrome extensions插件declarativeNetRequest修改user-agent方法manifest v3版

    有能力的可以看官方文档:https://developer.chrome.com/docs/extensions/reference/declarativeNetRequest/#manifest 有一个需求,想通过插件的方式,修改请求头里面的user-agent,比如修改为iphone的头: 原本浏览器的请求头是: 通过查询发现,v2版本修改请求头的方式为:但是这种方式已经被废弃

    2024年02月01日
    浏览(92)
  • VueJs+chrome-extension+element-ui天气预报的小插件

    这里通过chrome-extension + VueJs + element-ui来实现个天气预报的小插件,如下图: 1.1 创建项目         通过vue-cli脚手架3.0版本来创建项目,命令如下: 默认选择是vue2.0语法 Successfully代表安装成功。 这里不是做web项目,所以删除vue-cli3脚手架的部分文件,删除文件如下: src/m

    2024年02月04日
    浏览(44)
  • chrome 谷歌浏览器 导出插件拓展和导入插件拓展

    给同事部署 微软 RPA时,需要用到对应的chrome浏览器插件;谷歌浏览器没有外网是不能直接下载拓展弄了半小时后才弄好,竟发现没有现成的教程,遂补充; 谷歌浏览器 地址栏敲 在对应的地址下,找到对应的插件存放位置; 在该文件夹中,对应id找到对应的文件 直接引用这

    2024年02月09日
    浏览(49)
  • #Chrome扩展程序开发教程--02:Hello Extensions

            本系列博客旨在带来最新的Chrome扩展程序开发入门教程。         本节博客中,笔者将带领读者创建一个最简单的扩展程序:                          1.创建一个文件夹,并在里面创建一个名为 manifest.json 的文件,输入以下内容: 这里面的 “act

    2023年04月22日
    浏览(34)
  • 谷歌浏览器(chrome)安装crx插件

    1、下载crx插件 2、插件扩展名改名为zip 3、解压zip文件 4、打开谷歌浏览器扩展程序 chrome://extensions/ 5、打开开发者模式,加载已解压的扩展程序,安装成功即如图展示    

    2024年02月11日
    浏览(53)
  • 谷歌浏览器(chrome)允许跨域/允许https网站中发送http请求

    直接上方法了 第一步:对谷歌浏览器图标点击鼠标右键,打开属性面板 第二步:在下图位置,添加下列代码 原来启动浏览器的地址: C:UsersxxxxxAppDataLocalGoogleChromeApplicationchrome.exe 增加的代码(注意开头是有个空格的,要把两部分用空格隔开的): --args --disable-web-secu

    2024年02月02日
    浏览(59)
  • 谷歌chrome浏览器所有历史版本下载及selenium自动化控制插件资源分享

    使用python + selenium做网页自动化开发的小伙伴经常需要用到google chrome浏览器以及chromedriver插件。     谷歌浏览器所有历史版本下载链接: chrome历史版本,点击下载 chromedriver插件下载地址: 下载链接1:点击下载 下载链接2:点击下载 chromedriver插件与浏览器版本有对应关系,

    2024年02月14日
    浏览(53)
  • Google Chrome谷歌浏览器安装最新版Elasticsearch插件 图文教程 【一看就懂】

    我们在虚拟机安装了Elasticsearch后,往往还需要再安装一个可视化界面以便于使用。本文就教您如何在Google Chrome谷歌浏览器安装最新版Elasticsearch(es)插件。 | 1 如图所示,点击设置 进入如下界面,点击扩展程序 开启开发者模式后点击Chrome网上应用商店 如图所示搜索插件El

    2024年02月07日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包