Auto hide next up card for Amazon Prime Video v2.2.0 リリース
Amazon Prime VideoのNext up等の邪魔な要素を非表示にする「Auto hide next up card for Amazon Prime Video v2.2.0」をリリースしました。v2.2.0ではユーザースクリプト版とChromeの拡張機能版に加えてFirefoxの拡張機能(アドオン)版もリリースしました。
この記事はv2.2.0における変更点等を書いています。「Auto hide next up card for Amazon Prime Video」の概要については以下の記事をご確認ください。
https://ryo-fujinone.net/blog/archives/1541v2.1.1からの変更点
v2.1.1からの主な変更点は以下の通りです。
- Firefox版をリリース
- オーバーレイ表示が有効な時にのみNext upを表示させる機能を追加
- デフォルトではこの機能は無効
- この機能はNext upに非表示ボタンが存在しない場合にのみ機能
- オーバーレイ表示が有効な時にのみイントロスキップボタンを表示させる機能を追加
- デフォルトではこの機能は無効
- オプションダイアログを開くためのショートカットキーを変更できるように
- ページを開いた際の要素監視処理の改善
- 拡張機能のアイコンの調整
- リポジトリの構成の変更
Prime Videoのイントロスキップボタンは表示されてから7秒程度で非表示になりその後はオーバーレイ表示が有効な時にのみ表示されるという仕様なので、これまでのAuto hide next up cardのように完全に非表示にしてしまうとイントロスキップボタンを使いたい時に使えないという状態になっていました。そこで、オーバーレイ表示が有効な時にのみ表示できる機能を追加しました。
Next upは非表示ボタンのクリックにより要素が完全に消えるので、オーバーレイ表示が有効な時にのみ表示する機能は非表示ボタンが存在しない場合にのみ機能します。
v2.2.0では「普段の視聴時はイントロスキップボタンとNext upを非表示にしておきたいが、オーバーレイ表示が有効な時は表示させたい」という状況に対応できるようになりました。オーバーレイ表示が有効かどうかは動画右上のボタン郡の要素の属性を監視して判定するようにしています。
なお、オプションダイアログ上で設定を変更した後は設定反映のためにページをリロードしてください。
ショートカットキーの設定機能は、Auto hide next up cardのショートカットキーとして扱っているAlt+PがGoogle製のピクチャーインピクチャー(PiP)の拡張機能であるPicture-in-Picture Extensionのデフォルトのショートカットキーと被っていたために追加したものです。Picture-in-Picture ExtensionはChromeの拡張機能が使用できるキーボードショートカット機能を使用しているようなのでそちらの設定を変更することで対処は可能ですが、PiPをAlt+Pで切り替えている人のことを考慮するとAuto hide next up cardにショートカットキーの設定を追加した方が良いかという結論に至りました。ユーザースクリプト版とコードを完全に共通化させているため、拡張機能のAPIは使用せずに実装しました。
ちなみに、Picture-in-Picture Extensionの問題なのかどうか判断出来ていないのですが、Auto hide next up card側でショートカットキーを変更しても、たとえページのリロードをしたとしてもAlt+PでPicture-in-Picture Extensionが機能しないことがあるっぽい？です。その場合はChromeの拡張機能のキーボードショートカットの設定ページ(chrome://extensions/shortcuts)で一度Picture-in-Picture Extensionのショートカットキーを未設定にし、改めてAlt+Pを登録するとPiPが機能することを確認しました。
ページを開いた際の要素監視処理の改善は、これまではページを開いた際に要素の監視処理(MutationObserver)が複数個動いていたのをv2.2.0では1つのみにし、Prime Videoの動画が見える状態になった場合(動画が開かれた場合)に他の処理に続けるようにしたという感じです。
Firefox版の注意点
Firefox版もChrome版と同じくManifest V3の拡張機能としてリリースしましたが、Firefox 126以下ではManifest V3の拡張機能の権限設定のデフォルトの状態がChromeとは異なります。
拡張機能として特定のサイト上でコードを実行させるには拡張機能が要求するサイトへのアクセス権限を有効にする必要があり、Chromeでは拡張機能をインストールした際にデフォルトで有効な状態になります。一方でFirefox 126以下でManifest V3の拡張機能をインストールした場合、サイトへのアクセス権限がデフォルトで無効になっており、ユーザーが手動で有効化する必要があります。Firefoxの拡張機能のページにて説明文でも触れていますが、手順としては以下になります。
- about:addons を開く
- Auto hide next up cardの項目をクリックする
- 「権限」タブをクリックする
- 「追加機能の任意の権限」に列挙されているアクセス権限を有効にする
Firefox 127からはManifest V3の拡張機能の権限の確認・許可がインストールフローに含まれるため、インストール後に手動で有効にする必要はありません。
リポジトリの構成の変更について
Auto hide next up cardは元々はちょっとしたユーザースクリプトとしてTampermonkeyのエディター上で書いた物で、これまではユーザースクリプトとして書いたコードをChromeの拡張機能のコンテンツスクリプトとしてコピペ（場合によってはその逆も）という感じで開発していました。リポジトリにはChromeの拡張機能のファイルをそのまま置いている状態でした。今回、Firefox版を追加するにあたり、良い機会だったのでリポジトリの構成を変更しました。
Chrome版とFirefox版の開発・動作確認のためにweb-extのrunコマンドを使用できるようにしました。ブラウザのプロファイルやブラウザ起動時のURL等、web-ext runでの設定についてはenv-cmdを使用して.env.chromeと.env.firefoxに記述した内容が反映されるようにしています。
ユーザースクリプト版と拡張機能版とでコードを完全に共通化していることや、難読化やminifyを求めていなかったこともあり、拡張機能のビルドというかzipとしての出力は単にmanifest.jsonをChrome用とFirefox用で変えるだけにしています。
ユーザースクリプトは以下の記事を参考にRollupでビルド、watchできるようにしました。
https://qiita.com/munieru_jp/items/ce57ec8c839f4a8727beユーザースクリプトのメタデータ（ヘッダー）部分についてはuserscript-metadata-generatorで生成するようにしました。
ユーザースクリプト開発時におけるページのオートリロードを可能にするためにrollup-plugin-auto-reloadを採用しました。オートリロードは.env.userscriptで有効/無効を切り替えられるようにしています。私の場合、Prime Videoとの相性もあると思いますがオートリロード込みで開発というのを試してみるとオートリロードがウザいとしか思えなかったので今のところは無効にしていますが…。今後Rollupでページのオートリロードが必要になった時のための予習だと思ってrollup-plugin-auto-reloadを試してみたという感じです。
億劫になったので今回ESLintは採用していませんが、それでもこれまでと比べるとかなりマシなリポジトリになった気がします。
雑感
v2.2.0での追加機能や改善点により、Prime Videoの邪魔な要素を非表示にする拡張機能としてはかなり完成してきた感が私の中ではあります。
記事執筆時点でChrome版はユーザー数が1000人を超えそうな感じで、嬉しい限りです。Chrome版と比べるとユーザースクリプト版はあまり人気がないのはちょっと残念ですが。
今回Firefox版を用意した理由の9割くらいは、AMO(addons.mozilla.org)でのFirefoxのアドオンのリリースを試してみたかったからというものです。これまでユーザースクリプトとChromeの拡張機能については割と触れてきたと思っていますがFirefoxのアドオンはほとんど触れてこなかったので。ユーザースクリプト版とChrome版とでコードを共通化させていてかつFirefoxでは使えなさそうなJavaScriptのメソッドは採用していないはずのAuto hide next up cardなら特にFirefox向けに調整する必要も無いだろうと思った次第です。実際、Firefox用のmanifest.jsonを用意した以外では今のところはChrome版との違いはありません。