feat: 增加配置页面

Author: CC11001100

fuck-hot-update.sh

@@ -13,9 +13,9 @@
   "author": "CC11001100 <CC11001100@qq.com>",
   "license": "MIT",
   "devDependencies": {
+    "current-script-polyfill": "^1.0.0",
     "webpack": "5.94.0",
     "webpack-cli": "^5.1.4",
-    "webpack-merge": "^5.9.0",
-    "current-script-polyfill": "^1.0.0"
+    "webpack-merge": "^5.9.0"
   }
 }

package.json

@@ -1,14 +1,16 @@
+const {DebuggerTester} = require("../debugger/debugger-tester");
+const {Debugger} = require("../debugger/debugger");
+const GM_config_name = "js-script-hook-config-name";
+
 /**
  * 支持的相关配置
  */
 class Config {
 
-    /**
-     *
-     * @param urlPattern {String | RegExp} 用于与script类型的请求的URL做匹配进入断点
-     * @param callbackFunctionParamName {String} 传递jsonp回调函数名字的参数，比如 "callback"
-     */
-    constructor(urlPattern, callbackFunctionParamName) {
+    constructor() {
+
+        // 默认为英文的操作界面
+        this.language = "english";
 
         // 让用户能够自己指定前缀，也许会有一些拥有感？之前ast hook好像就有个哥们喜欢这样干...
         this.prefix = "CC11001100";
@@ -18,13 +20,94 @@ class Config {
 
         // 是否忽略不是jsonp的请求
         this.isIgnoreNotJsonpRequest = true;
+
+        // 在打开配置页面的时候自动跳转到项目主页
+        this.autoJumpProjectSiteOnConfiguraion = true;
+
+        // 所有的断点
+        this.debuggers = [];
+    }
+
+    findDebuggerById(id) {
+        for (let debuggerInformation of this.debuggers) {
+            if (debuggerInformation.id === id) {
+                return debuggerInformation;
+            }
+        }
+        return null;
+    }
+
+    addDebugger(debuggerInformation) {
+        // TODO 2024-12-22 05:06:15 断点的有效性校验
+        this.debuggers.push(debuggerInformation);
+    }
+
+    removeDebuggerById(id) {
+        const newDebuggers = [];
+        for (let debuggerInformation of this.debuggers) {
+            if (debuggerInformation.id !== id) {
+                newDebuggers.push(debuggerInformation);
+            }
+        }
+        this.debuggers = newDebuggers;
     }
 
+    load() {
+        const configJsonString = GM_getValue(GM_config_name);
+        if (!configJsonString) {
+            return this;
+        }
+        const o = JSON.parse(configJsonString);
+        this.language = o.language;
+        this.prefix = o.prefix;
+        this.isIgnoreJsSuffixRequest = o.isIgnoreJsSuffixRequest;
+        this.isIgnoreNotJsonpRequest = o.isIgnoreNotJsonpRequest;
+        this.autoJumpProjectSiteOnConfiguraion = o.autoJumpProjectSiteOnConfiguraion;
+        this.debuggers = [];
+        for (let debuggerInformationObject of o.debuggers) {
+            const debuggerInformation = new Debugger();
+            debuggerInformation.id = debuggerInformationObject.id;
+            debuggerInformation.enable = debuggerInformationObject.enable;
+            debuggerInformation.urlPattern = debuggerInformationObject.urlPattern;
+            debuggerInformation.enableRequestDebugger = debuggerInformationObject.enableRequestDebugger;
+            debuggerInformation.enableResponseDebugger = debuggerInformationObject.enableResponseDebugger;
+            debuggerInformation.callbackFunctionParamName = debuggerInformationObject.callbackFunctionParamName;
+            debuggerInformation.comment = debuggerInformationObject.comment;
+            this.debuggers.push(debuggerInformation);
+        }
+        return this;
+    }
+
+    persist() {
+        const configJsonString = JSON.stringify(this);
+        GM_setValue(GM_config_name, configJsonString);
+    }
+
+    /**
+     * 执行测试所有断点，看看是否有条件命中啥的
+     *
+     * @param scriptContext {ScriptContext}
+     */
+    testAll(scriptContext) {
+        for (let jsonpDebugger of this.debuggers) {
+            new DebuggerTester().test(this, jsonpDebugger, scriptContext);
+        }
+    }
+
+}
+
+let globalConfig = new Config();
+
+function initConfig() {
+    globalConfig.load();
 }
 
-const globalConfig = new Config();
+function getGlobalConfig() {
+    return globalConfig;
+}
 
 module.exports = {
     Config,
-    globalConfig
+    initConfig,
+    getGlobalConfig
 }

src/config/config.js

@@ -0,0 +1,62 @@
+const {GlobalOptionsComponent} = require("./global-options-component");
+const {DebuggerManagerComponent} = require("./debugger-manager-component");
+const {getGlobalConfig} = require("../../config");
+const {getLanguage} = require("./language");
+
+/**
+ * 使用之前要签署用户协议
+ */
+class ConfigurationComponent {
+
+    constructor() {
+        this.modalHTML = `
+        <div id="cc11001100-js-script-hook-configuration-modal-window" style="display:none !important; position:fixed !important; left:0 !important; top:0 !important; width:100% !important; height:100% !important; background-color:rgba(0,0,0,0.85) !important; z-index:2147483646 !important; overflow-y:auto !important;">
+            <div class="js-script-hook-scrollable-div" style="display: flex; width: 930px !important; text-align: center !important; padding: 30px !important; margin: 10px !important; position:absolute !important; left:50% !important; top:50% !important; transform:translate(-50%, -50%) !important; background:white !important; border-radius:5px !important; box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important; max-width:80% !important; text-align:center !important; z-index:99999999999; !important">
+                <button id="cc11001100-js-script-hook-configuration-close-btn" style="position:absolute; right:8px; top:8px; cursor:pointer; padding:3px 6px; border:none; background-color:#f44336; color:white; border-radius:50%; font-size:10px;">×</button>
+                <div id="js-script-hook-configuration-content"></div>
+            </div>
+        </div>
+    `;
+    }
+
+    /**
+     * 展示配置界面
+     */
+    show() {
+
+        // i18n配置语言
+        let language = getLanguage(getGlobalConfig().language);
+
+        // 将模态框添加到body元素中
+        $(document.body).append($(this.modalHTML));
+
+        // 全局配置参数
+        const globalOptionsComponent = new GlobalOptionsComponent();
+        $("#js-script-hook-configuration-content").append(globalOptionsComponent.render(language, getGlobalConfig()));
+
+        // 断点参数
+        const debuggerManager = new DebuggerManagerComponent();
+        $("#js-script-hook-configuration-content").append(debuggerManager.render(language, getGlobalConfig().debuggers));
+
+        // 关闭按钮事件处理
+        document.getElementById("cc11001100-js-script-hook-configuration-close-btn").addEventListener('click', this.closeModalWindow);
+        document.getElementById("cc11001100-js-script-hook-configuration-modal-window").style.display = 'flex';
+    }
+
+    /**
+     * 隐藏模态框的函数
+     */
+    closeModalWindow() {
+        const element = document.getElementById("cc11001100-js-script-hook-configuration-modal-window");
+        if (element) {
+            element.parentNode.removeChild(element);
+        }
+    }
+
+}
+
+module.exports = {
+    ConfigurationComponent
+}
+
+