Storage Monitor/Debugger Hook

用于监控js对localStorage/sessionStorage的任何操作，或者在符合给定条件时进入断点
安裝腳本 ?
換行
// ==UserScript==
// @name         Storage Monitor/Debugger Hook
// @namespace    https://github.com/CC11001100/crawler-js-hook-framework-public/tree/master/005-storage-hook
// @version      0.1
// @description  用于监控js对localStorage/sessionStorage的任何操作，或者在符合给定条件时进入断点
// @document     https://github.com/CC11001100/crawler-js-hook-framework-public/tree/master/005-storage-hook
// @author       CC11001100
// @match       *://*/*
// @run-at      document-start
// @grant       none
// ==/UserScript==
(() => {
 
    // 简介： 用于检测、调试浏览器中的localStorage和sessionStorage的任何操作
    // 本工具详细文档见：
    // Storage是什么： https://developer.mozilla.org/zh-CN/docs/Web/API/Storage
 
    // 修改这里来打断点
    const storageDebuggerList = [
        "947e722bbefb8a455c278113042beadb",
 
        // 允许使用字符串，字符串用来对name做完全相等的匹配
        // 对LocalStorage或SessionStorage的key为foo-name进行的任何操作都会进入断点
        // "foo-name",
 
        // 字符串形式的增强版，允许使用正则表达式，正则表达式只用来匹配name
        // /^foo-prefix*/,
 
        // 这才是一个完整的配置，可以比较精细的打断点
        // {
        //
        //     // storageType { "local" | "session" | "all" }
        //     "storageType": "all",
        //
        //     // operationType { "get" | "set" | "remove" | "clear" | "key" | "all" }
        //     "operationType": "all",
        //
        //     // nameFilter { "string" | RegExp | null }
        //     "nameFilter": "foo-name",
        //
        //     // valueFilter { "string" | RegExp | null }
        //     "valueFilter": "foo-value"
        //
        // }
    ]
 
    // 可以禁用storage来辅助调试，不需要每次都去傻啦吧唧的删除，让它写不进去读不出来即可
    // 可以这样同时控制localStorage和sessionStorage是否可读和可写
    const enableStorage = {
        read: true,
        write: true
    }
 
    // 支持的另一种配置方式：
    // 也可以精确的为每一个类型指定可读和可写
    // const enableStorage = {
    //     localStorage: {
    //         // localStorage是否是可读的
    //         read: true,
    //         // localStorage是否是可写的
    //         write: true
    //     },
    //     sessionStorage: {
    //         // sessionStorage是否是可读的
    //         read: true,
    //         // sessionStorage是否是可写的
    //         write: true
    //     }
    // }
 
    // 在控制台打印日志时字体大小，根据自己喜好调整
    // 众所周知，12px是宇宙通用大小
    const consoleLogFontSize = 12;
 
    // --------------------------------- 以下为程序内部逻辑，可忽略 ---------------------------------------------
 
    // 防止重复注入
    const _cc11001100_hook_storage = window._cc11001100_hook_storage = window._cc11001100_hook_storage || {};
    if ("isInjectHook" in _cc11001100_hook_storage) {
        return
    }
    _cc11001100_hook_storage["isInjectHook"] = true
 
    addHook("session", window.sessionStorage);
    addHook("local", window.localStorage);
 
    /**
     * 为一个storage对象添加Hook，可以是localStorage或者sessionStorage
     *
     * @param storageTypeName { "local" | "session" }
     * @param storageObject { window.localStorage | window.sessionStorage}
     */
    function addHook(storageTypeName, storageObject) {
 
        // getItem
        const storageGetItem = storageObject.getItem;
        storageObject.getItem = function (itemName) {
            const itemValue = storageGetItem.apply(this, [itemName]);
 
            const valueStyle = `color: black; background: #85C1E9; font-size: ${consoleLogFontSize}px; font-weight: bold;`;
            const normalStyle = `color: black; background: #D6EAF8; font-size: ${consoleLogFontSize}px;`;
 
            const message = [
 
                normalStyle,
                now(),
 
                normalStyle,
                "Storage Monitor: ",
 
                valueStyle,
                "get",
 
                normalStyle,
                " ",
 
                valueStyle,
                `${storageTypeName} storage`,
 
                normalStyle,
                ", name = ",
 
                valueStyle,
                `${itemName}`,
 
                normalStyle,
                ", value = ",
 
                valueStyle,
                `${itemValue}`,
 
                normalStyle,
                `, code location = ${cc11001100_getCodeLocation()}`
            ];
            console.log(genFormatArray(message), ...message);
 
            testStorageDebugger(storageTypeName, "get", itemName, itemValue);
 
            // 如果关闭读功能的话，则阻止其能够读到值
            if (!isStorageEnable(storageTypeName, "read")) {
                const message = [
 
                    normalStyle,
                    now(),
 
                    normalStyle,
                    "Storage Monitor: ",
 
                    normalStyle,
                    "ignore ",
 
                    valueStyle,
                    "get",
 
                    normalStyle,
                    ` because disable `,
 
                    valueStyle,
                    `${storageTypeName}`,
 
                    normalStyle,
                    " ",
 
                    valueStyle,
                    "read",
 
                    normalStyle,
                    `, code location = ${cc11001100_getCodeLocation()}`
                ];
                console.log(genFormatArray(message), ...message);
                return null;
            }
 
 
 
            return itemValue;
        }
        storageObject.getItem.toString = () => "function getItem() { [native code] }";
 
        // setItem
        const storageSetItem = storageObject.setItem;
        storageObject.setItem = function (itemName, itemValue) {
 
            const oldValue = storageGetItem.apply(this, [itemName]);
 
            let valueStyle = "";
            let normalStyle = "";
 
            if (oldValue == null) {
                // 认为是新增
                valueStyle = `color: black; background: #669934; font-size: ${consoleLogFontSize}px; font-weight: bold;`;
                normalStyle = `color: black; background: #65CC66; font-size: ${consoleLogFontSize}px;`;
 
                const message = [
 
                    normalStyle,
                    now(),
 
                    normalStyle,
                    "Storage Monitor: ",
 
                    valueStyle,
                    "set",
 
                    normalStyle,
                    " ",
 
                    valueStyle,
                    `${storageTypeName} storage`,
 
                    normalStyle,
                    ", name = ",
 
                    valueStyle,
                    `${itemName}`,
 
                    normalStyle,
                    ", value = ",
 
                    valueStyle,
                    `${itemValue}`,
 
                    normalStyle,
                    `, code location = ${cc11001100_getCodeLocation()}`
                ];
                console.log(genFormatArray(message), ...message);
            } else {
                // 认为是修改
                valueStyle = `color: black; background: #FE9900; font-size: ${consoleLogFontSize}px; font-weight: bold;`;
                normalStyle = `color: black; background: #FFCC00; font-size: ${consoleLogFontSize}px;`;
 
                const message = [
 
                    normalStyle,
                    now(),
 
                    normalStyle,
                    "Storage Monitor: ",
 
                    valueStyle,
                    "set",
 
                    normalStyle,
                    " ",
 
                    valueStyle,
                    `${storageTypeName} storage`,
 
                    normalStyle,
                    ", name = ",
 
                    valueStyle,
                    `${itemName}`,
 
                    normalStyle,
                    ", newValue = ",
 
                    valueStyle,
                    `${itemValue}`,
 
                    ...(() => {
                        if (oldValue === itemValue) {
                            // 值没有发生改变
                            return [
                                normalStyle,
                                ", value changed = ",
 
                                valueStyle,
                                `false`
                            ]
                        } else {
                            // 值发生了改变
                            return [
                                normalStyle,
                                ", oldValue = ",
 
                                valueStyle,
                                `${oldValue}`,
 
                                normalStyle,
                                ", value changed = ",
 
                                valueStyle,
                                `true`
                            ]
                        }
                    })(),
 
                    normalStyle,
                    `, code location = ${cc11001100_getCodeLocation()}`
                ];
                console.log(genFormatArray(message), ...message);
            }
 
            testStorageDebugger(storageTypeName, "set", itemName, itemValue);
 
            // 如果关闭写功能的话，则阻止其能够修改值
            if (!isStorageEnable(storageTypeName, "write")) {
                const message = [
 
                    normalStyle,
                    now(),
 
                    normalStyle,
                    "Storage Monitor: ",
 
                    normalStyle,
                    "ignore ",
 
                    valueStyle,
                    "set",
 
                    normalStyle,
                    ` because disable `,
 
                    valueStyle,
                    `${storageTypeName}`,
 
                    normalStyle,
                    " ",
 
                    valueStyle,
                    "write",
 
                    normalStyle,
                    `, code location = ${cc11001100_getCodeLocation()}`
                ];
                console.log(genFormatArray(message), ...message);
                return null;
            }
 
            return storageSetItem.apply(this, [itemName, itemValue]);
        }
        storageObject.setItem.toString = () => "function setItem() { [native code] }";
 
        // removeItem
        const storageRemoveItem = storageObject.removeItem;
        storageObject.removeItem = function (itemName) {
 
            const oldValue = storageGetItem.apply(this, [itemName]);
 
            const valueStyle = `color: black; background: #E50000; font-size: ${consoleLogFontSize}px; font-weight: bold;`;
            const normalStyle = `color: black; background: #FF6766; font-size: ${consoleLogFontSize}px;`;
 
            const message = [
 
                normalStyle,
                now(),
 
                normalStyle,
                "Storage Monitor: ",
 
                valueStyle,
                "remove",
 
                normalStyle,
                " ",
 
                valueStyle,
                `${storageTypeName} storage`,
 
                normalStyle,
                ", name = ",
 
                valueStyle,
                `${itemName}`,
 
                normalStyle,
                ", value = ",
 
                valueStyle,
                `${oldValue}`,
 
                normalStyle,
                `, code location = ${cc11001100_getCodeLocation()}`
            ];
            console.log(genFormatArray(message), ...message);
 
            testStorageDebugger(storageTypeName, "remove", itemName, null);
 
            // 如果关闭写功能的话，则阻止其能够修改值
            if (!isStorageEnable(storageTypeName, "write")) {
                const message = [
 
                    normalStyle,
                    now(),
 
                    normalStyle,
                    "Storage Monitor: ",
 
                    normalStyle,
                    "ignore ",
 
                    valueStyle,
                    "remove",
 
                    normalStyle,
                    ` because disable `,
 
                    valueStyle,
                    `${storageTypeName}`,
 
                    normalStyle,
                    " ",
 
                    valueStyle,
                    "write",
 
                    normalStyle,
                    `, code location = ${cc11001100_getCodeLocation()}`
                ];
                console.log(genFormatArray(message), ...message);
                return null;
            }
 
            return storageRemoveItem.apply(this, [itemName]);
        }
        storageObject.removeItem.toString = () => "function removeItem() { [native code] }";
 
        // clear
        const storageClear = storageObject.clear;
        storageObject.clear = function () {
 
            const valueStyle = `color: black; background: #E50000; font-size: ${consoleLogFontSize}px; font-weight: bold;`;
            const normalStyle = `color: black; background: #FF6766; font-size: ${consoleLogFontSize}px;`;
 
            const message = [
 
                normalStyle,
                now(),
 
                normalStyle,
                "Storage Monitor: ",
 
                valueStyle,
                "clear",
 
                normalStyle,
                " ",
 
                valueStyle,
                `${storageTypeName} storage`,
 
                normalStyle,
                `, code location = ${cc11001100_getCodeLocation()}`
            ];
            console.log(genFormatArray(message), ...message);
 
            testStorageDebugger(storageTypeName, "clear", null, null);
 
            // 如果关闭写功能的话，则阻止其能够修改值
            if (!isStorageEnable(storageTypeName, "write")) {
                const message = [
 
                    normalStyle,
                    now(),
 
                    normalStyle,
                    "Storage Monitor: ",
 
                    normalStyle,
                    "ignore ",
 
                    valueStyle,
                    "clear",
 
                    normalStyle,
                    ` because disable `,
 
                    valueStyle,
                    `${storageTypeName}`,
 
                    normalStyle,
                    " ",
 
                    valueStyle,
                    "write",
 
                    normalStyle,
                    `, code location = ${cc11001100_getCodeLocation()}`
                ];
                console.log(genFormatArray(message), ...message);
                return null;
            }
 
            return storageClear.apply(this);
        }
        storageObject.clear.toString = () => "function clear() { [native code] }";
 
        // key
        const storageKey = storageObject.key;
        storageObject.key = function (itemIndex) {
            const value = storageKey.apply(this, [itemIndex]);
 
            const valueStyle = `color: black; background: #85C1E9; font-size: ${consoleLogFontSize}px; font-weight: bold;`;
            const normalStyle = `color: black; background: #D6EAF8; font-size: ${consoleLogFontSize}px;`;
 
            const message = [
 
                normalStyle,
                now(),
 
                normalStyle,
                "Storage Monitor: ",
 
                valueStyle,
                `key`,
 
                normalStyle,
                " ",
 
                valueStyle,
                `${storageTypeName} storage`,
 
                normalStyle,
                `, itemIndex = `,
 
                valueStyle,
                `${itemIndex}`,
 
                normalStyle,
                ", value = ",
 
                valueStyle,
                `${value}`,
 
                normalStyle,
                `, code location = ${cc11001100_getCodeLocation()}`
            ];
            console.log(genFormatArray(message), ...message);
 
            testStorageDebugger(storageTypeName, "key", null, value);
 
            // 如果关闭读功能的话，则阻止其能够读到值
            if (!isStorageEnable(storageTypeName, "read")) {
                const message = [
 
                    normalStyle,
                    now(),
 
                    normalStyle,
                    "Storage Monitor: ",
 
                    normalStyle,
                    "ignore ",
 
                    valueStyle,
                    "key",
 
                    normalStyle,
                    ` because disable `,
 
                    valueStyle,
                    `${storageTypeName}`,
 
                    normalStyle,
                    " ",
 
                    valueStyle,
                    "read",
 
                    normalStyle,
                    `, code location = ${cc11001100_getCodeLocation()}`
                ];
                console.log(genFormatArray(message), ...message);
                return null;
            }
 
            return value;
        }
        storageObject.key.toString = () => "function key() { [native code] }";
 
    }
 
    /**
     * 对应类型的storage是否开启
     *
     * @param storageTypeName { "local" | "session" }
     * @param operationType { "read" | "write" }
     */
    function isStorageEnable(storageTypeName, operationType) {
        if (storageTypeName === "local") {
            return enableStorage["localStorage"][operationType]
        } else if (storageTypeName === "session") {
            return enableStorage["sessionStorage"][operationType]
        } else {
            return true
        }
    }
 
    /**
     * 测试是否要进入断点
     *
     * @param storageType { "local" | "session" | "all" }
     * @param operationType { "get" | "set" | "remove" | "clear" | "key" | "all" }
     * @param name { "string" | null }
     * @param value { "string" | null }
     */
    function testStorageDebugger(storageType, operationType, name, value) {
        for (let storageDebugger of storageDebuggerList) {
            // 将鼠标移动到这里在变量上悬停查看其值，能够知道是命中了什么规则
            if (storageDebugger.testDebugger(storageType, operationType, name, value)) {
                debugger;
            }
        }
    }
 
    // 断点规则
    class StorageDebugger {
 
        /**
         *
         * @param storageType { "local" | "session" | "all" }
         * @param operationType { "get" | "set" | "remove" | "clear" | "key" | "all" }
         * @param nameFilter { "string" | RegExp | null }
         * @param valueFilter { "string" | RegExp | null }
         */
        constructor(storageType, operationType, nameFilter, valueFilter) {
            this.storageType = storageType;
            this.operationType = operationType;
            this.nameFilter = nameFilter;
            this.valueFilter = valueFilter;
        }
 
        testDebugger(storageType, operationType, name, value) {
            if (!this.testByStorageType(storageType)) {
                return false
            }
            if (!this.testByOperationType(operationType)) {
                return false
            }
            if (this.nameFilter && !this.testByName(name)) {
                return false;
            }
            if (this.valueFilter && !this.testByValue(value)) {
                return false;
            }
            return true;
        }
 
        testByStorageType(storageType) {
            if (storageType === "all" || this.storageType === "all") {
                return true
            }
            return this.storageType === storageType;
        }
 
        testByOperationType(operationType) {
            if (operationType === "all" || this.operationType === "all") {
                return true
            }
            return this.operationType === operationType;
        }
 
        testByName(name) {
 
            if (!this.nameFilter) {
                return false
            }
 
            if (!name) {
                return false
            }
 
            if (typeof this.nameFilter === "string") {
                return this.nameFilter === name;
            } else if (typeof this.nameFilter instanceof RegExp) {
                return this.nameFilter.test(name)
            } else {
                return false;
            }
        }
 
        testByValue(value) {
 
            if (!this.valueFilter) {
                return false
            }
 
            if (!value) {
                return false
            }
 
            if (typeof this.valueFilter === "string") {
                return this.valueFilter === value;
            } else if (typeof this.valueFilter instanceof RegExp) {
                return this.valueFilter.test(value)
            } else {
                return false;
            }
        }
 
    }
 
    // 把storage的读写属性统一，方便后面程序处理
    (function convertEnableStorage() {
 
        // 设置默认值
        enableStorage["localStorage"] = enableStorage["localStorage"] || {}
        enableStorage["sessionStorage"] = enableStorage["sessionStorage"] || {}
 
        // 扩展read
        if ("read" in enableStorage) {
            enableStorage["localStorage"]["read"] = enableStorage["read"]
            enableStorage["sessionStorage"]["read"] = enableStorage["read"]
            delete enableStorage["read"]
        }
 
        // 扩展write
        if ("write" in enableStorage) {
            enableStorage["localStorage"]["write"] = enableStorage["write"]
            enableStorage["sessionStorage"]["write"] = enableStorage["write"]
            delete enableStorage["write"]
        }
 
        // 如果没有配置的话，则设置默认值
        if (!("write" in enableStorage["localStorage"])) {
            enableStorage["localStorage"]["write"] = true
        }
        if (!("read" in enableStorage["localStorage"])) {
            enableStorage["localStorage"]["read"] = true
        }
        if (!("write" in enableStorage["sessionStorage"])) {
            enableStorage["sessionStorage"]["write"] = true
        }
        if (!("read" in enableStorage["sessionStorage"])) {
            enableStorage["sessionStorage"]["read"] = true
        }
 
    })();
 
    // 把storage的断点规则转换为程序内部使用的格式
    (function convertStorageDebugger() {
        // const valueStyle = `color: black; background: #FF2121; font-size: ${Math.round(consoleLogFontSize * 1.5)}px; font-weight: bold;`;
        const normalStyle = `color: black; background: #FF2121; font-size: ${Math.round(consoleLogFontSize * 1.5)}px;`;
 
        const newStorageDebuggerList = [];
        for (let x of storageDebuggerList) {
            if (typeof x === "string" || x instanceof RegExp) {
                // 如果设置的是名字，则只针对按名称操作的操作打断点
                newStorageDebuggerList.push(new StorageDebugger("all", "get", x, null));
                newStorageDebuggerList.push(new StorageDebugger("all", "set", x, null));
                newStorageDebuggerList.push(new StorageDebugger("all", "remove", x, null));
            } else {
 
                // 检查设置项的合法性
                if ("storageType" in x && ["local", "session", "all"].indexOf(x["storageType"].toLowerCase()) === -1) {
                    const message = [
                        normalStyle,
                        `${now()} Storage Monitor: storageType error, value = ${x["storageType"]}, need to be = { "local", "session", "all" }, so ignore this debugger = ${JSON.stringify(x)}`,
                    ];
                    console.log(genFormatArray(message), ...message);
                    continue
                }
 
                if ("operationType" in x && ["get", "set", "remove", "clear", "key", "all"].indexOf(x["operationType"].toLowerCase()) === -1) {
                    const message = [
                        normalStyle,
                        `${now()} Storage Monitor: storageType error, value = ${x["operationType"]}, need to be { "get" | "set" | "remove" | "clear" | "key" | "all" }, so ignore this debugger = ${JSON.stringify(x)}`,
                    ];
                    console.log(genFormatArray(message), ...message);
                    continue
                }
 
                if (["nameFilter"] in x && (typeof x["nameFilter"] != "string") && !(x["nameFilter"] instanceof RegExp)) {
                    const message = [
                        normalStyle,
                        `${now()} Storage Monitor: nameFilter config error, value = ${x["nameFilter"]}, need to be { string | Regexp | null }, so ignore this debugger = ${JSON.stringify(x)}`,
                    ];
                    console.log(genFormatArray(message), ...message);
                    continue
                }
 
                if (["valueFilter"] in x && (typeof x["valueFilter"] != "string") && !(x["valueFilter"] instanceof RegExp)) {
                    const message = [
                        normalStyle,
                        `${now()} Storage Monitor: valueFilter config error, value = ${x["valueFilter"]}, need to be { string | Regexp | null }, so ignore this debugger = ${JSON.stringify(x)}`,
                    ];
                    console.log(genFormatArray(message), ...message);
                    continue
                }
 
                // TODO 出现了其它类型的key，是否配置错误呢？
 
                const storageType = x["storageType"] || "all";
 
                if ((x["name"] || x["value"]) && x["operationType"]) {
                    const name = x["name"] || null;
                    const value = x["value"] || null;
                    newStorageDebuggerList.push(new StorageDebugger("all", "get", name, value));
                    newStorageDebuggerList.push(new StorageDebugger("all", "set", name, value));
                    newStorageDebuggerList.push(new StorageDebugger("all", "remove", name, value));
                } else {
                    const operationType = x["operationType"] || "all";
                    const name = x["name"] || null;
                    const value = x["value"] || null;
                    newStorageDebuggerList.push(new StorageDebugger(storageType, operationType, name, value));
                }
            }
        }
 
        // 把原来的规则替换掉
        while (storageDebuggerList.pop()) {
        }
        for (let x of newStorageDebuggerList) {
            storageDebuggerList.push(x);
        }
    })();
 
    // 奇奇怪怪的模板方式竟然一路被沿用下来...(*/ω＼*)
    function genFormatArray(messageAndStyleArray) {
        const formatArray = [];
        for (let i = 0, end = messageAndStyleArray.length / 2; i < end; i++) {
            formatArray.push("%c%s");
        }
        return formatArray.join("");
    }
 
    function now() {
        // 东八区专属...
        return "[" + new Date(new Date().getTime() + 1000 * 60 * 60 * 8).toJSON().replace("T", " ").replace("Z", "") + "] ";
    }
 
    function cc11001100_getCodeLocation() {
        const callstack = new Error().stack.split("\n");
        while (callstack.length && callstack[0].indexOf("cc11001100_getCodeLocation") === -1) {
            callstack.shift();
        }
        callstack.shift();
        callstack.shift();
 
        return callstack[0].trim();
    }
 
})();