@stacksleuth/browser-extension

StackSleuth Browser Extension

🚀 What is StackSleuth Browser Extension?

Comprehensive browser extension for real-time performance monitoring - DevTools integration, content script injection, tab performance tracking, and interactive performance visualization.

✨ Key Features

• 🔧 DevTools Integration: Enhanced browser developer tools
• 📱 Content Script Injection: Automatic webpage monitoring
• 📊 Tab Performance Tracking: Per-tab performance analysis
• 🎨 Interactive Visualization: Real-time performance charts
• ⚡ Live Monitoring: Instant performance feedback
• 🔍 Performance Inspector: Detailed performance breakdowns
• 📈 Historical Data: Performance trend analysis
• 🎯 Custom Alerts: Performance threshold notifications

📦 Installation

# npm
npm install @stacksleuth/browser-extension

# yarn
yarn add @stacksleuth/browser-extension

# pnpm
pnpm add @stacksleuth/browser-extension

yarn add @stacksleuth/browser-extension

pnpm add @stacksleuth/browser-extension

🏁 Quick Start

// manifest.json
{
  "manifest_version": 3,
  "name": "StackSleuth Performance Monitor",
  "version": "1.0.0",
  "permissions": ["activeTab", "storage", "webRequest"],
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["stacksleuth-content.js"]
  }],
  "devtools_page": "devtools.html"
}

// background.js
import { BrowserExtension } from '@stacksleuth/browser-extension';

const extension = new BrowserExtension({
  enabled: true,
  enableDevTools: true,
  trackingDomains: ['*']
});

extension.initialize();

// content-script.js
import { BrowserExtension } from '@stacksleuth/browser-extension';

// Automatically monitor page performance
const extension = new BrowserExtension();
extension.collectPageMetrics();

🛠️ Troubleshooting

Common Issues

Agent Not Starting

// Enable debug mode
const agent = new BrowserExtension({
  enabled: true,
  debug: true
});

High Memory Usage

// Optimize memory usage
const agent = new BrowserExtension({
  bufferSize: 500,
  flushInterval: 5000,
  sampleRate: 0.01
});

Missing Metrics

• Check that the agent is enabled
• Verify your API key and project ID
• Ensure sampling rate allows data through
• Check network connectivity to StackSleuth API

Debug Mode

DEBUG=stacksleuth:* node your-app.js

📚 Resources

• Official Documentation
• API Reference
• Examples Repository

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT License - see the LICENSE file for details.

Website • Documentation • NPM Registry • GitHub

Made with ⚡ by StackSleuth