フェンリル

Developer's Blog

jQuery を使って 30 分で Chrome 拡張を作ってみた

こんにちは。坪内です。
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 同様、困ったときに何らかの解決法が載っているかも。

フェンリルのソーシャルアカウント

Sleipnir の Facebook ページでは、ユーザーの方たちとのコミュニケーションや最新情報の投稿などを行なっています。よろしければいいね!してください!

Facebook コメント

コメント

灏忓瀷鍐疯數搴?鐪併偍銉?7銉儍銉堛儷鍨?Peltism advanced銈枫儶銉笺偤 symphony wood black 锛堛偡銉炽儠銈┿儖銉笺偊銉冦儔銉栥儵銉冦偗锛?銉夈偄鍙抽枊銇?涓€浜烘毊銈夈仐 1銉夈偄 銆怰CP銆戙€2015年09月22日 7:16

これはになります素晴らしいブログは、うあなたがあること興味そうすることでインタビュー約|あなたはどれだけどのように デザインさを、それ?もしそうであればメールを受け取る!

ソニー BRAVIA(ブラビア)KDL-40W900A [40Våž‹ 地上?BS?110度CSデジタルハイビジョン液晶テレビ 3D対応 ※3Dメガネåˆ2015年09月22日 17:22

スウィートブログ!ヤフーニュースで 間、私はそれを見つけました。ヤフーニュースに記載されて取得する方法について| 提案のヒント何かありますか?私はしばらくの間しようとしてきたが、私はそこに着くように見えることはありません! 感謝

銆愭婧栧彇銈婁粯銇戙偟銉笺儞銈广€慞anasonic(銉戙儕銈姐儖銉冦偗)銆愩儝銉笺偪銉间咕鐕ユ鑳戒粯銇嶃€戙€愬乏闁嬨亶銆戙儔銉┿儬寮忔礂婵咕鐕ユ銆屻儣銉併儔銉┿儬銆嶏紙娲2015年09月23日 9:05

ねえ率い、あなたが数を知らせる|正しくロードされていない画像を写真はちょうどあなたに与えたいと思った。私はよく分からない理由が、私はそのリンクの問題だと思います。 私は2つの異なるでそれを試してみたし、両方が同じ結果。

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。