# 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)

**Simple setup (auto-initialization):**
```html
<!-- Minimal setup with defaults -->
<script src="https://cdn.jsdelivr.net/npm/@trust-engine/widget@1.0.0/dist/trust-engine-widget.js"></script>

<!-- With custom configuration via data attributes -->
<script 
  src="https://cdn.jsdelivr.net/npm/@trust-engine/widget@1.0.0/dist/trust-engine-widget.js"
  data-enabled-elements='["img","video","audio"]'
  data-badge-position="bottom-right"
  data-theme="light"
  data-auto-scan="true"
  data-observe-dynamic-content="true"
  data-show-tooltip="true"
  data-debug="false">
</script>
```

**Manual initialization:**
```html
<script src="https://cdn.jsdelivr.net/npm/@trust-engine/widget@1.0.0/dist/trust-engine-widget.js"></script>
<script>
  TrustEngineWidget.init({
    enabledElements: ['img', 'video', 'audio'],
    badgePosition: 'bottom-right',
    theme: 'light',
    autoScan: true,
    observeDynamicContent: true,
    showTooltip: true,
    debug: false
  });
</script>
```

### Via Custom CDN

```html
<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

```bash
npm install @trustengine/widget
```

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

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

## Configuration

The widget works with sensible defaults out of the box. All configuration options are optional:

```javascript
// Minimal setup (recommended)
TrustEngineWidget.init();

// With custom options
TrustEngineWidget.init({
  enabledElements: ['img', 'video', 'audio'],     // Media types to scan
  badgePosition: 'bottom-right',                  // Badge position: 'top-left', 'top-right', 'bottom-left', 'bottom-right'
  theme: 'light',                                 // Theme: 'light' or 'dark'
  autoScan: true,                                 // Auto-scan page on load
  observeDynamicContent: true,                    // Monitor for dynamically added content
  showTooltip: true,                              // Show hover tooltips
  debug: false                                    // Enable debug logging in console
});
```

### Configuration Options

| Option | Data Attribute | Type | Default | Description |
|--------|----------------|------|---------|-------------|
| `enabledElements` | `data-enabled-elements` | `string[]` | `['img', 'video', 'audio']` | HTML elements to scan for verification |
| `badgePosition` | `data-badge-position` | `string` | `'bottom-right'` | Position of verification badge |
| `theme` | `data-theme` | `string` | `'light'` | Visual theme (`'light'` or `'dark'`) |
| `autoScan` | `data-auto-scan` | `boolean` | `true` | Automatically scan page when widget loads |
| `observeDynamicContent` | `data-observe-dynamic-content` | `boolean` | `true` | Monitor for new content added to the page |
| `showTooltip` | `data-show-tooltip` | `boolean` | `true` | Show tooltips on badge hover |
| `debug` | `data-debug` | `boolean` | `false` | Enable debug logging for development |

**Note:** For `data-enabled-elements`, use JSON array format: `'["img","video","audio"]'`

## 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

```bash
npm run build
```

### Test

```bash
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