ニコニコ動画のマイリスト登録を動画視聴ページ内で完結できる拡張機能 Nico Mylist Add Contener

chrome.google.com

ニコニコ動画はマイリスト登録のときに別タブに左遷させるのをやめろ

これに尽きる

概要

ニコニコ動画の動画視聴ページから画面左遷をすることなく、マイリスト登録ができます。もちろんマイリストコメントつき

f:id:naari_3:20170630231345p:plain

f:id:naari_3:20170630231429p:plain

flash版は対応が雑です。ページの作りがよくわからなかったからです。

chrome.google.com

経緯

人間だったら一度はマイリスト登録したい時ってあるとおもうんですけど、ニコニコ動画のマイリスト登録というのは、別タブや別ウィンドウに飛ばされて、その先で登録する場所、登録時コメントを入力することになります。

この飛ばされた先の画面って全く情報がなく、一つのセレクトボックス、一つのテキストエリア、二つのボタンだけで出来ているんですが、わざわざ別ページとして設ける必要があるのか?と常々疑問に思っておりました。

さて、ニコニコ動画なのですが、例えば http://www.nicovideo.jp/my/mylist を開いた際に、ソースコード内に NicoAPI.token とかいうのが記述されています。

これは本当にそのままで、ニコニコ動画の各種アクションを行う際に必要なものになっているようです。(公式にはなんの記述もされてないです)

もちろんのこと、マイリスト関連の操作(e.g. http://www.nicovideo.jp/api/mylist/add)もできるわけなので、僕らで何かを設けてあげれば、それはもう自由自在にマイリスト登録ができるのではないかと考えました。

それで作ったのがこの拡張機能です。

実装

jQueryでDOMをゴリゴリと追加しているだけです。

今日のドワンゴエンジニアのハッカソンで色々手直ししようと思っていたのですが、本当に読みづらいコードになってしまっており、とても暫定的な雑な手段で一番気になっていた変な挙動を修正しました。

というエピソードができたくらいとても雑で、時間とモチベがあるなら1から書き直したいくらいです。

一つの完結した機能を持ったものなので、Vue.jsとか使ってゴリゴリさせたいという気分があるのですが、如何せん詳しくないので知見を溜めつつ実装したいなと思います。

あとはcookieを取得するという動作はbackgroundを使わないと実現できない(語弊ありそう)らしいので、sendMessageとaddListenerでうまくcookieをフロントに渡すようにしています。よくできた機構だなあと思います。

Contenerというのは自分が英語に弱いことが原因で発生したtypoです。

なんで今公開したのか

実はこのコードですが、去年のクリスマスイブに一気に書き上げたもので、chromeのstoreには公開していませんでした。

今回、ドワンゴエンジニアのハッカソンがあると聞いて、黙々と趣味プログラミングができるのであれば何か公開できるものがいいなと考えた所、まだ公開していないこの拡張機能があったので、先程言及したバグ取りをした後に手書きアイコン*1を追加して公開することで、ハッカソンの成果とすることにしました。

実質3行の修正とアイコン*2を描いたくらいの変更なので、時間が余ってしまいましたが、その部分は別のスクリプトを書くことで時間の消費をしていました。

理由はどうであれ、個人的にとても好きで、いつも使っている拡張機能なので、公開まで踏み切れて少し嬉しいです。

もしよければ使ってください。

chrome.google.com

また、OSSなので勿論PRも受け付けています。汚いコードが好きな方は見てみると良いかと思います。そのうちガラッと一新するので汚いのも今のうちだけですよ

github.com

ほんとにつかいやすいので是非

chrome.google.com

*1:f:id:naari_3:20170630233316p:plain

*2:f:id:naari_3:20170630233316p:plain