Google ChromeのHello World的な拡張機能を自作する

Pocket
LINEで送る

この記事の所要時間: 519

Google Chromeの拡張機能を自作してみます。
HelloWorld的なものでボタンが押されたらタブのタイトルとURLが取得される仕様とします。

今回必要なものは以下5種類になります。テキストファイルはすべてUTF-8Nで保存してください。

  • manifest.json
  • popup.html
  • popup.js
  • jquery-1.6.1.min.js
  • 16×16と128×128のpng形式アイコン

今回のサンプルHelloTabのソースはここからダウンロードできるので、アイコンはそれを使いまわしてください。

ソース

ソースはHTMLのコーディングとほとんど変わりありません。
それがGoogle Chromeに組み込まれた拡張機能か、Webサイトとして公開されているかどうかの違いしかありません。
そのため、既存のJavaScriptライブラリはほとんど使いまわせることになります。
このエントリではjQuery1.6を使用しています。

manifest.json

拡張機能の名前やバージョンを規定するファイルです。

{
  "name": "HelloTab",
  "version": "1.0",
  "description": "現在選択されているタブのタイトルとURLを取得する拡張機能。",
  "icons": {
    "16": "icon_16.png",
    "128": "icon_128.png"
  },
  "browser_action": {
    "default_icon": "icon_16.png",
    "popup": "popup.html"
  },
  "permissions": [
    "tabs"
  ]
}

popup.html

UI部分を定義するHTMLです。
[html]
<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<style type="text/css">
#text {
width: 500px;
height: 100px;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<form>
<textarea id="text"></textarea>
<input id="fetch" type="button" value="取得" />
</form>
</body>
</html>
[/html]

popup.js

UIクリック時のイベントなどをこのJavaScriptに仕込みます。
[javascript]
/** popup.js */
var c = chrome;
var ws = c.windows;
var tbs = c.tabs;

$(function() {

/** 取得ボタンが押されたときのイベントをバインド */
$(‘#fetch’).click(function () {
setTextAreaUrlAndTitle();
});

});

/** 現在選択されているタブのURLとタイトルを取得してテキストエリアに設定する */
function setTextAreaUrlAndTitle() {
try {
ws.getCurrent(function (window) {
tbs.getSelected(window.id, function (tab) {
var url = tab.url;
var title = tab.title;
var formattedLinkText = title + "n" + url;
$(‘#text’).attr(‘value’, formattedLinkText);
});
});
} catch (e) {
alert(e);
}
}
[/javascript]

動かす

外に公開する場合にはこれらのファイルを1つのフォルダにまとめたzipを上げればいいだけですが、
Google Checkoutで5ドル払えと言われるので実際にはローカルでのテストに留めます。

chrome://extensions/にアクセスしてデベロッパーモードをオンにします。
次にパッケージ化されていない[拡張機能を読み込む]を選択してこれらのファイルがあるフォルダを選択します。

すると右上にボタンが表示されるので、適当なサイトを開いてボタンを押してみましょう。
そして[取得]をクリック。タイトルとURLがテキストエリアに入れば成功です。

参考

投稿者紹介

株式会社ユニキャスト
私たちは、テクノロジに魅せられた個性あふれるメンバーによって構成された茨城県日立市に本社を構えるベンチャー企業です。
”テクノロジを通して「驚き」と「感動」を創造し、人々の「夢」と「笑顔」を支えます。” の経営理念をモットーに明るい未来を描き、ワクワクする企画提案を続けて参ります。

人気の記事

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP

%d人のブロガーが「いいね」をつけました。