jQueryプラグインは簡単にGoogle Chromeエクステンションにできる

この前作ったjQuery flickableをGoogle Chromeのエクステンションにしてみたらすごく簡単だった。
設定ファイルとJS、CSSを少し書くだけ。

ファイルリスト

適当なディレクトリに次のファイルを用意。

• manifest.json
• jquery.js
• jquery.flickable.js
• content_script.js
• content_style.css

manifest.json

エクステンションの設定ファイル。

{
  "name": "Flick Scroll", // エクステンションの名前
  "version": "0.1", // バージョン
  "description": "Enable flick scrolling like iPhone",　// 説明

  // 表示したページで実行するスクリプトを設定する
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"], // 対象のページ、この例ではすべてのページを指定
      "css": ["content_style.css"], // 読み込むCSSファイル
      "js": ["jquery.js", "jquery.flickable.js", "content_script.js"] // 読み込むJSファイル
    }
  ]
}

jquery.js

jQuery本体そのまま。

jquery.flickable.js

jQueryプラグイン本体そのまま。

content_script.js

プラグインを実行するJSファイル。下記で全部。

var element = $('body');

if (!element.hasClass('ui-flickable')) { // プラグインがすでに読み込まれていないかチェック
    element.flickable() // プラグイン呼び出し
        
　　　　// 必要に応じて処理を追加する
        .addClass('chrome-flick-scroll')
        .click(function() {
            $(this).flickable('refresh');
        });
}

content_style.css

表示したページに適用するCSS。

body.chrome-flick-scroll > .ui-flickable-container {
  cursor: pointer;
}

body.chrome-flick-scroll.ui-flickable-disabled > .ui-flickable-container, 
body.chrome-flick-scroll .ui-flickable-canceled {
  cursor: default;
}

表示したページにJSを当てるだけならこれだけでOK。
ディレクトリをzipで固めてアップロードすると公開できる。

※エクステンションは実験的に公開していたものだったので削除しました