> ## Documentation Index
> Fetch the complete documentation index at: https://www.mellowtel.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Mellowtel Elementsをブラウザー拡張機能に実装する

ここでは、Mellowtel Elementsをブラウザー拡張機能に統合し、シームレスなユーザー同意管理を実現する方法を紹介します。

## インストール

拡張機能プロジェクトにパッケージをインストールします：

```bash theme={null}
npm install mellowtel-elements
```

## 実装

### 1. HTML Divコンテナを作成する

拡張機能のHTMLにコンテナdivを追加します：

```html theme={null}
<!-- popup.htmlまたはオプションページに -->
<div id="opt-in-container"></div>
<div id="opt-out-container"></div>
<div id="settings-container"></div>
```

### 2. Mellowtel Elementsを初期化する

```javascript theme={null}
import { MellowtelElements } from 'mellowtel-elements';

// 拡張機能IDと設定キーでインスタンスを作成
const mellowtel = new MellowtelElements(
  'your-extension-id-here',    // 拡張機能ID
  'your-config-key-here'       // 設定キー
);
```

### 3. 要素を作成する

拡張機能のポップアップやオプションページに要素を追加します：

```javascript theme={null}
// オプトイン要素を作成
await mellowtel.createElement('opt-in-container', { type: 'opt-in' });

// オプトアウト要素を作成
await mellowtel.createElement('opt-out-container', { type: 'opt-out' });

// 設定要素を作成
await mellowtel.createElement('settings-container', { type: 'settings' });
```

完璧です！これで、あなたの拡張機能はMellowtel Elementsを使用して、シームレスなオプトイン、オプトアウト、設定管理が可能になりました。