カテゴリー:
Google Chrome
閲覧数:858 配信日:2013-01-28 14:26
仕様
・「Browser Actionアイコン」をクリックすると、「設定ページ」で設定した色へ変更
「拡張機能オプション設定ページ」作成方法
Step 1: Declare your options page in the manifest(マニフェスト「manifest.json」に会員オプションページを宣言)
{
"name": "My extension",
...
"options_page": "options.html",
...
}Step 2: Write your options page（会員オプションページを作成）
・オプションページ作成例はこちら
▼manifest.json
{
"manifest_version": 2,
"name": "My First Browser Action",
"description": "はじめての拡張！",
"version": "0.1",
"background": {
"scripts": ["background.js"]
},
"options_page": "options.html",
"permissions": [
"tabs", "http://*/*"
],
"browser_action": {
"default_icon": "icon19.png",
"default_title": "My First Extension"
}
}▼background.js
chrome.browserAction.onClicked.addListener(function() {
var color = localStorage['color'] ? localStorage['color'] : 'red';//デフォルトは赤
chrome.tabs.executeScript(null, {code: "document.body.style.backgroundColor='"+color+"'"});
});▼options.html
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="utf-8"></head>
<body onload="restoreColor();">
<h1>Choose Your Color</h1>
<input type="radio" name="colors" value="1"> Red
<input type="radio" name="colors" value="2"> Green
<input type="radio" name="colors" value="3"> Yellow
<input type="button" id="save" value="Save!">
<script src="myscript.js"></script>
</body>
▼myscript.js
var colors = document.getElementsByName('colors');
function restoreColor() {
switch(localStorage['color']) {
case 'red':
colors[0].checked = true;
break;
case 'green':
colors[1].checked = true;
break;
case 'yellow':
colors[2].checked = true;
break;
default:
colors[0].checked = true;
break;
}
}
function saveColor() {
if (colors[0].checked===true) {
localStorage['color'] = 'red';
}
else if (colors[1].checked===true) {
localStorage['color'] = 'green';
}
else if (colors[2].checked===true) {
localStorage['color'] = 'yellow';
}
}
document.body.onload = restoreColor;
document.getElementById('save').onclick = saveColor;※ 「if (colors[0].checked)」より、「if (colors[0].checked===true)」の方が良い▼icon19.png
「Manifest version 1」コードを「Manifest version 2」で動作させるには？
・manifest.jsonにmanifest_versionを追加
"manifest_version": 2,・html に書いたJavaScript部分は外部ファイルへ移動。その外部ファイルを htm lで読込
・onclick属性は削除。idを付け、対応
・bodyにつけたonload属性は削除