YouTube動画を連続再生できるWebアプリREMP用Chrome拡張 "REMP it" をリリースしました。
これを利用すると、Chrome拡張のアイコンをクリックするだけで、閲覧中のページ中に埋め込まれているYouTubeのリンクからREMPのプレイリストとして取り込むことができます。
インストールはChromeウェブストアから簡単にできますので是非お試しください。
初めてChrome拡張書いてみて
今回初めてChrome拡張を作ってみたのですが、最初とっきつきにくいところもあったのですが、一度概要を飲み込めれば比較的作りやすく、また情報もWeb上に大量に公開されているので参考になります。
注意点としては、Chrome拡張で定義するmanifestのバージョンが現在は2ですが、リリース当初の情報も数多く公開されているままの状態なので、その辺りを気をつけて参照する必要はあります。
Chromeで実際に配布したり、利用できる様にパッケージ化するのにはcrxmakeというGemを使うとrakeタスクですぐにパッケージを生成することが出来て便利でした。
具体的な実装の箇所で試行錯誤したのは、Webページ中のYouTubeリンクを列挙する処理で、このあたりは素直に以下の様な形で走査してます。
var parser = function(target, property) { var $frames = $(target); var ids = [], url, match, i; var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/; for (i = 0; i < $frames.length; i++) { url = $frames[i][property]; match = url.match(regExp); if (match && match[7].length == 11) { ids.push(match[7]); } } return ids; } linkVideos = parser('a', 'href'); iframeVideos = parser('iframe', 'src'); paramVideos = parser('param', 'value');
また、同一ページ中に複数の同じYouTube動画のURLが含まれることもあり得るので、このあたりは上記の複数の走査結果をunionさせるのにunderscore.jsのarray function使って
videos = _.union(linkVideos, iframeVideos, paramVideos);
としています。またChrome拡張で表示されるポップアップのHTMLを生成する際のtemplateも利用しています。underscore.js 便利。
もろもろ実装した内容は、Githubのhideack / remp-chrome-extensionに公開しています。
何かリクエスト等あれば、上のgithub issueやコメント等で頂ければ幸いです。
最近のコメント