JavaScript：ChromeExtension：アイコンをクリックしたら新しいタブを開きたい
Last-modified: 2013-08-24 (土) 02:14:21 (3891d)
Top / JavaScript：ChromeExtension：アイコンをクリックしたら新しいタブを開きたい
JavaScript：GoogleChromeのExtensionでJavaScriptを勉強する
JavaScript?：ChromeExtension?：アイコンをクリックしたら新しいタブを開きたい †
ChromeのExtensionのアイコンを開いたら、新しいタブでExtensionのコンテンツを表示したかったです。
一見manifest.jsonに記述するだけでいけそうな気がしていたのですが、なんか無理っぽいので、backgroundページのjsで何とかする方法をとりました。
いちよう、ここを見ました ■Formats: Manifest Files
実際のソース †
ファイルはソース3つ＋アイコンです。
- manifest.json
- background.js
- top.html
■manifest.json
{
"manifest_version": 2,
"name": "ChromeExtensionNewTabTest",
"description": "ChromeExtensionNewTabTest",
"version": "1.0",
"permissions": [
"tabs"
],
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png"
}
}
■background.js
chrome.browserAction.onClicked.addListener(function() {
chrome.tabs.create({url: "top.html"});
});
■top.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>アイコンをクリックしたらタブが開くChrome Extensionサンプル</title>
<style>
h1,h2 { color:blue; font-style:italic }
.IMPORTANT{
font-weight: bold;
font-size: 150%;
margin: 0 1in 0 1in;
background-color: yellow;
border: solid red 8px;
padding: 10px;
}
.IMPORTANT h1, .IMPORTANT h2 { text-align; center }
#special {
text-align: center;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1>アイコンをクリックしたらタブが開くChrome Extensionサンプル</h1>
<div class="IMPORTANT">
<h2>重要</h2>
これはアイコンをクリックしたらタブが開くChromeExtensionのサンプルです。
CSS、JavaScriptの勉強がてら作ってます。
</div>
<p id="special">
このエリアは小文字を大文字に変換して出力します。<br />
Lower-case letters are transformed upper-case letters in this area.
</p>
</body>
</html>
ポイント †
ポイントは以下の通り。
- manifest.jsでbackgroundページのスクリプトとして、「background.js」をロードする
- background.jsの中で、アイコンがクリックされた場合のイベント処理として、「chrome.tabs.create」で新しいタブを開く
■APIリファレンス：browserAction
