Chrome插件开发


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

监听网页请求和响应

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

前言

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

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

  1. Chrome插件介绍 https://www.jianshu.com/p/3bfb248dacd9
  2. chrome插件的核心配置介绍 https://www.jianshu.com/p/db94dc5cd68d
  3. Chrome插件的8种展示形式 https://www.jianshu.com/p/3f99a140276f
  4. chrome插件开发中5种类型的JS对比 https://www.jianshu.com/p/c57bef2cf43b
  5. chrome插件 各个js之间的消息通讯 https://www.jianshu.com/p/3c7fea458245
  6. 补充 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页面的内容脚本和注入脚本结束运行。
关闭浏览器或禁用插件,后台脚本结束。
后台脚本可以监听一些全局事件,而且可以发起跨域访问(全局的东西,没有域就不存在跨域,哈哈)。
内容脚本结合注入脚本主要处理当前页面,可以和后台脚本通讯。

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


一、方案思路

因为要获取响应的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",     ""  ]

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才添加到语言层面。
很多语言层面应该支持的东西,都要通过库来曲线实现,整个一填坑史。