Amazon ウィッシュリストがもっと便利に！ 「このアイテム、何ポイントもらえるんだろう？」を瞬時に解決 ✨
Devolaは、Amazon.co.jp のウィッシュリストで獲得予定ポイントを自動表示するスマートな Chrome 拡張機能です。商品ページを個別に開く手間なく、ウィッシュリストを見ながら一目でポイント情報を確認できます。
- ウィッシュリストを見ながら「このアイテム、何ポイントもらえるの？」と疑問に思う
- 商品ページを一つ一つ開いてポイントを確認するのが面倒
- ポイントも考慮してお得な買い物をしたい
Devola があれば、すべて解決！
| 機能 | 説明 | メリット |
|---|---|---|
| 🔍 自動ポイント表示 | ウィッシュリストの各商品に獲得予定ポイントを自動表示 | 商品ページを開く手間が不要 |
| ⚡ リアルタイム更新 | 動的に追加される商品にも瞬時にポイント情報を付与 | スムーズなブラウジング体験 |
| 📚 全商品対応 | 通常商品から Kindle 本まで幅広く対応 | あらゆる商品でポイントを確認 |
| 🔒 プライバシー重視 | 全ての処理はブラウザ内で完結、外部送信なし | 安心・安全な利用 |
✅ 対応ページ
- Amazon.co.jp ウィッシュリストページ
❌ 非対応
- Amazon.com（海外版 Amazon）
- ランキングページ（既に Amazon が標準でポイント表示済み）
graph LR
A[ウィッシュリストページを開く] --> B[商品リストを自動検出]
B --> C[各商品のポイント情報を取得]
C --> D[価格の横にポイント表示]
D --> E[完了✨]
- 自動検出: ページ上の商品リストを瞬時に認識
- 情報取得: 各商品の詳細ページからポイント情報を取得
- スマート表示: 取得したポイントを価格の横に見やすく表示
- 継続監視: 新しく追加された商品も自動で処理
📋 開発環境の準備
- Node.js 18+
- pnpm (推奨) または npm
- Git
# 1. リポジトリをクローン
git clone git@github.com:tetratensor/amazon-wishlist-pointgetter.git
cd amazon-wishlist-pointgetter
# 2. 依存関係をインストール
pnpm install
# 3. 開発ビルド実行
pnpm dev| コマンド | 説明 | 用途 |
|---|---|---|
pnpm dev |
開発ビルド（ソースマップ付き） | 開発時 |
pnpm build |
本番ビルド（最適化済み） | リリース時 |
pnpm watch |
ファイル監視モード | 開発時の自動ビルド |
pnpm type-check |
TypeScript 型チェック | コード品質確認 |
pnpm clean |
ビルドファイル削除 | クリーンアップ |
- Chrome 拡張機能ページを開く:
chrome://extensions/ - デベロッパーモードを有効化
- 「パッケージ化されていない拡張機能を読み込む」 をクリック
/distフォルダを選択
🔍 技術詳細を見る
- 言語: TypeScript 5.7+
- ビルドツール: Webpack 5.99+
- パッケージマネージャー: pnpm
- ターゲット: ES2022
- Chrome 拡張: Manifest V3
📦 amazon-wishlist-pointgetter
├── 📂 src/
│ ├── 📄 index.ts # エントリーポイント
│ ├── 📄 wishlist.ts # ウィッシュリスト処理ロジック
│ └── 📄 util.ts # ポイント取得・解析ユーティリティ
├── 📂 public/
│ ├── 📄 manifest.json # Chrome拡張マニフェスト
│ ├── 📂 _locales/ # 多言語対応ファイル
│ └── 📂 images/ # アイコン画像
├── 📂 dist/ # ビルド成果物（自動生成）
└── 📄 webpack.config.js # Webpack設定
🔍 ポイント取得戦略 複数の CSS セレクターで Amazon の様々な商品タイプに対応：
- 通常商品:
#addToCart #pointsInsideBuyBox_feature_div span.a-color-price - Kindle 商品:
.loyalty-points .a-align-bottom,.ebooks-aip-points-label .a-color-price
⚡ パフォーマンス最適化
IntersectionObserverによる効率的な要素監視MutationObserverで動的コンテンツの自動検出- WeakMap によるメモリ効率的な重複処理防止
私たちと一緒に Devola をより良くしませんか？
- Fork このリポジトリ
- Feature branch を作成 (
git checkout -b feature/amazing-feature) - Commit 変更内容 (
git commit -m 'Add amazing feature') - Push ブランチ (
git push origin feature/amazing-feature) - Pull Request を作成
Issues でお気軽にお知らせください！
MIT License - 自由に使用・改変・配布可能
🎉 Devola でより賢い Amazon ショッピングを！