Component-driven
Build page interfaces with Vue or React
Skip to contentAdd your own touches
Component-driven development
Component injection
Component-driven userscript framework
Add your own touches
to everyday pages.
Write components in Vue or React. Let Makoo handle injection and lifecycle.
pnpm dlx @makoojs/create-makooComponent-driven development
Structured management
Component injection and runtime management for complex userscripts
Declarative injection
Declare the component target node and run strategy
Page change handling
Wait for async nodes and remount after host replacement
Unified event management
Start stop and clean up listeners as tasks
TypeScript support
Types for task declarations and component context
Complete toolchain
Project creation development debugging and preview
Component injection
For dynamic pages
Runtime management
Wait for target nodes Mount and restore components
Manage injection and task lifecycle and handle host node replacement
Asynchronous DOM waitingComponent mount and restoreUnified destroy and cleanup
Learn about Runtime Framework adapters
Build page components with Vue or React
Mount components through Adapters and manage their lifecycle
Learn about adaptersMakoo CLI development terminal
Terminal shortcuts
Install the development script view logs and restart the server with shortcuts
View the development terminalRuntime task inspection
Inspect running tasks
View task type and target node in the terminal and switch between connected Runtimes
Learn about task inspectionInjection example
Declare a component and target
Declare an inject task and let the Runtime run it
Start buildingimport { createMakoo, inject } from '@makoojs/core';
import { createVueAdapter } from '@makoojs/vue';
import Panel from './Panel.vue';
createMakoo({ adapters: [createVueAdapter()] }).start([
inject({ id: 'panel', injectAt: 'body', artifact: Panel })
]);
Open source MIT License
Start building userscripts
Build component-driven page features with Makoo