大家好！我是一个喜欢前端的~菜鸡H

需求

  • 完成安装插件后、对整个浏览器的页面请求进行拦截、并且可以通过插件配置指定拦截接口进行展示、包括下载和导出拦截的数据内容、这里面可以配合后端去做很多很多事情

问题

  • 拦截所有请求组装请求信息和结果
  • 插件与页面的互相通信、做对应操作

效果图

开发chrome插件实现爬虫 - 图1

开发chrome插件实现爬虫 - 图2

开发chrome插件实现爬虫 - 图3

开发chrome插件实现爬虫 - 图4

首先我们先认识一个文件叫manifest.json、他是一个配置文件、chrome插件先读取这个配置文件去做初始化工作、比如一些插件的图标配置、插件点击显示的页面、插件需要的权限授权、等等....

第一个插件

  • 创建配置文件manifest.json
  • 创建展示图标
  • 创建展示页面
  1.     //chromePlugin文件结构
  2.     - icon 
  3.         - logo.png  //图片尺寸不能大于129...好像是吧...如果不显示的话就弄小一些
  4.     - background
  5.         - index.html
  6.         - index.js
  7.     - browser_action
  8.         - index.html
  9.         - index.js
  10.         - index.css
  11.     - manifest.json

manifest.json

  1. {
  2.     //你的插件名称
  3.     "name": "chrome",
  4.     //描述
  5.     "description": "chrome插件",
  6.     //版本
  7.     "version": "1.0",
  8.     //必填项、而且填2
  9.     "manifest_version": 2,
  10.     //你可以理解为你的插件注入在浏览器的一个后台服务器
  11.     "background": {
  12.         "page": "/background/index.html"
  13.     },
  14.     //插件点击后显示的页面
  15.     "browser_action": {
  16.         "default_icon": "/icon/logo.png",
  17.         "default_title": "chrome插件",
  18.         "default_popup": "/browser_action/index.html"
  19.    },
  20.    //icons
  21.    "icons": {
  22.         "16": "/icon/logo.png",
  23.         "32": "/icon/logo.png",
  24.         "48": "/icon/logo.png",
  25.         "128": "/icon/logo.png"
  26.     }
  27. }

browser_action/index.html && index.css

  1. //index.html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     /*注意一下这里引入css的路径规则 */
  10.     <link rel="stylesheet" type="text/css" href="/browser_action/index.css">
  11. </head>
  12. <body>
  13.     <div class="app">
  14.         我的第一个chrome插件
  15.     </div>
  16. </body>
  17. </html>
  19. //index.css
  20. .app{
  21.     width: 200px;height: 100px;background: yellow;
  22. }

简单描述下配置文件流程、background你可以理解为你的插件一直驻留在浏览器的代码块、里面可以放一些共享给插件页面的数据等等... browser_action就是指插件点击后显示的页面内容、你可以尝试去写一些你自己想要展示的内容部分、然后打开浏览器、更多工具-> 扩展程序、右上角开发模式打开 然后把你的项目直接拖入进去、会自动识别、不出意外的话你的插件就安装好了、然后点击插件、那么恭喜你、你的第一个chrome插件已经完成！😊

问题1：拦截所有请求组装请求信息和结果

思路是：重写XMLHttpRequest和fetch、重写后通过chrome提供的配置文件去往每个页面把重写的代码注入进去，到拦截效果、先认识一个 content_scripts 配置、他是一个告诉chrome插件我需要在当前网页去加载我的js 的一个配置 往manifest.json添加下面代码

  1. //注入到页面js的规则配置
  2. "content_scripts": [
  3.     {
  4.     // 定义哪些页面需要注入content script "<all_urls>"所有页面 
  5.         "matches": ["<all_urls>"],
  6.         //css文件地址
  7.         "css": [],
  8.         //注入的js文件地址
  9.         "js": ["/contentScript/install.js"],
  10.         //控制content script注入的时机。可以是document_start， document_end或者document_idle。默认document_idle。
  11.         "run_at":"document_start"
  12.        }
  13.  ],
  14.  //通过chrome.extension.getURL来获取包内资源的路径。需要在manifest.json文件中设置访问权限web_accessible_resources
  15.  "web_accessible_resources": [
  16.      "/contentScript/network.js"
  17.   ]

ok 这样我就添加了注入js的脚本命令、现在我们需要在相对应的路径下创建好文件夹和文件/contentScript/install.js 然后在contentScript文件夹下在创建一个network.js 和 install.js

install.js

  1. setTimeout(() => {
  2.     const script = document.createElement('script');
  3.     script.setAttribute('type', 'text/javascript');
  4.     //通过chrome.extension.getURL来获取包内资源的路径。需要在manifest.json文件中设置访问权限web_accessible_resources
  5.     script.setAttribute('src', chrome.extension.getURL('/contentScript/network.js'));
  6.     document.head.appendChild(script);
  7. });

重写请求拦截方法 network.js

  1. const tool = {
  2.     isString(value) {
  3.         return Object.prototype.toString.call(value) == '[object String]';
  4.     },
  5.     isPlainObject(obj) {
  6.         let hasOwn = Object.prototype.hasOwnProperty;
  7.         // Must be an Object.
  8.         if (!obj || typeof obj !== 'object' || obj.nodeType || isWindow(obj)) {
  9.             return false;
  10.         }
  11.         try {
  12.             if (obj.constructor && !hasOwn.call(obj, 'constructor') && !hasOwn.call(obj.constructor.prototype, 'isPrototypeOf')) {
  13.                 return false;
  14.             }
  15.         } catch (e) {
  16.             return false;
  17.         }
  18.         let key;
  19.         for (key in obj) {}
  20.         return key === undefined || hasOwn.call(obj, key);
  21.     }
  22. }
  24. //这个类是基于腾讯开源vconsole（https://github.com/Tencent/vConsole）、写的适用本插件的一个类
  25. class RewriteNetwork {
  26.     constructor() {
  27.         this.reqList = {}; // URL as key, request item as value
  28.         this._open = undefined; // the origin function
  29.         this._send = undefined;
  30.         this._setRequestHeader = undefined;
  31.         this.status = false;
  32.         this.mockAjax();
  33.         this.mockFetch();
  34.     }
  35.     onRemove() {
  36.         if (window.XMLHttpRequest) {
  37.             window.XMLHttpRequest.prototype.open = this._open;
  38.             window.XMLHttpRequest.prototype.send = this._send;
  39.             window.XMLHttpRequest.prototype.setRequestHeader = this._setRequestHeader;
  40.             this._open = undefined;
  41.             this._send = undefined;
  42.             this._setRequestHeader = undefined
  43.         }
  44.     }
  45.   /**
  46.    * mock ajax request
  47.    * @private
  48.    */
  49.   mockAjax() {
  50.     let _XMLHttpRequest = window.XMLHttpRequest;
  51.     if (!_XMLHttpRequest) { return; }
  52.     const that = this;
  53.     //保存原生_XMLHttpRequest方法、用于下方重写
  54.     const _open = window.XMLHttpRequest.prototype.open,
  55.           _send = window.XMLHttpRequest.prototype.send,
  56.           _setRequestHeader = window.XMLHttpRequest.prototype.setRequestHeader;
  57.     that._open = _open;
  58.     that._send = _send;
  59.     that._setRequestHeader = _setRequestHeader;
  60.     //重写设置请求头open
  61.     window.XMLHttpRequest.prototype.open = function() {
  62.         let XMLReq = this;
  63.         let args = [].slice.call(arguments),
  64.             method = args[0],
  65.             url = args[1],
  66.             id = that.getUniqueID();
  67.         let timer = null;
  69.         // may be used by other functions
  70.         XMLReq._requestID = id;
  71.         XMLReq._method = method;
  72.         XMLReq._url = url;
  74.         // mock onreadystatechange
  75.         let _onreadystatechange = XMLReq.onreadystatechange || function() {};
  76.         //定时轮询去查看状态 每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时，它也可能调用多次。
  77.         let onreadystatechange = function() {
  78.             let item = that.reqList[id] || {};
  80.             //恢复初始化
  81.             item.readyState = XMLReq.readyState;
  82.             item.status = 0;
  83.             //同步XMLReq状态
  84.             if (XMLReq.readyState > 1) {
  85.                 item.status = XMLReq.status;
  86.             }
  87.             item.responseType = XMLReq.responseType;
  88.             //初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
  89.             if (XMLReq.readyState == 0) {
  90.                 if (!item.startTime) {
  91.                     item.startTime = (+new Date());
  92.                 }
  93.                 //open() 方法已调用，但是 send() 方法未调用。请求还没有被发送
  94.             } else if (XMLReq.readyState == 1) {
  95.                 if (!item.startTime) {
  96.                     item.startTime = (+new Date());
  97.                 }
  98.             //Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
  99.             } else if (XMLReq.readyState == 2) {
  100.                 // HEADERS_RECEIVED
  101.                 item.header = {};
  102.                 let header = XMLReq.getAllResponseHeaders() || '',
  103.                     headerArr = header.split("\n");
  104.                 // extract plain text to key-value format
  105.                 for (let i=0; i<headerArr.length; i++) {
  106.                     let line = headerArr[i];
  107.                     if (!line) { continue; }
  108.                     let arr = line.split(': ');
  109.                     let key = arr[0],
  110.                         value = arr.slice(1).join(': ');
  111.                     item.header[key] = value;
  112.                 }
  113.             //所有响应头部都已经接收到。响应体开始接收但未完成
  114.             } else if (XMLReq.readyState == 3) {
  115.                  //HTTP 响应已经完全接收。
  116.             } else if (XMLReq.readyState == 4) {
  117.                 clearInterval(timer);
  118.                 item.endTime = +new Date(),
  119.                 item.costTime = item.endTime - (item.startTime || item.endTime);
  120.                 item.response = XMLReq.response;
  121.                 item.method = XMLReq._method;
  122.                 item.url = XMLReq._url;
  123.                 item.req_type = 'xml';
  124.                 item.getData = XMLReq.getData;
  125.                 item.postData = XMLReq.postData;
  126.                 that.filterData(item)
  127.             } else {
  128.                 clearInterval(timer);
  129.             }
  130.         return _onreadystatechange.apply(XMLReq, arguments);
  131.       };
  132.       XMLReq.onreadystatechange = onreadystatechange;
  134.       //轮询查询状态
  135.       let preState = -1;
  136.       timer = setInterval(function() {
  137.         if (preState != XMLReq.readyState) {
  138.           preState = XMLReq.readyState;
  139.           onreadystatechange.call(XMLReq);
  140.         }
  141.       }, 10);
  143.       return _open.apply(XMLReq, args);
  144.     };
  146.     // 重写设置请求头setRequestHeader
  147.     window.XMLHttpRequest.prototype.setRequestHeader = function() {
  148.         const XMLReq = this;
  149.         const args = [].slice.call(arguments);
  151.         const item = that.reqList[XMLReq._requestID];
  152.         if (item) {
  153.             if (!item.requestHeader) { item.requestHeader = {}; }
  154.             item.requestHeader[args[0]] = args[1];
  155.         }
  156.         return _setRequestHeader.apply(XMLReq, args);
  157.     };
  159.     // 重写send
  160.     window.XMLHttpRequest.prototype.send = function() {
  161.         let XMLReq = this;
  162.         let args = [].slice.call(arguments),
  163.             data = args[0];
  165.         let item = that.reqList[XMLReq._requestID] || {};
  166.         item.method = XMLReq._method ? XMLReq._method.toUpperCase() : 'GET';
  168.         let query = XMLReq._url ? XMLReq._url.split('?') : []; // a.php?b=c&d=?e => ['a.php', 'b=c&d=', 'e']
  169.         item.url = XMLReq._url || '';
  170.         item.name = query.shift() || ''; // => ['b=c&d=', 'e']
  171.         item.name = item.name.replace(new RegExp('[/]*$'), '').split('/').pop() || '';
  173.         if (query.length > 0) {
  174.             item.name += '?' + query;
  175.             item.getData = {};
  176.             query = query.join('?'); // => 'b=c&d=?e'
  177.             query = query.split('&'); // => ['b=c', 'd=?e']
  178.             for (let q of query) {
  179.             q = q.split('=');
  180.             item.getData[ q[0] ] = decodeURIComponent(q[1]);
  181.             }
  182.         }
  183.         if (item.method == 'POST') {
  184.             // save POST data
  185.             if (tool.isString(data)) {
  186.                 let arr = data.split('&');
  187.                 item.postData = {};
  188.                 for (let q of arr) {
  189.                     q = q.split('=');
  190.                     item.postData[ q[0] ] = q[1];
  191.                 }
  192.             } else if (tool.isPlainObject(data)) {
  193.                 item.postData = data;
  194.             } else {
  195.                 item.postData = '[object Object]';
  196.             }
  198.         }
  199.         XMLReq.getData = item.getData || "";
  200.         XMLReq.postData = item.postData || "";
  201.         return _send.apply(XMLReq, args);
  202.     };
  204.   };
  206.   /**
  207.    * mock fetch request
  208.    * @private
  209.    */
  210.   mockFetch() {
  211.     const _fetch = window.fetch;
  212.     if (!_fetch) { return ""; }
  213.     const that = this;
  215.     const prevFetch = function(input, init){
  216.       let id = that.getUniqueID();
  217.       that.reqList[id] = {};
  218.       let item = that.reqList[id] || {};
  219.       let query = [],
  220.           url = '',
  221.           method = 'GET',
  222.           requestHeader = null;
  223.       // handle `input` content
  224.       if (tool.isString(input)) { // when `input` is a string
  225.         method = init.method ? init.method : 'GET';
  226.         url = input;
  227.         requestHeader = init.headers ? init.headers : null
  228.       } else { // when `input` is a `Request` object
  229.         method = input.method || 'GET';
  230.         url = input.url;
  231.         requestHeader = input.headers;
  232.       }
  234.       query = url.split('?');
  236.       item.id = id;
  237.       item.method = method;
  238.       item.requestHeader = requestHeader;
  239.       item.url = url;
  240.       item.name = query.shift() || '';
  241.       item.name = item.name.replace(new RegExp('[/]*$'), '').split('/').pop() || '';
  243.       if (query.length > 0) {
  244.         item.name += '?' + query;
  245.         item.getData = {};
  246.         query = query.join('?'); // => 'b=c&d=?e'
  247.         query = query.split('&'); // => ['b=c', 'd=?e']
  248.         for (let q of query) {
  249.           q = q.split('=');
  250.           item.getData[ q[0] ] = q[1];
  251.         }
  252.       }
  254.       if (item.method === "post") { 
  255.         if (tool.isString(input)) {
  256.           if (tool.isString(init.body && init.body)) {
  257.             let arr = init.body.split('&');
  258.             item.postData = {};
  259.             for (let q of arr) {
  260.               q = q.split('=');
  261.               item.postData[ q[0] ] = q[1];
  262.             }
  263.           } else if (tool.isPlainObject(init.body && init.body)) {
  264.             item.postData = init.body && init.body;
  265.           } else {
  266.             item.postData = '[object Object]';
  267.           }
  268.         } else { 
  269.           item.postData = '[object Object]';
  270.         }
  271.       }
  272.     //   UNSENT
  273.         if (!item.startTime) {  item.startTime = (+new Date()); }
  274.         return _fetch(url, init).then((response) => {
  275.             response.clone().json().then((json) => {
  276.                 item.endTime = +new Date(),
  277.                 item.costTime = item.endTime - (item.startTime || item.endTime);
  278.                 item.status = response.status;
  279.                 item.header = {};
  280.                 for (let pair of response.headers.entries()) {
  281.                     item.header[pair[0]] = pair[1];
  282.                 }
  283.                 item.response = json;
  284.                 item.readyState = 4;
  285.                 const contentType = response.headers.get('content-type');
  286.                 item.responseType  = contentType.includes('application/json') ? 'json' : contentType.includes('text/html') ? 'text' : '';
  287.                 item.req_type = 'fetch';
  288.                 that.filterData(item)
  289.                 return json;
  290.             })
  291.             return response;
  292.         })
  293.     }
  294.     window.fetch = prevFetch;
  295.   }
  297.     filterData({ url,method,req_type,response,getData,postData}){
  298.         if(!url) return;
  299.         const req_data = {
  300.             url,
  301.             method,
  302.             req_type,
  303.             response,
  304.             getData, //query参数
  305.             postData
  306.         }
  307.         console.log('拦截的结果',req_data)
  308.     }
  310.   /**
  311.    * generate an unique id string (32)
  312.    * @private
  313.    * @return string
  314.    */
  315.   getUniqueID() {
  316.     let id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
  317.         let r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
  318.         return v.toString(16);
  319.     });
  320.     return id;
  321.   }
  322. }
  324. const network = new RewriteNetwork();

随便打开一个测试网站、f12打开控制台然后里面就会有拦截的结果输出、这样我们就完成了页面接口拦截了、接下来我们就需要完成、插件与页面的互相通信、做对应操作

问题2：插件与页面的互相通信

  • inject_js(实际插入到页面的js) 与 content_script通信 ```javascript //inject_js利用postMessage方法和content_script进行通信、在拦截请求的方法里面去发送数据给content_script //network.js const senMes = (data) =>{ window.postMessage(data, ‘*’); } …. console.log(‘拦截的结果’,req_data) senMes(req_data)

//install.js //接收inject页面消息 …. window.addEventListener(“message”, function(e){ const { data } = e; console.log(‘接收networkJS数据’,data) }, false);

  2. - content_script 与 background（后台永久注入服务）通信
  4. ```javascript
  5. //content_script/install.js
  6. const sendBgMessage = (data) =>{
  7.     chrome.runtime.sendMessage({ type:'page_request',data}, function(response) {
  8.         console.log('后台的回复：' + response);
  9.     });
  10. }
  11. //background（后台永久注入服务）接收
  12. chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
  13.     console.log('background接收数据',request)
  14.     //答复
  15.     sendResponse('bg后台收到消息')
  16. });
  • browser_action页面与 background.js通信、基本差不多
  1. //browser_action页面js
  2. const sendMes = (data) =>{
  3.     return new Promise( resolve =>{
  4.         chrome.runtime.sendMessage( data, (res)=> {  resolve(res) });
  5.     })
  6. }
  8. //background（后台永久注入服务）接收
  9. chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
  10.     console.log('background接收数据',request)
  11.     //答复
  12.     sendResponse('bg后台收到消息')
  13. });

完结

基本上一些核心的内容都在这里、接下来就是根据自己的实际业务场景去配置去完成他 、下面我把开发文档贴出来

chrome中文文档

chrome英文文档