Caliber.js Framework Library

一个旨在帮助开发者快速构建功能强大、可维护的现代油猴脚本的框架。它提供模块化架构、自动化的UI设置面板、响应式生命周期管理、高性能DOM调度器与网络请求拦截器等核心功能,让您专注于实现创意,而非繁琐的底层细节。

Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta // @require https://update.greasyfork.org/scripts/545792/1641440/Caliberjs%20Framework%20Library.js

Tác giả
You Boy
Phiên bản
1.0.0
Đã tạo
14-08-2025
Đã cập nhật
14-08-2025
Size
100 KB
Giấy phép
MIT

Caliber.js - 为现代油猴脚本开发而生

Caliber.js 是一个旨在帮助开发者快速构建功能强大、可维护、可动态配置的现代油猴脚本的框架。

在传统的脚本开发中,随着功能增多,代码会迅速变得混乱:全局变量冲突、事件监听难以管理、缺乏统一的配置界面、在单页应用(SPA)网站上难以正确管理功能启停…… Caliber.js 的诞生就是为了解决这些痛点。

它提供了一套优雅的架构和丰富的内置工具,让您能像开发一个小型应用程序一样来组织您的脚本代码,使您专注于实现创意,而非繁琐的底层细节。


核心特性

  • ⚡️ 真正的模块化 (True Modularity) 所有功能都被封装在独立的 Module 类中,拥有清晰的生命周期方法 (onEnable, onDisable)。这使得代码高度内聚、易于管理和复用。

  • 🎨 自动化的UI设置面板 (Automated UI) 您只需在模块中以声明式的方式定义 defaultConfig 对象,框架便会自动为您生成一个功能完善、外观精美、支持亮/暗模式的设置面板。无需手动编写任何UI代码。

  • 🔄 响应式生命周期管理 (Reactive Lifecycle) 通过简单的 match 属性(支持字符串、正则表达式),您可以精确控制每个模块在哪些页面上运行。框架会自动监听URL变化(包括SPA的路由切换),并智能地启用或禁用相应模块,彻底解决了在现代网站上管理脚本状态的难题。

  • 🛠️ 强大的内置核心服务 (Powerful Core Services)

    • 高性能DOM调度器 (scheduler): 基于 MutationObserver,用高效、批量的方式处理动态添加到页面的DOM元素,性能远超传统的 setInterval 轮询。
    • 网络请求拦截器 (interceptor): 以一种极其简单和安全的方式拦截和修改 fetch 请求,或读取API的响应数据,是实现数据增强类功能的利器。
    • 页面作用域执行器 (executor): 安全地在宿主页面(unsafeWindow)的上下文中执行代码并异步返回结果,轻松调用页面自身的JS函数或变量。
    • 内存泄漏审计员 (ModuleAuditor): 在开发模式下,自动追踪模块的事件监听、定时器等副作用,并在模块禁用后报告任何未被清理的资源,确保脚本的健壮性。

快速上手 (Hello, World!)

使用Caliber框架只需两步:@require 框架库,然后创建您的应用。

第1步:在您的脚本元数据中 @require 本库

// ==UserScript==
// @name         我的第一个Caliber脚本
// @namespace    Your Namespace
// @version      0.1
// @match        *://*/*
// @require      https://greasyfork.org/scripts/XXXXXX-caliber-js-framework-library/code/Caliberjs%20Framework%20Library.js?version=YYYYYY
// @grant        GM.registerMenuCommand
// @grant        unsafeWindow
// ==/UserScript==

注意: 请将上面的 @require URL替换为本脚本的实际URL。

第2步:编写您的应用脚本

一个最简单的 "Hello World" 脚本如下所示:

// my-first-script.js

// 1. 定义一个功能模块
// 所有模块都必须继承自 Caliber.Module
class HelloWorldModule extends Caliber.Module {
  // 模块的唯一ID,用于内部管理
  id = 'helloWorld';

  // 模块在设置面板中显示的名称
  name = '问候世界模块';

  // 模块的功能描述
  description = '当启用时,在控制台打印一条问候信息。';

  // 模块的默认配置 (会自动生成UI)
  defaultConfig = {
    // 'enabled' 是一个特殊键,控制模块是否默认开启
    enabled: true, 
  };

  // 当模块被启用时,框架会自动调用此方法
  onEnable() {
    // this._logger 是框架注入的、带标签的日志记录器
    this._logger.log('Hello, World! This module is now active.');
  }

  // 当模块被禁用时,框架会自动调用此方法
  onDisable() {
    this._logger.log('Goodbye, World! This module has been disabled.');
  }
}


// 2. 启动应用
// 在IIFE中以保护作用域
(function() {
    'use strict';

    // 确保 Caliber 框架已加载
    if (typeof Caliber === 'undefined') {
        console.error('Caliber Framework not found!');
        return;
    }

    // 定义应用的全局选项
    const appOptions = {
        appName: '我的应用',
        // 将您所有的模块类放入这个数组
        modules: [
            HelloWorldModule,
            // ...可以添加更多模块
        ],
        // 提供平台相关的服务适配器
        // 框架通过这些适配器与油猴环境交互
        services: {
            command: {
                register: (name, callback) => GM.registerMenuCommand(name, callback),
            }
            // storage, style 等服务若不提供,框架会使用浏览器原生API作为后备
        }
    };

    // 调用 createApp,一切便会自动运行!
    Caliber.createApp(appOptions);

})();

发生了什么?

  1. 您定义了一个简单的 HelloWorldModule 模块。
  2. 您调用了 Caliber.createApp,并把您的模块和必要的服务传了进去。
  3. 框架会自动处理剩下的所有事情:
    • 在页面右侧生成一个设置按钮。
    • 点击按钮,会弹出一个包含“问候世界模块”开关的设置面板。
    • 当您切换开关时,框架会自动调用 onEnableonDisable 方法。
    • 所有的配置状态都会被自动保存和加载。

现在,您可以开始构建更复杂的模块,并享受Caliber带来的开发便利了!