Chrome拡張 "REMP it"

REMP コンピュータ

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やコメント等で頂ければ幸いです。