Lightweight library for product tours, highlights, and contextual help in Tampermonkey userscripts. Inspired by driver.js, designed for the userscript ecosystem. Zero dependencies, Auto-injects CSS, Sandbox-compatible
이 스크립트는 직접 설치하는 용도가 아닙니다. 다른 스크립트에서 메타 지시문 // @require https://update.greasyfork.org/scripts/567414/1761553/TamperGuide.js을(를) 사용하여 포함하는 라이브러리입니다.
Lightweight library for product tours, highlights, and contextual help in Tampermonkey userscripts.
Inspired by driver.js, designed specifically for the userscript ecosystem.
@require from https://www.jsdelivr.com (recommended)// @require https://cdn.jsdelivr.net/gh/UNKchr/tamperguide@f106cd219d37c7c9d362a896b28ef0ca6cfd8aab/tamperguide/tamperGuide.js
@require from Greasy Fork// @require https://update.greasyfork.org/scripts/567414/1761172/TamperGuide.js
@require from GitHub Raw// @require https://raw.githubusercontent.com/UNKchr/tamperguide/refs/heads/main/tamperguide/tamperGuide.js
// ==UserScript==
// @name My Tour Script
// @match https://example.com/*
// @require // @require https://update.greasyfork.org/scripts/567414/1761172/TamperGuide.js
// @grant none
// ==/UserScript==
(function () {
'use strict';
const guide = tamperGuide({
showProgress: true,
steps: [
{
element: 'h1',
popover: {
title: 'Page Title',
description: 'This is the main heading of the page.',
side: 'bottom',
},
},
{
element: 'nav',
popover: {
title: 'Navigation',
description: 'Use these links to explore sections.',
side: 'bottom',
},
},
{
popover: {
title: 'Tour Complete!',
description: 'You are now familiar with this page.',
},
},
],
});
guide.drive();
})();
const guide = tamperGuide();
guide.highlight({
element: '#search-input',
popover: {
title: 'Search',
description: 'Type here to find anything.',
side: 'bottom',
},
});
| Option | Type | Default | Description |
|---|---|---|---|
steps |
Array |
[] |
Array of step objects |
animate |
boolean |
true |
Enable/disable animations |
overlayColor |
string |
'#000' |
Overlay background color |
overlayOpacity |
number |
0.7 |
Overlay opacity (0–1) |
stagePadding |
number |
10 |
Padding around highlighted element (px) |
stageRadius |
number |
5 |
Border radius of highlight cutout (px) |
allowClose |
boolean |
true |
Allow closing via Escape/overlay click |
allowKeyboardControl |
boolean |
true |
Arrow keys / Tab navigation |
showProgress |
boolean |
false |
Show "1 of 5" progress text |
showButtons |
Array |
['next','previous','close'] |
Which buttons to display |
progressText |
string |
'{{current}} of {{total}}' |
Progress text template |
nextBtnText |
string |
'Next →' |
Next button label |
prevBtnText |
string |
'← Previous' |
Previous button label |
doneBtnText |
string |
'Done ✓' |
Done button label (last step) |
popoverClass |
string |
'' |
Extra CSS class for the popover |
popoverOffset |
number |
10 |
Distance between popover and element (px) |
smoothScroll |
boolean |
true |
Smooth scroll to off-screen elements |
disableActiveInteraction |
boolean |
false |
Block clicks on highlighted element |
{
element: '#my-el', // CSS selector, function, or DOM Element
popover: {
title: 'Title', // String or DOM Element
description: 'Text', // String or DOM Element (supports HTML)
side: 'bottom', // 'top' | 'right' | 'bottom' | 'left' (auto if omitted)
align: 'center', // 'start' | 'center' | 'end'
showProgress: true, // Override global showProgress
showButtons: ['next'], // Override global showButtons
},
onHighlightStarted: (el, step, opts) => {},
onHighlighted: (el, step, opts) => {},
onDeselected: (el, step, opts) => {},
}
All hooks receive (element, step, { config, state, driver }):
| Hook | Scope | Description |
|---|---|---|
onHighlightStarted |
Global / Step | Fires when a step begins highlighting |
onHighlighted |
Global / Step | Fires after the step is fully visible |
onDeselected |
Global / Step | Fires when leaving a step |
onDestroyStarted |
Global | Fires before destroy — return false to cancel |
onDestroyed |
Global | Fires after full cleanup |
onNextClick |
Global / Step | Fires on next click — return false to cancel |
onPrevClick |
Global / Step | Fires on prev click — return false to cancel |
onCloseClick |
Global / Step | Fires on close click — return false to cancel |
onPopoverRender |
Global / Step | Fires after popover DOM is created |
| Method | Description |
|---|---|
guide.drive(index?) |
Start tour (optionally from a step index) |
guide.highlight(step) |
Highlight a single element |
guide.moveNext() |
Go to next step |
guide.movePrevious() |
Go to previous step |
guide.moveTo(index) |
Jump to specific step |
guide.hasNextStep() |
Returns boolean |
guide.hasPreviousStep() |
Returns boolean |
guide.isActive() |
Returns boolean |
guide.isFirstStep() |
Returns boolean |
guide.isLastStep() |
Returns boolean |
guide.getActiveIndex() |
Current step index |
guide.getActiveStep() |
Current step object |
guide.getActiveElement() |
Current highlighted element |
guide.setConfig(config) |
Update configuration |
guide.setSteps(steps) |
Replace all steps |
guide.getConfig(key?) |
Get config (or specific key) |
guide.getState(key?) |
Get internal state |
guide.refresh() |
Recalculate positions |
guide.destroy() |
Clean up everything |
| Key | Action |
|---|---|
→ / Tab |
Next step |
← / Shift+Tab |
Previous step |
Escape |
Close tour |
MIT © UNKchr