#05-09 「Browser Action」 ✕ 「バッジテキスト」

#05 前回作ったBrowser Actionにバッジテキストをつけていく
・バッジ … ブラウザ操作で必要に応じて表示される - アイコン上に積層されるテキストの形式の数字。限られたスペースに表示されるため、4文字以下である必要がある
・具体的には、「setBadgeTextメソッド」「setBadgeBackgroundColorメソッド」を利用して、バッジの「テキスト」と「色」を設定する

---

#06 バッジテキストを表示するために、拡張機能動作中に機能するJavaScriptを作成
Background Pages … 拡張機能の裏側で走っているページのこと
・レッスン時とURLが異なる(公式サイトリニューアルに伴い）
▼background.js

chrome.browserAction.setBadgeText({text:"100"});

▼manifest.json
・追記

    "background": {

        "scripts": ["background.js"]

    },

・[ツール]-[拡張機能]で、「リロード」すると、設定が反映される

---

#07-09 現在いるページを操作。色を変えるためのスクリプトを作成
・前回と違い、クリックしたら、リンクされるのではない
・自分で、指定ページに移動してからクリックすると、色が変わる、というもの
・まるで、あの「Greasemonkey」みたいに！
▽chrome.tabs - Google Chrome
▼popup.html

<!DOCTYPE html>

<html lang="ja">

<head><meta charset="utf-8"></head>

<body style="min-width:250px">

<ul>

<li id="red">red</li>

<li id="blue">blue</li>

</ul>

<script src="myscript.js"></script>

</body>

</html>

▼myscript.js

function changeColor(color) {

  chrome.tabs.executeScript(null, { code: "document.body.style.backgroundColor='"+color+"'" });//nullは現在のタブに対して、という意味

}



document.getElementById('red').onclick = function() {

  changeColor('red');

};

document.getElementById('blue').onclick = function() {

  changeColor('blue');

};

▼background.js

chrome.browserAction.setBadgeText({text:"100"});

▼manifest.json

{

		"manifest_version": 2,

    "name": "My First Browser Action",

    "description": "はじめての拡張！",

    "version": "0.1",

    "background": {

        "scripts": ["background.js"]

    },

    "permissions": [

        "tabs", "http://*/*"

    ],

    "browser_action": {

        "default_icon": "icon19.png",

        "default_title": "My First Extension",

        "default_popup": "popup.html"

    }

}

・全てのサイトで、という意味