効率的な英単語学習をサポートするChrome拡張機能
ClipLexは、ウェブ上で選択したテキストを英単語として保存し、効率的に語彙力を向上させるChrome拡張機能です。以下のような特徴があります:
- 📚 単語保存: ウェブ上で選択した英単語をワンクリックで保存。
- 🔍 学習サポート: 辞書リンクや例文を通じて深い理解を提供。
- ✂️ ドメインブロック: 学習対象外のサイトを簡単に除外。
- 🗂️ カスタマイズ可能な優先度設定とメモ機能。
-
必要な依存パッケージをインストール:
npm install
-
ビルドを実行:
npm run build
-
Chromeの拡張機能画面 (
chrome://extensions/) を開き、「パッケージ化されていない拡張機能を読み込む」からdistフォルダを選択。
- ウェブページ上で単語を選択。
- 表示される保存ボタンをクリックして単語を保存。
- 拡張機能の設定ページで保存した単語を管理。
ClipLexを使用して、文字列を選択すると下記のようなポップアップが表示されます（不具合で表示されない場合があるため、その場合は選択後に右クリックを行ってみてください）。
水色のボタンを押すことで新規の用語として保存ができ、 ピンク色のボタンを押すことでその範囲に含まれる用語に対して、現在選択中の例文を追加することができます。
オプション画面で単語の復習や学習を行うことができます
| オプション名 | 説明 |
|---|---|
| 除外ドメイン設定 | 学習対象外にするドメインをブラックリスト方式で指定可能。 |
| 限定ドメイン設定 | 学習対象を特定のドメインにホワイトリスト方式で限定可能。 |
| 優先度設定 | 単語ごとの学習優先度を設定。変更はリアルタイムで保存されます。 |
| フィルタリング | 日付や優先度で単語を絞り込み。 |
| ページネーション | 大量の単語をページごとに管理可能。 |
| 新規単語の追加 | 単語、例文、優先度、メモをカスタマイズして追加可能。 |
cliplex/
├── src/
│ ├── background.ts # バックグラウンドスクリプト
│ ├── content_script.ts # コンテンツスクリプト
│ ├── database.ts # ローカルストレージ管理
│ ├── manifest.json # Chrome拡張のマニフェスト
│ ├── options/ # 設定ページ
│ │ ├── options.html
│ │ └── options.ts
│ ├── types/ # TypeScript型定義
│ │ └── types.d.ts
│ └── ui/ # アイコンやスタイル
├── dist/ # ビルド結果
├── webpack.config.js # Webpack設定
├── tsconfig.json # TypeScript設定
├── package.json # パッケージ情報
└── README.md # ドキュメント
- Extensions / Get started | Chrome for Developers
- マニフェスト ファイル形式 | Manifest | Chrome for Developers
- permissions: 権限 | Permissions | Chrome for Developers
- content_scripts: コンテンツ スクリプト | Chrome Extensions | Chrome for Developers
- option_page: ユーザーに選択肢を提供する | Chrome Extensions | Chrome for Developers
- action: chrome.action | API | Chrome for Developers
以下のスクリプトを活用してコード品質を維持:
- コードの整形:
npm run format - E2Eテストのコード作成:
npx playwright codegen https://makinzm.github.io/rust-wasm-github/
💡 あなたの語彙力を飛躍的に向上させるツール「ClipLex」をぜひお試しください！