はじめに

この拡張機能の開発は諸事情により一時停止しています。

v3.0 PC間での共有を実装しました
v2.9 アイコンを実装しました
v2.8 バグ修正
v2.6 バグ修正
v2.1 デザインを更新して視認性向上させました
v1.2 基本的機能を実装しました

今回、UnextやNetflixなどの視聴を検知して、その場で★の評価やコメントなどを保存できる拡張機能を作成しました。

作成に至った経緯は、今現在あるスマートフォンなどの映画記録アプリは気軽さに欠けており、いちいち自分でアプリを起動する必要があります。それが非常に煩わしく結局評価が後回しになって、「あの映画何だっけ」となることが多かったからです。現在この拡張機能はUnextとnetflix、amazon prime、Disney plusでの対応になっています。(問題のセクション参照のこと)

↑↑↑ここからダウンロードできます。releasesからダウンロードしてください。

chromeの拡張機能管理画面から、パッケージ化されてない拡張機能から、解凍したこのzipを導入してください。

UI画像

ポップ

管理画面

評価画面

管理画面、登録後

機能

視聴履歴の追跡：
- ユーザーが視聴している動画のタイトル、エピソード名、視聴時間、総再生時間を自動的に記録します。
- 視聴状況（視聴中、完了、中断）を追跡します。
視聴統計：
- 総視聴時間や視聴完了作品数などの統計情報を提供します。
評価システム：
- 動画視聴後に評価ポップアップを表示し、ユーザーが星評価（1〜5星）とコメントを残せます。
- ジャンル（映画、ドラマ、アニメ、その他）を選択できます。
管理インターフェース：
- 記録された視聴履歴を閲覧・管理できる専用ページがあります。
- 検索、フィルタリング、ソート機能を提供し、ユーザーが簡単に過去の視聴履歴を探せます。
リアルタイム視聴状況表示：
- 現在視聴中の動画のタイトルと状況を画面上に一時的に表示します。
プライバシーに配慮：
- すべてのデータはユーザーのローカルストレージに保存され、外部に送信されません。
複数サービス対応：
- U-NEXT、Netflix、Amazon Prime Video、Disney+に対応しています。
ポップアップインターフェース：
- 拡張機能のアイコンをクリックすると、最近の視聴履歴と簡単な統計情報を表示するポップアップが開きます。

仕様

言語とフレームワーク

JavaScript (ES6+)を主要言語として使用しています。
HTML5とCSSを使用してUIを構築しています。

Chrome Extension API

Manifest V3を使用しています。これは最新のChrome拡張機能の仕様です。
chrome.storageを使用してデータを保存しています。(PC間でのデータ共有はない)
chrome.runtime.sendMessage()を使用してコンポーネント間で通信しています。

コンポーネント構成

background.js: バックグラウンドスクリプトとして動作し、メッセージの処理とデータの保存を担当します。
content.js: コンテンツスクリプトとして各ストリーミングサービスのページで動作し、視聴データの収集と評価ポップアップの表示を担当します。
popup.js: 拡張機能のポップアップUIのロジックを担当します。
manage.js: 管理ページのロジックを担当します。

データ保存

chrome.storage.localを使用してユーザーのローカル環境にデータを保存しています。

UIコンポーネント

純粋なJavaScriptとDOMマニピュレーションを使用してUIを構築しています。
React等のフレームワークは使用していません。

非同期処理

PromiseとasyncQ/awaitを使用して非同期処理を行っています。

イベント処理

DOM EventsとMutationObserverを使用して、ページの変更を検出しています。

メディア情報取得

HTMLのvideo要素とMedia Session APIを使用して、再生中の動画の情報を取得しています。

エラーハンドリング

try-catch文と独自のエラーハンドリング関数を使用してエラーを管理しています。

セキュリティ

Content Security Policy (CSP)を使用してセキュリティを強化しています。

パフォーマンス最適化

setIntervalを使用して定期的なデータ更新を行い、MutationObserverで必要な時のみDOMの変更を検知しています。

ロジックフロー

まず、content.jsスクリプトが現在のウェブページを監視し、ストリーミングサービスを検出します。動画再生が開始されると、定期的に（5秒ごと）ビデオ要素の情報を取得し、タイトル、再生時間、総時間などのデータを収集します。

これらのデータはbackground.jsに送信され、chrome.storage.localに保存されます。視聴の進行に応じてステータスが更新され、90%以上視聴すると「完了」とマークされ、評価ポップアップが表示されます。

ユーザーがページを離れたり閉じたりした場合、最後の視聴状態が「中断」として記録されます。また、タイトル情報の変更を検出するためにMutationObserverが使用されています。

管理ページ（manage.js）では、保存されたデータを取得し、ユーザーインターフェースに表示します。ここでは検索、フィルタリング、ソート機能が実装されており、ユーザーが簡単に過去の視聴履歴を確認できるようになっています。

問題

この拡張機能には3つの問題があります。

amazon prime問題

amazon primeは少し変わった構造をしており、自動的にビデオ再生を検知できません。その代わり、拡張機能をクリックすると、手動で入力できるようになっています。

タイトル自動取得

タイトルの自動取得ができません。原因は、ページのソースにタイトルのデータがありません。

Disny+検証不足

当方、Disney+を契約していないため動作未確認です。