こんにちは。坪内です。
jQuery ってすごいですね。何でもできますね。そして、Chrome の拡張ってめっちゃカンタンに作れるんですね。
jQuery を使って、Sleipnir 3 for Windows とか Sleipnir Start の検索結果ページにファビコンを追加する Chrome 拡張、その名も Favicon2SleipnirSearch をサクッと作ってみました。
jQueryとChrome 拡張についてカンタンな説明
jQuery とは
jQuery は JavaScript のライブラリです。普通に JavaScript で十数行くらいコードを書かないといけないようなプログラムでも、jQuery では、一行で済んだりします。使い方もカンタンなので、とりあえず自分で何か動かしたい、とか自分のWeb サイトで何か動的なことがしたい、って言う人にはとっつきやすくていいかもしれません。
⇒ jQuery 公式サイトへ
⇒ CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました[Web Design RECiPES]
Chrome拡張とは
Google Chrome をはじめとする Chromium ベースのブラウザで利用できる拡張機能のことです。Chrome Web Store にいけば、めちゃくちゃたくさんの拡張機能があります。もちろん WebKit に対応した最新の Sleipnir 3 for Windows でも利用できます。ちなみに、私は、パスワードマネージャとして名高い Lastpass を愛用してます。
⇒ Chrome Web Store
⇒ Google Chrome 拡張機能60個まとめ Google Chrome を壊してまで厳選[Webマーケティング ブログ]
作ったものはこれだ
Sleipnir の検索結果にファビコンを挿入する拡張を作りました。ファビコンで視覚的に検索結果が見られるのは便利！
ソースコード
以下がソースコードです。Chrome拡張にはmanifest.jsonという設定ファイルのようなものが必要で、ここに私はどんな拡張で、どんなリソースにアクセスしますよ、とかどんなサイトで動きますよ、っていうのを書いておきます。jQueryもここで読み込みます。
ちなみに、manifestのバージョンが2以降はセキュリティがかなり厳しくなって、インラインスクリプトとかが書けなくなりました。画像ファイルなんかも、何を読み込むか、ちゃんと、manifest内に記載が必要です。
動かすスクリプトは別で用意します。ファイル名は何だって構いませんが、manifest.jsonファイル内に記載が必要です。
でも、たったこれだけでChrome拡張ができるんですね。簡単カンタン。
manifest.json
{
"name": "Favicon2SleipnirSearch",
"version": "0.0.1",
"manifest_version": 2,
"description": "FaviconをSleipnirの検索結果に挿入する拡張。",
"content_scripts": [
{
"matches": ["http://search.fenrir-inc.com/*"],
"js": ["jquery.min.js","script.js"],
"run_at": "document_start"
}
]
}
説明
name:拡張の名前
version:拡張のバージョン
manifest_version:マニフェストのバージョン。1はもうすぐ使えなくなるらしい。
description:拡張の説明（必須ではない）
cotent_scripts:特定のページ内で動作するスクリプトはこの項目に記載します。どのサイトで、どのスクリプトを、どのタイミングで動かすか。
ほかにも、iconとか設定する項目もあります。
script.js
$(function(){
$("a.l").each(function(){ //検索結果ごとに処理しますよ。
var domain = $(this).attr('href'); //URLを取得しますよ。
var domain2 = domain.match(/^[httpsfile]+:\/{2,3}([0-9a-zA-Z\.\-:]+?):?[0-9]*?\//i); //取得したURLのドメイン部分だけ取り出しますよ。
var favget = "//www.google.com/s2/favicons?domain="+domain2[1]; //Googleさんのファビコン取得APIのURLを入れますよ。
var favgethtml = "<img src='"+favget+"' class='favi'/>"; //上記のURLを画像ファイルタグにしますよ。
$(this).parent().prepend(favgethtml); //タイトルの前に上記のタグを挿入しますよ。
});
});
拡張をインストールしてみよう
Chrome Web Storeで公開するには、$5払って開発者登録しなくてはなりません。小一時間悩んだところで、ここで公開することにしました。下記圧縮ファイルをダウンロード後、任意の場所に解凍してください。
Favicon2SleipnirSearch
そして、拡張機能画面（アドレスバーに chrome://chrome/extensions/ と打ち込んでください。）の右上のディベロッパーモードというチェックボックスにチェックを入れてください。
その下に「パッケージ化されていない拡張機能を読み込む」というボタンが表示されるので、こちらをクリックして、先ほど解凍したファイルを選択します。
無事に読み込み終わったら、Sleipnirの検索窓から検索してみましょう。以下のように検索結果のタイトル横にファビコンが表示されていたら成功です。
いろいろいじってみよう
さきほどの、script.jsをいろいろいじくってみると、Sleipnirの検索結果画面で遊べます。jQueryでCSSをいじるだけでも楽しかったりしますよ。
例えば、横幅100%にしたり、文字色変えたりとかもカンタンです。ファイルをいじくったら、拡張機能画面にある「リロード」をクリックすると、拡張がリロードされます。manifest.json 内の matches に新たなサイトを追加するなどして楽しんでみてください。
Chrome 拡張開発の際に参考になるサイト
そんなこんなで、もっとあんなこともできたらいいなぁなんて思ってくると、自分で一から Chrome 拡張が作りたくなってくるもんです。そんなアグレッシブなあなたのために Chrome 拡張開発の参考になる Web サイトをいくつかピックアップしてみました。
- Chrome拡張入門
情報としてはチョット前のものですが、Chrome 拡張開発って何ぞやというのを理解するのにいいと思います。 - Google Chrome Extensions
Google 公式の Chrome 拡張開発ページです。きっと何度もお世話になるでしょう。 - Stack Overflow Chrome Extension タグ
Stack Overflow の Chrome 拡張開発に関する投稿タグです。普通に検索かけても、Stack Overflow ばっかりヒットすると思いますが。わからないことがあればここを見ると解決方法が載っているかもしれません。 - Google グループ Chromium Extensions
Chromium Extension に関する Google グループ内のフォーラムです。Stack Overflow 同様、困ったときに何らかの解決法が載っているかも。
フェンリルのソーシャルアカウント
関連記事
