サイトをJavaScriptで改造しよう | スマートフォンアプリ開発会社のエンジニアブログ

** はじめに
こんにちは。ビンゴ中西です。
お使いのサイトを自分にあうようにカスタマイズしたいときがありますよね。
そういうときはChromeの拡張を書いてしまいましょう。

** JavaScriptで書いていくのでjQueryが使いたいよ
JSで開発を進めるので、jQueryが使いたいところですね。
manifest.json という設定ファイルっぽいものがあるので、このファイルに指定しましょう。

{
  "manifest_version": 2,
  "name": "なまえ",
  "description": "さんぷる",
  "version": "0.1",
  "content_scripts": [
    {
      "matches": ["URL*"],
      "css": ["messi.min.css", "my_button.css"],
      "js": ["jquery.min.js","exdate.js","content_script.js","messi.min.js"],
      "run_at": "document_end"
    }
  ]
}

{

"manifest_version": 2,

"name": "なまえ",

"description": "さんぷる",

"version": "0.1",

"content_scripts": [

{

"matches": ["URL*"],

"css": ["messi.min.css", "my_button.css"],

"js": ["jquery.min.js","exdate.js","content_script.js","messi.min.js"],

"run_at": "document_end"

}

]

}

jsの欄に配列で、読み込んでもらいたいファイルを書けばok。
私は、他にも日付計算をするためのjQuery拡張exdate.jsなども読み込ますようにしてみました。
cssの欄にはCSSファイルも設定できるので、ネットにフリーで公開されているCSSを持ってきて、きれいなボタンなんかもすぐに導入することができます。

** tableタグを2次元配列で管理できるようにしたい
私はjQueryをほとんど使ったことがないのですが、tableタグを扱いやすいように2次元配列にしたい要求に駆られました。

var table = $("table.id tr").map(function(){
    return $(this).find("td").map(function(){
        return $.trim($(this).text());
    })
});

var table = $("table.id tr").map(function(){

return $(this).find("td").map(function(){

return $.trim($(this).text());

})

});

あとは、クラスとかいっぱい作ってカスタマイズしていきましょう。普通にJSでサイトを作っていく感覚と変わりません。

photo credit: Greg Gladman via photopin cc

Check

この記事はあなたの役に立ちましたか？他の人達にも役立ちそうでしたら、上のボタンより共有をお願いします。共有して頂けたら今後提供する記事の参考やモチベーションアップにつながります。