带界面的初始版

Author: toohamster

HttpMonitor.crx

@@ -420,54 +420,3 @@ Fmt.http = (function($$) {
 	}
 
 })(Fmt);
-
-// Fmt.getDownloadData = function(data) {
-// 	var rows = []
-// 	$.each(window.domainData, function() {
-// 		var d = this
-
-// 		var row = {
-// 			request: {
-// 				protocol: 'http',
-// 				url: d.url,
-// 				method: d.method,
-// 				contentType: d.contentType,
-// 				headers: [],
-// 				dataMode: 'params',
-// 				data: [],
-// 			},
-// 			response: {
-// 				headers: []
-// 			}
-// 		};
-
-// 		$.each(d.request, function(k, v) {
-// 			row.request.headers.push({
-// 				name: k,
-// 				value: v
-// 			})
-// 		})
-// 		$.each(d.response, function(k, v) {
-// 			row.response.headers.push({
-// 				name: k,
-// 				value: v
-// 			})
-// 		})
-
-// 		if ($.isPlainObject(d.post)) {
-// 			row.request.dataMode = 'params'
-// 			$.each(d.post, function(k, v) {
-// 				row.request.data.push({
-// 					name: k,
-// 					value: v
-// 				})
-// 			})
-// 		} else if ($.type(d.post) === "string") {
-// 			row.request.dataMode = 'raw'
-// 			row.request.data = d.post
-// 		}
-
-// 		rows.push(row)
-// 	})
-// 	return rows
-// }

src/Fmt.js

@@ -1,6 +1,14 @@
 var requestSent = {},
     outputData = initOutputData(),
     isCapturing = false,
+    enableCapturing = false,
+    popupPageId = null,
+    filterCond = {
+        banList: [],
+        allowList: [],
+        contentTypeList: ['Document', 'XHR']
+    },
+    removeIds = {},
     idleIconPath = './icon.png',
     recordingIconPath = './icon-rec.png';
 
@@ -16,21 +24,31 @@ function initOutputData() {
     }
 }
 
-function generateDate()
-{
+function generateDate() {
     var x = new Date();
     var y = x.getFullYear();
-    var m = x.getMonth()+1; m = m < 10 ? '0' + m : m;
-    var d = x.getDate(); d = d < 10 ? '0' + d : d;
-    var h = x.getHours(); h = h < 10 ? '0' + h : h;
-    var i = x.getMinutes(); i = i < 10 ? '0' + i : i;
-    var s = x.getSeconds(); s = s < 10 ? '0' + s : s;
+    var m = x.getMonth() + 1;
+    m = m < 10 ? '0' + m : m;
+    var d = x.getDate();
+    d = d < 10 ? '0' + d : d;
+    var h = x.getHours();
+    h = h < 10 ? '0' + h : h;
+    var i = x.getMinutes();
+    i = i < 10 ? '0' + i : i;
+    var s = x.getSeconds();
+    s = s < 10 ? '0' + s : s;
     return [y, m, d, 'T', h, i, s].join('')
 }
 
 function resetSession() {
     requestSent = {};
     outputData = initOutputData();
+    popupPageId = null;
+    filterCond = {
+        banList: [],
+        allowList: [],
+        contentTypeList: ['Document', 'XHR']
+    };
 }
 
 function toggle(currentTab) {
@@ -42,12 +60,15 @@ function toggle(currentTab) {
         startCapturing(target);
     } else {
         stopCapturing(target);
-        exportSession();
     }
     resetSession();
 
     isCapturing = !isCapturing;
 }
+
+chrome.browserAction.setTitle({
+    'title': "HttpMonitor"
+});
 chrome.browserAction.onClicked.addListener(toggle);
 
 function startCapturing(target) {
@@ -57,17 +78,24 @@ function startCapturing(target) {
     chrome.browserAction.setIcon({
         path: recordingIconPath
     });
+    openPopupPage();
+    // chrome.browserAction.setBadgeText({'text': 'ON'});    
 }
 
 function stopCapturing(target) {
     chrome.debugger.detach(target);
     chrome.browserAction.setIcon({
         path: idleIconPath
     });
+    closePopupPage();
+    enableCapturing = false;
+    // chrome.browserAction.setBadgeText({'text': ''});
 }
 
 function onDebuggerEvent(debugee, message, params) {
-
+    if (!enableCapturing) {
+        return true;
+    }
     if (message == "Network.requestWillBeSent") {
         requestSent[params.requestId] = params.request;
     } else if (message == "Network.responseReceived") {
@@ -77,14 +105,27 @@ function onDebuggerEvent(debugee, message, params) {
 
             var request = requestSent[params.requestId];
             if (!request) return;
-            outputData.requests.push(serializeRequest(params.type, request, params.response));
+            captureRequest(params.requestId, params.type, request, params.response);
         });
     }
 }
 
-function serializeRequest(callType, request, response) {
+function captureRequest(id, callType, request, response) {
+    var row = serializeRequest(id, callType, request, response);
+    outputData.requests.push(row);
+    delete requestSent[id];
+    chrome.runtime.sendMessage({
+        actionType: 'data',
+        data: outputData.requests,
+        removeIds: removeIds
+    }, function(response) {});
+}
+
+function serializeRequest(id, callType, request, response) {
 
+    id = (id + '').replace('.', '');
     return {
+        id: id,
         url: request.url,
         method: request.method,
         protocol: response.protocol,
@@ -103,14 +144,177 @@ function serializeRequest(callType, request, response) {
     }
 }
 
-function exportSession() {
-    if (outputData.requests.length < 1) return;
-    outputData.date = generateDate();
+function filterData(cond, requests) {
+
+    // 默认是全部显示
+    requests.forEach(function(d) {
+        d.hidden = false;
+    });
+    //校验Url 正则表达式
+    var urlReg = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/;
+    var allowList = cond.allowList || []
+    var banList = cond.banList || []
+    var contentTypeList = cond.contentTypeList || []
+
+    if (allowList.length > 0) { // 如果包含白名单，则只显示白名单的内容，其它全部隐藏
+
+        requests.forEach(function(d) {
+            d.hidden = true; // 默认设为 隐藏
+            // 只有允许列表中的域名才能被显示
+            var host = urlReg.exec(d.url);
+            var address = (host[0]);
+            allowList.forEach(function(item) {
+                if (address.indexOf(item) >= 0) {
+                    d.hidden = false;
+                }
+            })
+        });
+
+    } else if (banList.length > 0) { //如果只包含黑名单，则仅经用掉黑名单的域名
+
+        requests.forEach(function(d) {
+            d.hidden = false; // 默认设为 显示
+            // 只有允许列表中的域名才能被隐藏
+            var host = urlReg.exec(d.url);
+            var address = (host[0]);
+            banList.forEach(function(item) {
+                if (address.indexOf(item) >= 0) {
+                    d.hidden = true;
+                }
+            })
+        });
+    }
+
+    // 过滤内容类型 (仅对显示的请求数据进行过滤)
+    if (contentTypeList.length > 0) {
+        requests.forEach(function(d) {
+            if (!d.hidden) {
+                var findit = false
+                contentTypeList.forEach(function(item) {
+                    if (item === d.callType) {
+                        findit = true
+                        return false // 跳出循环
+                    }
+                })
+
+                if (!findit) {
+                    d.hidden = true
+                }
+            }
+        });
+    }
+
+    var fd = initOutputData();
+    requests.forEach(function(d) {
+        if (!d.hidden && !isRemove(d.id)) {
+            fd.requests.push(d);
+        }
+    });
+
+    return fd;
+}
+
+function exportSession(filter) {
+    var fd = filterData(filter, outputData.requests);
+    if (fd.requests.length < 1) return;
+    fd.date = generateDate();
 
-    var blob = new Blob([JSON.stringify(outputData, null, 2)], {
+    var blob = new Blob([JSON.stringify(fd, null, 2)], {
         type: "text/plain;charset=utf-8"
     });
 
-    var fileNameSuffix = outputData.date;
+    var fileNameSuffix = fd.date;
     saveAs(blob, "HttpMonitor" + fileNameSuffix + ".txt");
+}
+
+function openPopupPage() {
+    var urlPopup = 'ui/popup.html?version=' + chrome.app.getDetails().version;
+    //窗口参数
+    var openWinArgs = {
+        width: 1040, //parseInt(window.screen.availWidth / 2),
+        height: 440 //parseInt(window.screen.availHeight)
+    };
+
+    var createWinPopupData = {
+        url: urlPopup,
+        type: 'popup',
+        left: 0,
+        top: 0,
+        width: openWinArgs.width,
+        height: openWinArgs.height //parseInt(openWinArgs.height / 2)
+    };
+
+    chrome.windows.create(createWinPopupData, function(openWin) {
+        popupPageId = openWin.id;
+    });
+
+}
+
+function closePopupPage() {
+    if (popupPageId) {
+        chrome.windows.remove(popupPageId, function() {
+            popupPageId = null;
+        });
+    }
+}
+
+chrome.windows.onRemoved.addListener(function(winId) {
+    if (winId === popupPageId) {
+        // enableCapturing = false;
+    }
+});
+
+chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
+    var actionType = message.actionType;
+
+    switch (actionType) {
+        case 'start':
+            enableCapturing = true;
+            break;
+
+        case 'stop':
+            enableCapturing = false;
+            break;
+
+        case 'clean':
+            outputData = initOutputData();
+            break;
+
+        case 'delete':
+            removeData(message.id);
+            break;
+
+        case 'list':
+            break;
+
+        case 'download':
+            exportSession(message.filterCond);
+            break;
+
+        case 'log':
+            var log = message.log;
+            log(log);
+            break;
+
+        default:
+            alert('actionType is error');
+            break;
+    }
+
+});
+
+function removeData(id)
+{
+    var rid = "x:" + id;
+    removeIds[rid] = true;
+}
+
+function isRemove(id)
+{
+    var rid = "x:" + id;
+    return removeIds[rid] ? true : false;
+}
+
+function log(log) {
+
 }

src/background.js

@@ -1,11 +1,15 @@
 {
    "manifest_version": 2,
-   
+
    "name": "HttpMonitor",
    "description": "Monitor all HTTP/HTTPs traffic from your browser.",
    "version": "0.0.1",
    "author": "httpmonitor@lianzhi.com",
-   
+   "icons": {
+      "16": "icon-rec.png",
+      "48": "icon-rec.png",
+      "128": "icon-rec.png"
+   },
    "background": {
       "scripts": ["background.js", "FileSaver.min.js", "Fmt.js"]
    },
@@ -14,5 +18,5 @@
       "default_title": "HttpMonitor"
    },
    "offline_enabled": true,
-   "permissions": [ "webRequest", "webRequestBlocking", "tabs", "http://*/", "https://*/", "<all_urls>", "debugger" ]
-}
+   "permissions": ["webRequest", "webRequestBlocking", "tabs", "http://*/", "https://*/", "<all_urls>", "debugger", "storage"]
+}