@trust-engine/widget

TrustEngine Widget

A JavaScript widget for content verification using the TrustEngine blockchain registry.

Features

• 🔍 Smart Media Detection - Automatically scans images, videos, and audio elements
• 🔄 Real-time Monitoring - Detects dynamically added content using MutationObserver
• ✅ Verification Badges - Shows verification status with visual indicators
• 🎨 Style Isolation - Scoped CSS to prevent conflicts with host websites
• 🌐 Cross-browser Support - Compatible with modern browsers
• ♿ Accessibility Ready - ARIA labels and keyboard navigation

Installation

Via jsDelivr CDN (Recommended)

<!-- Latest version -->
<script src="https://cdn.jsdelivr.net/npm/@trustengine/widget@latest/dist/trust-engine-widget.js"></script>

<!-- Specific version (recommended for production) -->
<script src="https://cdn.jsdelivr.net/npm/@trustengine/widget@1.0.0/dist/trust-engine-widget.js"></script>

<script>
  TrustEngineWidget.init({
    apiBaseUrl: 'https://core-api-server.onrender.com'
  });
</script>

Via Custom CDN

<script src="https://cdn.trustengine.org/widget/latest/trust-engine-widget.js"></script>
<script>
  TrustEngineWidget.init({
    apiBaseUrl: 'https://core-api-server.onrender.com'
  });
</script>

Via NPM

npm install @trustengine/widget

import { TrustEngineWidget } from '@trustengine/widget';

const widget = new TrustEngineWidget({
  apiBaseUrl: 'https://core-api-server.onrender.com'
});
widget.initialize();

Configuration

TrustEngineWidget.init({
  apiBaseUrl: 'https://core-api-server.onrender.com', // API endpoint
  enabledElements: ['img', 'video', 'audio'],         // Media types to scan
  badgePosition: 'top-right',                         // Badge position
  showTooltip: true,                                  // Enable hover tooltips
  autoScan: true,                                     // Auto-scan on init
  observeDynamicContent: true,                        // Monitor for new content
  theme: 'light',                                     // 'light' or 'dark'
  debug: false                                        // Debug logging
});

API Integration

The widget uses the TrustEngine SDK to verify content:

• Automatically fetches media files
• Generates SHA256 hashes
• Queries the blockchain registry
• Displays verification badges based on results

Development

Build

npm run build

Test

npm run dev  # Start development server

Open test/sample-page/index.html to test the widget.

File Structure

js-widget/
├── src/
│   ├── scanner/           # Media detection
│   ├── ui/badge/         # Verification badges
│   ├── utils/            # Utilities
│   └── styles/           # CSS styles
├── config/               # Build configuration
├── test/                 # Test pages
└── dist/                 # Built files

Browser Support

• Chrome 60+
• Firefox 60+
• Safari 12+
• Edge 79+

License

MIT License