Amazonプライムが値上げだそうですが、Prime Videoの見放題終了日を表示するブラウザ拡張にパッチを当てた

なんだか Amazonプライム が値上げだそうですね。
私もAmazonプライムを利用しているので値上げは少し残念ですが、これも良いサービス継続のためと思って受け入れようと思っています。

ところで Amazon Prime Video って、見放題の期間が終了しそうな作品の検索ページがあるのですが、
[Amazon.co.jp: 30日以内にプライム会員特典ではなくなる作品](https://www.amazon.co.jp/s?rh=n%3A4217521051&brr=1&rd=1)

この作品検索ページに公開期限を表示してくれるChrome拡張/Safari拡張がありまして、それにパッチを当てましたのでご紹介します。

<img width="552" alt="expiration.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111017/88f0a905-440b-5d35-6cf0-d32a1e4a4ca8.png">
↑作品サムネイル画像をマウスオーバーすると、こんな感じで公開期限をポップアップ表示してくれます。

## 動機

本来のAmazonの作品検索ページでは肝心の「公開期限がいつか？」が分からず辛かったのですが、公開期限を表示してくれるChrome拡張をGithubで見つけた！
[harawata/prime-video-expiration-date: Amazon ビデオの "30 日以内にプライム会員特典ではなくなる作品" のリストに見放題終了日を表示します。](https://github.com/harawata/prime-video-expiration-date)
作者は [MyBatis](https://github.com/mybatis/mybatis-3) で有名な [harawata](https://github.com/harawata) さんです。

しかしこのコードは2017年頃に書かれたようで、残念ながら2019年4月現在のAmazon検索ページではうまく動作しませんでした。。。

そこでパッチを当てて動作するようにしました。

## インストール方法 for Chrome

~~本家のharawataさんにPull Requestしましたので、いずれ取り込まれるかもしれませんが、お急ぎの方は以下のリンクからパッチ版である`fix-for-amazon-updates`ブランチのソース一式を[Clone or Download]ボタン等でzipファイルをダウンロードして、~~
~~[htaketani/prime-video-expiration-date at fix-for-amazon-updates](https://github.com/htaketani/prime-video-expiration-date/tree/fix-for-amazon-updates)~~

早速、本家のharawataさんにマージしてもらいました！
以下の Releasesページから v1.1.0がDLできます。
[Releases · harawata/prime-video-expiration-date](https://github.com/harawata/prime-video-expiration-date/releases/)

解凍した中身の PrimeVideoExpirationDate.safariextension ディレクトリをChromeの [拡張機能(chrome://extensions/)](chrome://extensions/) ページにドラッグ＆ドロップしてインストールしてください。

Chromeの最新版(バージョン 73.0.3683.86)で動作確認しています。

## インストール方法 for Safari

オリジナルのプログラムはChromeとSafariの両対応しているとのことですのでSafari用の Info.plist にも修正を入れています。

インストール方法は [README](https://github.com/htaketani/prime-video-expiration-date/blob/fix-for-amazon-updates/README.md#safari) を参考にしてください。

しかしながら、私の修正が悪いのかインストール方法が悪いのか、手元のSafariにインストールを試みたものの動作させることができませんでした。。。
[未署名の機能拡張を許可]オプションを有効にしてみたりしたのですが、よく分かりませんでした。
私は普段Chromeしか使っていないため、Safariの機能拡張について明るくなく、このあたりの方法分かる方がいらっしゃいましたら、アドバイスいただければと思います。

## 修正に際して出会った技術的ないくつか

普段、フロントエンドは全くやらないので苦労しました。
何かおかしな所あったらご指摘ください。

### 脱jQuery？

オリジナルはjQueryを利用して書かれていましたので、最初は「ついでにjQueryを使わずに書き直そうかな」とも思ったのですが、ちょっと面倒で結局jQueryをそのまま利用しています。

とりあえず、jQueryを最新版 v3.4.0にアップグレードしておきました。

### AmazonのAPIが返すjsonの末尾にゴミ

`https://www.amazon.co.jp/gp/video/hover/(ASINコード)` で得られる json は以下のような形式ですが、なぜか末尾にゴミ？のような文字列「&&&」がくっついていました。

```json:末尾にゴミのあるjson
["hover-body","<div id=\"av-hover-body\" >...</div>"]&&&
```

最初はこれに気付かずに、jQueryの`$.getJSON()`が働かないことに首をかしげました。
この「&&&」って何なんでしょう？

```js:JSONパースできずにエラー
$.getJSON(url, opts, function(data){
  ...
});
```

APIのレスポンスを、正規表現で末尾のゴミを除去してからJSON.parse()するように修正しました。

```js:末尾のゴミを除去してからJSONパース
$.get(url, opts, function(raw){
  // json末尾の"]"以外の文字を削除
  var json = raw.replace(/[^\]]+$/, "");
  var data = JSON.parse(json);
  ...
}, "text");
```


## 注意

本extensionではPrime Videoホーム画面のマウスホバー時の作品概要を得るAPIを利用しています。
元々のREADMEにも書かれていますが、ここで利用しているAPIでは公開期限が必ず提供されるわけでは無いようです。
公開期限が表示されていない作品はいつ期限切れを迎えるかは分かりませんのでお早めに。

逆に言えば、期限表示されている作品は安心して視聴を先延ばしできる、と考えることもできるかもしれませんが、いずれにしても過信は禁物です。


## 最後に

プライムビデオで「[砂の器 デジタルリマスター版](https://www.amazon.co.jp/gp/video/detail/B01MCY0TFI)」を見ました。
加藤嘉の熱演にやられました。