Caliber.js Framework Library

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

Tính đến 20-08-2025. Xem phiên bản mới nhất.

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.greasyforks.org/scripts/545792/1645462/Caliberjs%20Framework%20Library.js

Tác giả
You Boy
Phiên bản
1.1.0
Đã tạo
14-08-2025
Đã cập nhật
20-08-2025
Kích thước
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://greasyforks.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带来的开发便利了!

长期地址
遇到问题?请前往 GitHub 提 Issues。