誰得なChrome拡張機能をつくってみた。 - 夢見る大学生のはてな日記

このサイトに飛ぶだけの拡張機能を作ってみましたとさ。

1. 必要なもの

manifest.json

icon.png

background.html

2. manifest.json

拡張機能のメインとなるものみたい。
以下のように記述していきます。

{
  "name": "夢見る大学生のはてな日記へ",
  "description": "夢見る大学生のはてな日記へ行くことが出来ます。毎日来てくださいね。(*´∀｀)", 
  "version": "1.0", 
  "browser_action": {
    "default_icon": "icon.png"
  },
  "background_page": "background.html"
}

上から順に、

name : タイトル
description : 拡張機能の説明
version : バージョン情報
browser_action : "default_icon"で、アイコンを指定する必要あり
background_page : 今回の場合↑でAPI?があれば終わりそうなんですがないので、"background.html"というものを用意することでアイコンをクリックされた際の動作を指示しました。

という感じ。

3. background.html

ここで、バックグラウンドでアイコンがクリックされたかどうかを判定を行うイベントリスナーを作っていきます。

<script>
  chrome.browserAction.onClicked.addListener(function(tab) {
  chome.tabs.create({ url: 'http://d.hatena.ne.jp/nk87/', selected: true });
});
 </script>

こちらも簡単に以下に解説しておきたいと思います。
ただ、"アイコンがクリックされたら新しいタブを作って、サイトひらいてね！"ってことなんですが。

chrome.browserAction.onClicked.addListener(function(tab){ ... }); : クリックされた際に呼び出されるイベント。
chrome.tabs.create(object createProperties, function callback) : 新しいタブを作成。

詳しくはリンク先を御覧ください。(^_^;)