You can extend LibreCrawl by dropping .js files into /web/static/plugins/. Each file will automatically create a new tab in the UI.
Plugins use the LibreCrawlPlugin.register() method. They receive real-time data from the crawler, including urls, links, issues, and stats.
Lifecycle Hooks:
onLoad(): Called when the plugin loads.onTabActivate(container, data): Called when the tab becomes active. The container is the DOM element where you render your UI.onTabDeactivate(): Called when switching away from the tab.onDataUpdate(data): Called during live crawls as data updates.onCrawlComplete(data): Called when the crawl finishes.
Utilities (this.utils):
this.utils.showNotification(message, type): Show alerts ('success', 'error', 'info').this.utils.formatUrl(url)this.utils.escapeHtml(text)
Styling Tip: To ensure proper scrolling, wrap your content in a div with the .plugin-content class and a specific max-height:
<div class="plugin-content" style="padding: 20px; overflow-y: auto; max-height: calc(100vh - 280px);">
<!-- Content -->
</div>
LibreCrawlPlugin.register({
id: 'my-plugin',
name: 'My Plugin',
tab: {
label: 'My Tab',
icon: '🔥',
},
onTabActivate(container, data) {
container.innerHTML = `
<div class="plugin-content" style="padding: 20px; overflow-y: auto; max-height: calc(100vh - 280px);">
<h2 class="plugin-header">My Custom Analysis</h2>
<p>Found ${data.urls.length} URLs!</p>
</div>
`;
},
onDataUpdate(data) {
if (this.isActive) {
// Update UI
}
}
});