Google Chromeのアイコンをクリックで実行する拡張機能の作り方

拡張機能(アドオン)を追加すると「設定」のボタンの左側にも拡張機能のアイコンが追加されます。
拡張機能によっては、このアイコンをクリックする事で実行開始する物もあります。

アイコンをクリックで実行する拡張機能の作り方

前回「Google Chromeの起動で実行する拡張機能」の作成方法を記しました。
今回も、それを改造してアイコンをクリックでアラートを表示する拡張機能の作り方を記してみます。

■「manifest.json」の作成

manifest.json

{
	"name": "アラートを出す",
	"version": "1.0",
	"manifest_version": 2,
	"description": "アラートを出すだけの拡張機能",
	"icons":
	{
		"16":"icon16.png",
		"48":"icon48.png",
		"128":"icon128.png"
	},
	"browser_action":
	{
		"default_icon": "icon16.png",
		"default_title": "アラート"
	},
	"background":
	{
		"scripts": [ "script.js" ]
	}
}
各項目の説明
“browser_action” 押すアイコンの設定。
“default_icon” 押すアイコンの画像。
“default_title” アイコンにカーソルを合わせた時に出るメッセージ。
■「script.json」の作成

マニュフェストファイルで指定したスクリプトを書きます。

script.json

var script01 = function()
{
	alert("拡張機能を実行しました");
};

(function()
{
	chrome.browserAction.onClicked.addListener(script01);
})();

chrome.browserAction.onClicked.addListenerに設定した関数をアイコンを押した時に実行させます。
アイコンを左クリックすると「拡張機能を実行しました」と表示します。

これらを作ったらChromeに登録します。
登録の仕方はGoogle Chromeの拡張機能の作成方法を参考にしてください。

実行結果

Chromeに登録したらメニューの左横に新しくアイコンが追加されます。

add-on
このアイコンを左クリックすれば
add-on
このアラートが表示されます。

次回は実用的な機能「Google Chromeの左側のタブを閉じる拡張機能の作り方」を記します。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

関連コンテンツ
スポンサーリンク