HiiHahWIKI - making some notes for... -
JavaScript:ChromeExtension:アイコンをクリックしたら新しいタブを開きたい
をテンプレートにして作成
開始行:
[[JavaScript:GoogleChromeのExtensionでJavaScriptを勉強す...
*JavaScript:ChromeExtension:アイコンをクリックしたら新...
ChromeのExtensionのアイコンを開いたら、新しいタブでExtens...
一見manifest.jsonに記述するだけでいけそうな気がしていたの...
いちよう、ここを見ました
■Formats: Manifest Files
-http://developer.chrome.com/extensions/manifest.html
***実際のソース [#d2a08869]
ファイルはソース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; ...
<title>アイコンをクリックしたらタブが開くChrome Exte...
<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 Extensi...
<div class="IMPORTANT">
<h2>重要</h2>
これはアイコンをクリックしたらタブが開くChromeExte...
CSS、JavaScriptの勉強がてら作ってます。
</div>
<p id="special">
このエリアは小文字を大文字に変換して出力します。<b...
Lower-case letters are transformed upper-case lett...
</p>
</body>
</html>
***ポイント [#yca53d06]
ポイントは以下の通り。
-manifest.jsでbackgroundページのスクリプトとして、「backg...
-background.jsの中で、アイコンがクリックされた場合のイベ...
■APIリファレンス:browserAction
-https://developer.chrome.com/extensions/browserAction.ht...
■APIリファレンス:tabs
-https://developer.chrome.com/extensions/tabs.html#method...
終了行:
[[JavaScript:GoogleChromeのExtensionでJavaScriptを勉強す...
*JavaScript:ChromeExtension:アイコンをクリックしたら新...
ChromeのExtensionのアイコンを開いたら、新しいタブでExtens...
一見manifest.jsonに記述するだけでいけそうな気がしていたの...
いちよう、ここを見ました
■Formats: Manifest Files
-http://developer.chrome.com/extensions/manifest.html
***実際のソース [#d2a08869]
ファイルはソース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; ...
<title>アイコンをクリックしたらタブが開くChrome Exte...
<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 Extensi...
<div class="IMPORTANT">
<h2>重要</h2>
これはアイコンをクリックしたらタブが開くChromeExte...
CSS、JavaScriptの勉強がてら作ってます。
</div>
<p id="special">
このエリアは小文字を大文字に変換して出力します。<b...
Lower-case letters are transformed upper-case lett...
</p>
</body>
</html>
***ポイント [#yca53d06]
ポイントは以下の通り。
-manifest.jsでbackgroundページのスクリプトとして、「backg...
-background.jsの中で、アイコンがクリックされた場合のイベ...
■APIリファレンス:browserAction
-https://developer.chrome.com/extensions/browserAction.ht...
■APIリファレンス:tabs
-https://developer.chrome.com/extensions/tabs.html#method...
ページ名: