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です。
<!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>
popup.js
UIクリック時のイベントなどをこの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);
}
}
動かす
外に公開する場合にはこれらのファイルを1つのフォルダにまとめたzipを上げればいいだけですが、
Google Checkoutで5ドル払えと言われるので実際にはローカルでのテストに留めます。
chrome://extensions/にアクセスしてデベロッパーモードをオンにします。
次にパッケージ化されていない[拡張機能を読み込む]を選択してこれらのファイルがあるフォルダを選択します。
すると右上にボタンが表示されるので、適当なサイトを開いてボタンを押してみましょう。
そして[取得]をクリック。タイトルとURLがテキストエリアに入れば成功です。
参考
- 日本語で参考になるのはこちら：
Google chrome extension(拡張機能)を開発してみた | スマートネットワーク 開発ブログ - チュートリアル：
Tutorial: Getting Started (Hello, World!) – Google Chrome Extensions – Google Code - 公開するときはここで：
Developer Dashboard – Google Chrome extension gallery
投稿者紹介
-
私たちは、テクノロジに魅せられた個性あふれるメンバーによって構成された茨城県日立市に本社を構えるベンチャー企業です。
”テクノロジを通して「驚き」と「感動」を創造し、人々の「夢」と「笑顔」を支えます。” の経営理念をモットーに明るい未来を描き、ワクワクする企画提案を続けて参ります。
最近のエントリ
レポート2019.10.28ユニキャストレストランを開催しました🍳
レポート2019.08.29社内研修ワークショップ～マシュマロ・チャレンジ～
レポート2019.08.06Computex/InnoVEX 出展者・通訳として参加してきました。
レポート2018.06.12Computex 2018 レポート