feat(scripts-tempaermonkey): add tempermonkey support, update browser…

… export

packages/scripts/README.md

@@ -1,6 +1,13 @@
 # ocsjs - scripts
+
 > ocsjs 脚本模块
 
-## 文件目录
-- `src/browser` : 浏览器js模块，使用 javascript 运行脚本，实现网课视频学习等功能。
-- `scr/nodejs`  : nodejs模块，使用 playwright 进行浏览器启动关闭运行等操作，配合 browser 模块的脚本进行使用。
+## 目录介绍
+
+-   `src/browser` : 浏览器 js 模块，使用 javascript 运行脚本，实现网课视频学习等功能。
+-   `src/tampermonkey` : 浏览器油猴模块，使用 [油猴-Tampermonkey](https://www.tampermonkey.net/) 运行脚本，搭配 browser 模块的脚本进行使用。
+-   `scr/nodejs` : nodejs 模块，使用 [playwright](https://github.com/microsoft/playwright) 进行浏览器启动关闭运行等操作，配合 browser 模块的脚本进行使用。
+
+## 使用方法
+
+https://github.com/enncy/online-course-script/tree/3.0#readme

packages/scripts/package.json

@@ -20,10 +20,6 @@
         "dotenv": "^16.0.0",
         "playwright": "^1.18.1"
     },
-    "devDependencies": {
-        "webpack": "^5.69.0",
-        "webpack-cli": "^4.9.2"
-    },
     "repository": {
         "type": "git",
         "url": "git+https://github.com/enncy/online-course-script.git"

packages/scripts/src/browser.entry.ts

@@ -0,0 +1,17 @@
+/**
+ * Browser API.
+ *
+ * this file is entry of webpack.
+ *
+ * includes all the function of web script.
+ */
+
+export * from "./browser";
+export * from "./tampermonkey";
+
+import json from "../package.json";
+import { logger } from "./browser";
+
+(() => {
+    logger("info", "OCS-v" + json.version + " 载入成功");
+})();

packages/scripts/src/browser/index.ts

@@ -1 +1,3 @@
+export { start } from "./scripts";
+export { logger } from "./util";
 export * as ZHS from "./zhs";

packages/scripts/src/browser/scripts.ts

@@ -0,0 +1,70 @@
+
+
+import { ZHS } from ".";
+import { logger, urlGlob } from "./util";
+
+interface Settings {
+    智慧树: {
+        视频: {
+            "观看时间(分钟)": number;
+            "播放速度(倍速)": number;
+            视频静音: boolean;
+            复习模式: boolean;
+        };
+        作业: {};
+        考试: {};
+    };
+    超星: {
+        视频: {};
+        作业: {};
+        考试: {};
+    };
+}
+
+const supportURL = {
+    智慧树: "zhihuishu.com",
+    超星: "chaoxing.com",
+};
+
+export async function start(settings: Partial<Settings>) {
+    if (urlGlob(supportURL.智慧树)) {
+        await (settings.智慧树 ? zhs(settings.智慧树) : logger("error", "未指定 智慧树脚本 的运行参数"));
+    } else if (urlGlob(supportURL.超星)) {
+        await (settings.超星 ? cx(settings.超星) : logger("error", "未指定 超星脚本 的运行参数"));
+    } else {
+        logger("error", "当前页面 "+window.location.host+" 不在指定的范围内, 支持的范围如下 : ");
+        for (const url of Reflect.ownKeys(supportURL)) {
+            logger("debug", url, Reflect.get(supportURL, url));
+        }
+    }
+}
+
+// 智慧树脚本
+async function zhs(settings: Settings["智慧树"]) {
+    if (urlGlob("**videoStudy.html**")) {
+        const setting = settings["视频"];
+        // 智慧树视频学习
+        await ZHS.study({
+            watchTime: setting["观看时间(分钟)"],
+            playbackRate: setting["播放速度(倍速)"],
+            mute: setting["视频静音"],
+            restudy: setting["复习模式"],
+        });
+    }
+}
+
+// 超星脚本
+async function cx(settings: Settings["超星"]) {
+    if (urlGlob("**mycourse/studentstudy**")) {
+        if (urlGlob("**/mycourse/studentstudy**mooc2=1**")) {
+            // chaoxing code here...
+        } else {
+            // 跳转到最新版本的超星
+            const params = new URLSearchParams(window.location.href);
+            if (!params.get("mooc2")) {
+                params.set("mooc2", "1");
+            }
+            window.location.href = params.toString();
+        }
+    }
+}

packages/scripts/src/browser/util.ts

@@ -4,9 +4,6 @@ export async function sleep(period: number) {
     });
 }
 
-export async function logger(level: "info" | "error" | "warn" | "debug", ...msg: any[]) {
-    console.log(...loggerPrefix(level), ...msg);
-}
 
 function loggerPrefix(level: "info" | "error" | "warn" | "debug") {
     let bgColor;
@@ -18,3 +15,15 @@ function loggerPrefix(level: "info" | "error" | "warn" | "debug") {
         `background:${bgColor};color:white;padding:2px;border-radius:2px`,
     ];
 }
+
+
+/** 输出 */
+export async function logger(level: "info" | "error" | "warn" | "debug", ...msg: any[]) {
+    console.log(...loggerPrefix(level), ...msg);
+}
+
+/** 匹配 url */
+export function urlGlob(pattern: string, input = window.location.href) {
+    var re = new RegExp(pattern.replace(/([.?+^$[\]\\(){}|\/-])/g, "\\$1").replace(/\*/g, ".*"));
+    return re.test(input);
+}

packages/scripts/src/tampermonkey/index.ts

@@ -0,0 +1 @@
+export { GM_meta } from "./utils";

packages/scripts/src/tampermonkey/utils.example.ts

@@ -0,0 +1,55 @@
+// @ts-nocheck
+
+// 简单例子
+
+metas = GM_meta(
+    `
+    // ==UserScript==
+    // @number       1
+    // @string       this is string
+    // @boolean      true
+    // @object.somekey.list  1
+    // @object.somekey.list  2
+    // @object.somekey.str  this is str      
+    // ==/UserScript==
+    `,
+    " ",
+    "."
+);
+
+console.log(metas);
+// 输出：
+metas = {
+    number: 1,
+    string: "this is string",
+    boolean: true,
+    object: { someKey: { list: [1, 2], str: "this is str" } },
+};
+
+// 如果在油猴环境下运行可以使用如下代码解析
+
+metas = GM_meta(GM_info.scriptMetaStr);
+
+// 如果只想解析个人配置，可以吧分隔符修改成 `=` ，然后使用 `=` 去定义设置值
+
+metas = GM_meta(GM_info.scriptMetaStr, "=");
+
+// 如果想修改对象创建规则，可以吧对象分隔符改成任意字符。
+
+metas = GM_meta(
+    `
+    // ==UserScript==
+    // @number       = 1
+    // @string       = this is string
+    // @boolean      = true
+    // @object-somekey-list = 1
+    // @object-somekey-list = 2
+    // @object-somekey-str = this is str      
+    // ==/UserScript==
+    `,
+    "=",
+    "-"
+);
+
+
+export default {}

packages/scripts/src/tampermonkey/utils.ts

@@ -0,0 +1,104 @@
+// @ts-check
+
+import example from "./utils.example";
+
+/**
+ * 获取油猴头设置:  @设置名=设置值
+ *
+ * - `设置名` : 设置的名字，以`@`符号开头，可以使用 `.` 进行深层对象的表达，如果有重复的设置名称出现，则值将被解析成一个数组
+ * - `设置值` : 设置的值
+ *      - `字符串类型` : 任何字符串，无需加双引号
+ *      - `数字类型` : 任何数字
+ *      - `布尔类型` :
+ *          - `true` : 可被解析的值有： `true`,`open`,`是`,`开启`
+ *          - `false` : 可被解析的值有： `false`,`close`,`否`,`关闭`
+ *
+ *
+ * 代码例子： {@link example}
+ *
+ * @param metaString 油猴头部信息，通常使用 `GM_info.scriptMetaStr` 获取
+ * @param separator 设置名与设置值的分隔符，默认一个空格 : `' '`
+ * @param objectSeparator 深度对象创建分隔符，默认一个点 : `'.'`
+ * @returns `meta object of UserScript`
+ */
+export function GM_meta(metaString: string, separator = " ", objectSeparator = ".") {
+    const object = {};
+    const regexp = RegExp(`// *@(.*?)${separator}(.*)`);
+
+    let metas = metaString.match(RegExp(regexp, "g")) || [];
+
+    let data = metas
+        // 去除空格
+        .map((item) => item.trim())
+        // 转换成 key value 形式
+        .map((item) => {
+            const match = item.match(regexp);
+            if (match) {
+                return { key: match[1].trim(), value: match[2].trim() };
+            }
+        })
+        .filter((item) => item !== undefined) as {
+        key: string;
+        value: any;
+    }[];
+    // 类型转换
+    data.map((item) => {
+        item.value = Number(item.value)
+            ? Number(item.value)
+            : item.value === "true"
+            ? true
+            : item.value === "false"
+            ? false
+            : item.value === "open"
+            ? true
+            : item.value === "close"
+            ? false
+            : item.value === "是"
+            ? true
+            : item.value === "否"
+            ? false
+            : item.value === "开启"
+            ? true
+            : item.value === "关闭"
+            ? false
+            : String(item.value);
+        return item;
+    })
+        // 生成对象
+        .forEach((item) => {
+            // 使用 `.` 进行深度对象创建
+            if (item.key.includes(objectSeparator)) {
+                const keys = item.key.split(objectSeparator);
+                const lastKey = keys.pop();
+                if (lastKey) {
+                    let obj = undefined;
+                    for (const key of keys) {
+                        let target: any = obj || object;
+                        if (target[key] === undefined) {
+                            target[key] = {};
+                        }
+                        obj = target[key];
+                    }
+
+                    setValue(obj, lastKey, item.value);
+                }
+            } else {
+                setValue(object, item.key, item.value);
+            }
+
+            /** 解析变量，如果是重复设置，则解析成数组 */
+            function setValue(obj: any, key: string, value: any) {
+                if (obj[key] === undefined) {
+                    obj[key] = value;
+                } else {
+                    if (Array.isArray(obj[key])) {
+                        obj[key].push(value);
+                    } else {
+                        obj[key] = [obj[key], value];
+                    }
+                }
+            }
+        });
+
+    return object;
+}

packages/scripts/tsconfig.json

@@ -9,8 +9,8 @@
         "skipLibCheck": true,
         "forceConsistentCasingInFileNames": true,
         "lib": ["DOM"],
-        
-         
+
+        "resolveJsonModule": true
     },
 
     "include": ["./src/**/*.ts"]