こんにちは。坪内です。
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); //タイトルの前に上記のタグを挿入しますよ。
});
});