Userscript 开发框架

用组件扩展网页

使用 Vue 或 React 构建界面由 Makoo 管理注入与生命周期

开始使用 GitHub

pnpm dlx @makoojs/create-makoo

组件化开发
结构化管理

为复杂用户脚本提供组件注入与运行时管理能力

组件化开发

使用 Vue 或 React 为网页构建交互界面

声明式注入

通过声明配置组件与目标节点及运行策略

页面变化处理

等待异步节点并在宿主替换后重新挂载组件

统一事件管理

通过任务统一管理事件监听的启停与清理

TypeScript 支持

为任务声明与组件上下文提供类型支持

完整开发工具链

支持项目创建与开发调试及构建预览

组件注入
适配动态网页

运行时管理

目标节点等待组件挂载与恢复

管理组件注入与任务生命周期并处理宿主节点替换

异步 DOM 等待组件挂载与恢复统一销毁与清理

了解 Runtime

框架适配

使用 Vue 或 React 构建网页组件

通过 Adapter 挂载组件并统一管理组件生命周期

了解框架适配

Makoo CLI 开发终端

终端快捷操作

通过快捷键安装开发脚本与查看日志及重启服务

查看开发终端

Runtime 任务查看

查看任务运行状态

在终端查看任务类型与目标节点并切换已连接的 Runtime

了解任务查看

组件注入示例

声明组件与目标节点

通过 inject 声明注入任务并由 Runtime 执行

开始构建

src/main.ts

1import { createMakoo, inject } from '@makoojs/core';
2import { createVueAdapter } from '@makoojs/vue';
3import Panel from './Panel.vue';
4
5createMakoo({ adapters: [createVueAdapter()] }).start([
6  inject({ id: 'panel', injectAt: 'body', artifact: Panel })
7]);

开源 MIT License

开始构建用户脚本

使用 Makoo 开发组件化网页功能

开始使用查看 GitHub