Extends the Chrome Developer Tools, adding a new Network Panel in the Developer Tools window with better searching and response previews.
https://leviolson.com/posts/chrome-ext-better-network-panel
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
247 lines
9.5 KiB
247 lines
9.5 KiB
var BNPChrome = angular
|
|
.module("BNPChrome", [])
|
|
.factory("parse", function () {
|
|
function convertToJSON(input) {
|
|
let jsonString;
|
|
|
|
// Try to parse the input as JSON
|
|
try {
|
|
jsonString = JSON.parse(input);
|
|
return jsonString;
|
|
} catch (error) {
|
|
// Parsing failed, assume input is a query string
|
|
}
|
|
|
|
// Decode URL-encoded string n times until no more encoding is found
|
|
let decodedInput = decodeURIComponent(input);
|
|
while (decodedInput !== input) {
|
|
input = decodedInput;
|
|
decodedInput = decodeURIComponent(input);
|
|
}
|
|
|
|
// Convert the query string to a JSON object
|
|
const keyValuePairs = input.split('&');
|
|
const jsonObject = {};
|
|
|
|
keyValuePairs.forEach(keyValuePair => {
|
|
const [key, value] = keyValuePair.split('=');
|
|
jsonObject[key] = value;
|
|
});
|
|
|
|
return jsonObject;
|
|
}
|
|
|
|
function queryStringToJson(queryString) {
|
|
let decoded = decodeURIComponent(queryString);
|
|
let pairs = decoded.split('&');
|
|
let result = {};
|
|
pairs.forEach(function(pair) {
|
|
pair = pair.split('=');
|
|
let name = pair[0];
|
|
let value = pair[1];
|
|
if (name.length > 0) {
|
|
name = name.replace(/\[([^\]]*)\]/g, function($0, $1) {
|
|
if ($1.length > 0) {
|
|
return "." + $1;
|
|
} else {
|
|
return "";
|
|
}
|
|
});
|
|
try {
|
|
value = decodeURIComponent(value);
|
|
} catch (e) {
|
|
// Do nothing, use the original value instead
|
|
}
|
|
let keys = name.split('.');
|
|
let obj = result;
|
|
let key;
|
|
while ((key = keys.shift())) {
|
|
if (keys.length === 0) {
|
|
if (obj[key] === undefined) {
|
|
obj[key] = value;
|
|
} else if (Array.isArray(obj[key])) {
|
|
obj[key].push(value);
|
|
} else {
|
|
obj[key] = [obj[key], value];
|
|
}
|
|
} else {
|
|
if (obj[key] === undefined) {
|
|
obj[key] = {};
|
|
}
|
|
obj = obj[key];
|
|
}
|
|
}
|
|
}
|
|
});
|
|
return result;
|
|
}
|
|
|
|
const parseQueryParams = function(queryString) {
|
|
// Extract query params using a regular expression
|
|
const params = queryString.split('&');
|
|
if (params.length == 0) return queryString;
|
|
|
|
const queryParams = {};
|
|
for (let i = 0; i < params.length; i++) {
|
|
let [key, value] = params[i].split('=');
|
|
let decodedInput = decodeURIComponent(value);
|
|
while (decodedInput !== value) {
|
|
value = decodedInput;
|
|
decodedInput = decodeURIComponent(value);
|
|
}
|
|
queryParams[key] = decodedInput;
|
|
}
|
|
return queryParams;
|
|
};
|
|
const parser = function (input, depth, maxDepth) {
|
|
// If the input is a string, try to parse it as JSON
|
|
if (typeof input === 'string') {
|
|
try {
|
|
return parser(JSON.parse(input), depth + 1, maxDepth);
|
|
} catch (err) {
|
|
// If the input is not valid JSON return the input
|
|
return input
|
|
}
|
|
}
|
|
|
|
// If the input is an array, recursively parse each item in the array
|
|
if (Array.isArray(input)) {
|
|
return input.map(item => parser(item, depth + 1, maxDepth));
|
|
}
|
|
|
|
// If the input is an object, recursively parse each value in the object
|
|
if (typeof input === 'object') {
|
|
const parsedJson = {};
|
|
for (const [key, value] of Object.entries(input)) {
|
|
if (typeof value === 'string') {
|
|
// If the value is a string, then it might be a serialized JSON string, so try to parse it
|
|
try {
|
|
parsedJson[key] = parser(JSON.parse(value), depth + 1, maxDepth);
|
|
} catch (err) {
|
|
if (value.includes("&") && value.includes("="))
|
|
parsedJson[key] = parser(convertToJSON(value), depth + 1, maxDepth);
|
|
else
|
|
parsedJson[key] = value;
|
|
}
|
|
} else {
|
|
// If the value is not a string, recursively parse it
|
|
parsedJson[key] = parser(value, depth + 1, maxDepth);
|
|
}
|
|
}
|
|
return parsedJson;
|
|
}
|
|
|
|
// If the input is not a string, array, or object, return it unchanged
|
|
return input;
|
|
};
|
|
|
|
return parser;
|
|
})
|
|
.directive("prettyPrint", function (parse) {
|
|
return {
|
|
restrict: "E",
|
|
replace: true,
|
|
transclude: false,
|
|
scope: { data: "=data" },
|
|
link: function (scope, element, attrs) {
|
|
let data = scope.data;
|
|
let $el = $("<div></div>");
|
|
|
|
if (data === true) {
|
|
data = "<i>true</i>";
|
|
} else if (data === false) {
|
|
data = "<i>false</i>";
|
|
} else if (data === undefined) {
|
|
data = "<i>undefined</i>";
|
|
} else if (data === null) {
|
|
data = "<i>null</i>";
|
|
} else if (typeof data === "number") {
|
|
// skip (i.e. do default)
|
|
} else if (typeof data === "string" && (data[0] === "{" || data[0] === "[")) {
|
|
$el = $("<pre></pre>");
|
|
data = JSON.stringify(parse(data, 0), null, 4);
|
|
} else if (typeof data === "string") {
|
|
// i.e. a string but not a JSON stringified string
|
|
data = $("<div>").text(data).html();
|
|
}
|
|
|
|
$el.html(data);
|
|
|
|
element.replaceWith($el);
|
|
}
|
|
};
|
|
})
|
|
.directive("resizableColumns", function () {
|
|
return {
|
|
link: function (scope, element, attrs) {
|
|
const options = { minWidth: 5 };
|
|
|
|
if ($(element).data("resizable-columns-sync")) {
|
|
var $target = $($(element).data("resizable-columns-sync"));
|
|
|
|
$(element).on("column:resize", function (
|
|
event,
|
|
resizable,
|
|
$leftColumn,
|
|
$rightColumn,
|
|
widthLeft,
|
|
widthRight
|
|
) {
|
|
var leftColumnIndex = resizable.$table
|
|
.find(".rc-column-resizing")
|
|
.parent()
|
|
.find("td, th")
|
|
.index($leftColumn);
|
|
|
|
var $targetFirstRow = $target.find("tr:first");
|
|
|
|
$($targetFirstRow.find("td, th").get(leftColumnIndex)).css("width", widthLeft + "%");
|
|
$($targetFirstRow.find("td, th").get(leftColumnIndex + 1)).css("width", widthRight + "%");
|
|
|
|
$target.data("resizableColumns").syncHandleWidths();
|
|
$target.data("resizableColumns").saveColumnWidths();
|
|
});
|
|
// $(window).on("resize", function () {
|
|
// // console.log('resize event');
|
|
// // var $target = $($(element).data("resizable-columns-sync"));
|
|
// // $target.data("resizableColumns").refreshHeaders();
|
|
// // $(element).resizableColumns(options);
|
|
// })
|
|
}
|
|
|
|
$(element).resizableColumns(options);
|
|
}
|
|
};
|
|
})
|
|
.directive("scrollToNew", function () {
|
|
return function (scope, element, attrs) {
|
|
if (scope.scrollToNew && scope.$last) {
|
|
const $container = $(element).parents(".data-container").first();
|
|
const $parent = $(element).parent();
|
|
|
|
$container.scrollTop($parent.height());
|
|
}
|
|
};
|
|
}).directive('onSearch', function () {
|
|
return function (scope, element, attrs) {
|
|
element.bind("keypress", function (event) {
|
|
if((event.shiftKey && event.which === 220) || event.which === 13 || event.which === 44 || event.which === 124) {
|
|
scope.$apply(function (){
|
|
scope.$eval(attrs.onSearch);
|
|
});
|
|
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
};
|
|
}).directive('ngRightClick', function() {
|
|
return function(scope, element, attrs) {
|
|
element.bind('contextmenu', function(event) {
|
|
scope.$apply(function() {
|
|
scope.$eval(attrs.ngRightClick);
|
|
});
|
|
|
|
event.preventDefault();
|
|
});
|
|
};
|
|
});
|