# AI Thumbnail Generator - Chrome拡張機能

Webページの文章を読み取り、AIでサムネイル画像を自動生成するChrome拡張機能です。

## 機能

- 現在開いているWebページのテキストを自動抽出
- ページ内容を分析してキーワードを抽出
- AI画像生成APIを使用してサムネイルを生成（プレースホルダー実装済み）
- 右クリックメニューから簡単に生成開始
- 生成完了を通知で表示
- 生成したサムネイルを新しいタブで表示

## ファイル構成

```
.
├── manifest.json          # Chrome拡張機能のマニフェストファイル
├── background.js         # サムネイル生成処理とコンテキストメニューを管理
├── icons/                # アイコン画像（要追加）
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
└── README.md
```

## インストール方法

1. Chrome で `chrome://extensions/` を開く
2. 右上の「デベロッパーモード」を有効にする
3. 「パッケージ化されていない拡張機能を読み込む」をクリック
4. このプロジェクトのディレクトリを選択

## 使い方

1. サムネイルを生成したいWebページを開く
2. ページ上で右クリック
3. 「このページのサムネイルを生成」を選択
4. 生成中の通知が表示される
5. 生成完了後、通知をクリックすると新しいタブで画像が開く

## AI画像生成APIの統合

現在、画像生成部分はプレースホルダー実装になっています。
実際のAI画像生成APIを統合するには、[background.js](background.js) の `generateThumbnailImage` 関数を修正してください。

### 統合可能なAPIの例

1. **OpenAI DALL-E**
   - API: https://platform.openai.com/docs/api-reference/images

2. **Stability AI**
   - API: https://platform.stability.ai/docs/api-reference

3. **Replicate**
   - API: https://replicate.com/docs/reference/http

### 実装箇所

[background.js](background.js) の `generateThumbnailImage` 関数:

```javascript
async function generateThumbnailImage(prompt) {
  // TODO: ここで実際の画像生成APIを呼び出す

  // 例: OpenAI DALL-E の場合
  // const response = await fetch('https://api.openai.com/v1/images/generations', {
  //   method: 'POST',
  //   headers: {
  //     'Authorization': `Bearer ${API_KEY}`,
  //     'Content-Type': 'application/json'
  //   },
  //   body: JSON.stringify({
  //     prompt: prompt,
  //     n: 1,
  //     size: '1024x1024'
  //   })
  // });
  // const data = await response.json();
  // return data.data[0].url;
}
```

### APIキーの管理

APIキーは manifest.json の `permissions` に `storage` を追加済みなので、
`chrome.storage.sync` を使用して安全に保存できます:

```javascript
// APIキーを保存
await chrome.storage.sync.set({ apiKey: 'your-api-key' });

// APIキーを取得
const { apiKey } = await chrome.storage.sync.get('apiKey');
```

## カスタマイズ

### テキスト抽出のカスタマイズ

[background.js](background.js) の `extractPageContent` 関数で抽出ロジックを調整できます。

### プロンプト生成のカスタマイズ

[background.js](background.js) の `generateImagePrompt` 関数でプロンプトを調整できます。

## 必要な作業

- [ ] アイコン画像の作成・追加（16x16, 48x48, 128x128 px）
- [ ] AI画像生成APIの統合
- [ ] APIキー設定画面の追加（オプション）
- [ ] エラーハンドリングの強化
- [ ] より高度なテキスト分析機能

## 開発

プロジェクトの改善点:
- LLMを使用したより高度なコンテンツ分析
- 複数の画像スタイルオプション
- 生成履歴の保存
- 画像の編集機能

## ライセンス

MIT
