はじめに

2024年CiscoSystems合同会社社員有志によるAdventCalendarの記事の一つです。

今回は私が作成したGoogle Chromeアドオン「URL Tracker」を紹介します。
このアドオンは、簡単に特定のURLをトラッキングし、記録するためのツールです。

「URL Tracker」の特徴と機能

作成の背景
実装のポイント
今後の展望

1. 「URL Tracker」の特徴と機能

「URL Tracker」は以下のような機能を備えています：

閲覧したURLを記録
閲覧履歴の中から特定のURLをピックアップし、リスト形式で保存します。

データのエクスポート
トラッキングしたURLをCSV形式でエクスポート可能。

実際の画面はこんな感じです：

2. 作成の背景

NW機器のトラフィックコントロールをする際にFQDNをベースとしたオブジェクト登録をすることが多く、重要なURLを簡単に記録・管理したいと感じたことです。出力形式としてフルURLやURIにするのではなくてFQDN部分にしています。バックエンドではURIまで取得しているのでそこらへんの細かいカスタマイズも可能です。

3. 実装のポイント

アドオンの開発には、以下の技術を活用しました：

Manifest V3:
最新のChrome拡張仕様に準拠した構成で、セキュリティとパフォーマンスを重視しました。

JavaScriptとChrome API:
特にchrome.historyやchrome.storageを使用して、閲覧履歴の取得やデータ保存を実現。

ユーザーインターフェース:
シンプルで直感的なUIを意識して、HTML/CSS/JavaScriptを組み合わせて構築しました。

コードの一部を紹介します：

chrome.history.search({text: '', maxResults: 100}, (results) => {
  const filteredUrls = results.filter(item => item.url.includes('example.com'));
  chrome.storage.local.set({trackedUrls: filteredUrls});
});

4. 今後の展望

現在はシンプルな機能に絞っていますが、今後は以下の改善を計画中です：

・リアルタイム通知機能
特定のキーワードを含むURLが訪問された際に通知を送る。

・カスタマイズ可能なトラッキング条件
特定のキーワードやドメインでフィルタリングする設定ができます。

・UIの改善
ユーザーからのフィードバックを基に、使いやすさをさらに向上。

まとめ

「URL Tracker」は、ウェブブラウジングを効率化するために作成したアドオンです。
ぜひ、こちらからダウンロードして使ってみてください！

使用してみた感想やフィードバックがあれば、コメント欄でお知らせください。