Chrome拡張 "REMP it"

  • このエントリーをはてなブックマークに追加

YouTube動画を連続再生できるWebアプリREMPChrome拡張 "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.jsarray function使って

videos = _.union(linkVideos, iframeVideos, paramVideos);

としています。またChrome拡張で表示されるポップアップのHTMLを生成する際のtemplateも利用しています。underscore.js 便利。

もろもろ実装した内容は、Githubのhideack / remp-chrome-extensionに公開しています。

何かリクエスト等あれば、上のgithub issueやコメント等で頂ければ幸いです。

(Visited 8 times, 1 visits today)
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*