Auto hide next up card for Amazon Prime Video - Next up等の邪魔な要素を非表示にするChrome/Firefoxの拡張機能・ユーザースクリプト
Amazon Prime VideoのNext up等の邪魔な要素を非表示にする「Auto hide next up card for Amazon Prime Video」を開発しました。Chromeの拡張機能版、Firefoxの拡張機能(アドオン)版、ユーザースクリプト版があります。いずれも機能は全く同じです。
概要
以下の機能を実装しています。
- 非表示ボタンの自動クリックとdisplay:noneの設定によるNext upの非表示
- 非表示ボタンの自動クリック時にオーバーレイ表示を5秒間無効化
- Next upの出現と同時に画面が暗くなるのを防ぐ（非表示ボタンが無い場合のみ）
- オーバーレイ表示が有効な時はNext upを表示する（非表示ボタンが無い場合のみ）
- この機能はデフォルトでは無効状態
- 動画終了時にサジェストされたコンテンツに遷移するのを防ぐ（自動再生が有効の場合）
- 動画終了時の次のエピソードへの遷移は通常通り機能
- イントロスキップボタンの非表示
- オーバーレイ表示が有効な時にのみイントロスキップボタンを表示させることも可能
- この機能はデフォルトでは無効状態
- オーバーレイ表示が有効な時にのみイントロスキップボタンを表示させることも可能
- レーティングの非表示
- オーバーレイ表示が有効な時に暗くならないようにする
- この機能はデフォルトでは無効状態
- 文字とアイコンを黒で縁取りすることも可能
- 中央のボタン（再生/停止、戻る、進む）を下部に移動する
- この機能はデフォルトでは無効状態
動画右上にオプションダイアログを開くことができるオプションアイコンが追加されます。
オプションダイアログでは上記機能の有効/無効の切り替えが可能です。
オプションダイアログはAlt + Pで開くことも可能です。（ショートカットキーは変更可能）
オプションダイアログ上で設定を変更した場合は設定反映のためにページをリロードしてください。
コードは各国のAmazonのページ上で実行されますが、動作テストは日本のPrime Video上でのみ行いました。
Next up、動画終了時の遷移の挙動について
以下は2024年7月時点での挙動です。
- 「自動再生が有効」かつ「次のエピソードが存在する」場合
Next upが表示されてから5秒後に次のエピソードに自動的に遷移するようです。この場合は非表示ボタンが表示され、非表示ボタンをクリックすることができれば自動遷移はキャンセルされます。
この拡張機能では非表示ボタンの自動クリックを行うことで動画の途中で次のエピソードに遷移することを防ぎます。自動再生が有効な場合は動画終了時にのみ次のエピソードに遷移するようになります。 - 「自動再生が有効」かつ「次のエピソードが存在しない」場合
Next upにはサジェストされたコンテンツが表示され、15秒後にそのコンテンツに自動的に遷移するようです。この場合も非表示ボタンで自動遷移をキャンセルできます。
この拡張機能による非表示ボタンの自動クリック機能では動画終了時の遷移についてはキャンセルできないため、サジェストされたコンテンツへの遷移を防ぐ機能についても実装しています。 - 「自動再生が無効」の場合
Next upには非表示ボタンが表示されず、別の動画への遷移は発生しないようです。
この拡張機能では単にNext upの要素にdisplay:noneを設定して非表示にします。
Firefox版の注意点（Firefox 126以下）
Firefox版もChrome版と同じくManifest V3の拡張機能としてリリースしましたが、Firefox 126以下ではManifest V3の拡張機能の権限設定のデフォルトの状態がChromeとは異なります。
拡張機能として特定のサイト上でコードを実行させるには拡張機能が要求するサイトへのアクセス権限を有効にする必要があり、Chromeでは拡張機能をインストールした際にデフォルトで有効な状態になります。一方でFirefox 126以下でManifest V3の拡張機能をインストールした場合、サイトへのアクセス権限がデフォルトで無効になっており、ユーザーが手動で有効化する必要があります。手順としては以下になります。
- about:addons を開く
- Auto hide next up cardの項目をクリックする
- 「権限」タブをクリックする
- 「追加機能の任意の権限」に列挙されているアクセス権限を有効にする
Firefox 127からはManifest V3の拡張機能の権限の確認・許可がインストールフローに含まれるため、インストール後に手動で有効にする必要はありません。
開発経緯等
元々は2023年9月辺りにNext upと自動再生の挙動が変わったことをうけ、単に非表示ボタンの自動クリックとdisplay:noneの設定によるNext upの非表示を行うユーザースクリプト・拡張機能としてリリースしたものが「Auto hide next up card for Amazon Prime Video」でした。
Next upは動画終盤（エンディング等）に差し掛かると右下に表示される要素（カード、小窓）のことで、クリックするとNext upに表示されている次のエピソードやサジェストされたコンテンツに飛べる機能を持っています。また、「Next up、動画終了時の遷移の挙動について」で書いたようにNext upと関係のある設定として自動再生の設定があり、自動再生を有効にしている場合かつ次のエピソードが存在する場合には動画の終了に合わせて自動で次のエピソードに飛ぶようになっています。
当時挙動が変わるまではNext upに時間経過での自動遷移機能は付随していませんでしたが、2023年9月辺りにエンディングに差し掛かるタイミングでNext up表示＆次のエピソードへの自動遷移機能が追加され、今現在は「Next up、動画終了時の遷移の挙動について」で書いたような挙動となっています。当時こそ終了時間の計算をミスったバグか何かだろうと思っていましたが、今現在も変わっていませんし、何よりサジェストされたコンテンツについても2024年7月に自動再生の対象になってしまったため、これはAmazonの意図した通りの挙動で間違いないと思います。
Next upに付随する時間経過での自動遷移は自動再生を無効にした状態であれば発生しないので、その場合はStylus等の拡張機能を使ってCSS（display:none）を適用するだけで何の問題もなくNext upを非表示にすることが可能ですが、自動再生を有効にしておきたい場合はCSSでの非表示のみでは時間経過での自動遷移が無効化できません。Next upの非表示ボタンをクリックすることで自動遷移をキャンセルすることは可能で、元々Auto hide next up cardはそれを行うためにリリースしたものでした。そこから機能を追加していき今に至ります。
当時、Prime Videoの要素を扱うNetflix Marathon (Pausable)等のユーザースクリプトや拡張機能の実装を軽く調べた限りではNext upの要素の構造はどの国のPrime Videoでも同じっぽいということが分かったので、各国のAmazon及びprimevideo.comでコードが実行されるようにしました。ただし現在も動作テストは日本のPrime Video上でのみ行っているため、amazon.co.jp以外での動作に問題があっても私には対処できないと思います。
Changelog
v2.4.6 - 2024/12/16
- Next upの出現と同時に画面が暗くなるのを防ぐ機能の修正
- 要素の監視とクラスのトグルを行う代わりに、ページにCSSを追加するように変更
- v2.4.4/v2.4.5で「Next up出現以降」というテキストになっていたのを「Next upの出現と同時に」に修正
https://ryo-fujinone.net/blog/archives/2104v2.4.5 - 2024/12/14
- Next upの出現と同時に画面が暗くなるのを防ぐ機能の修正
v2.4.4 - 2024/12/14
- Next upの出現と同時に画面が暗くなるのを防ぐ機能を追加（自動再生が無効の場合のみ）
v2.4.3 - 2024/08/04
- サジェストされたコンテンツに遷移しないようにする機能の改善
- CSSのインデントの改善
v2.4.2 - 2024/07/24
- オーバーレイ表示を5秒間無効にする機能に関するバグの修正
- 中央のボタンを下部に移動する機能から"実験的"ラベルを削除
- 同じ内容のstyleタグが追加される場合がある問題の修正
- styleタグ作成時に使用するCSSのフォーマットを改善
v2.4.1 - 2024/07/23
- 文字とアイコンを黒で縁取りする機能の追加
- video要素が検出されなくなっていた問題の修正
- オプションダイアログの開閉に伴う動画の一時停止/再生が再び機能するように
- ショートカットキーによるオプションダイアログの開閉が再び機能するように
- オプションダイアログの日本語テキストの修正
v2.4.0 - 2024/07/12
- 動画終了時にサジェストされたコンテンツに遷移しないようにする機能の追加
v2.3.1 - 2024/05/23
- 不要なコードを削除
- いくつかのconsole.log()をコメントアウト
v2.3.0 - 2024/05/21
- オプションダイアログにバージョン表示を追加
- オーバーレイ表示が有効な時に暗くならないようにする機能の追加
- この機能はデフォルトでは無効状態
- 中央のボタン（再生/停止、戻る、進む）を下部に移動する機能の追加（実験的）
- この機能はデフォルトでは無効状態
- オプションダイアログにページのリロードを促すテキストを追加
- 非表示に関わる各関数をtry-catchでラップ
- オプションダイアログの日本語のテキストを修正
v.2.2.4 - 2024/05/12
- レーティングが非表示にならないようになっていた問題の修正（新しいレーティング要素のサポートを追加）
v2.2.3 - 2024/04/07
- オプションダイアログを開くためのショートカットキーを無効にするオプションを追加
v2.2.2 - 2024/03/30
- 同じ内容のstyleタグが追加される場合がある問題の修正
v2.2.1 - 2024/03/29
- 最初に追加された動画プレイヤーのコンテナ要素に対してのみ機能していた問題の修正
v2.2.0 - 2024/03/24
- オーバーレイ表示が有効な時にイントロスキップボタン、Next upを表示する機能を追加
- この機能はデフォルトでは無効状態
- オプションダイアログを開くためのショートカットキーを変更する機能を追加
- 要素の監視処理の改善
- オプションダイアログを閉じた際にイベントリスナーが削除されない問題を修正
- 拡張機能のアイコンの色を調整
- バージョンの検証方法を変更
v2.1.1 - 2024/01/07
- オプションダイアログの外側をクリックした場合にオプションダイアログを閉じるように
- オプションダイアログの開閉に応じて動画を停止/再生するように
- 拡張機能のバージョン取得処理をtry-catchでラップ
v2.1.0 - 2023/12/07
- "イントロをスキップ"ボタンを非表示にする機能を追加
- localStorageに保存されているバージョン値が古い場合にオプションデータを更新するように
v2.0.1 - 2023/11/11
- オプションダイアログのテキストを修正
- コーディングスタイルの調整
v2.0.0 - 2023/11/06
- 非表示ボタンの自動クリック時にオーバーレイ表示を5秒間無効化する機能を追加
- レーティングを非表示にする機能を追加
- 設定変更のためのオプションダイアログを追加
v1.0.1 - 2023/11/02
- primevideo.comのサポートを追加
v1.0.0 - 2023/10/24
- リリース