カテゴリー:
Google Chrome
閲覧数:903 配信日:2013-01-28 14:14
#05 前回作ったBrowser Actionにバッジテキストをつけていく
・バッジ … ブラウザ操作で必要に応じて表示される - アイコン上に積層されるテキストの形式の数字。限られたスペースに表示されるため、4文字以下である必要がある
・具体的には、「setBadgeTextメソッド」「setBadgeBackgroundColorメソッド」を利用して、バッジの「テキスト」と「色」を設定する
Badge
Browser actions can optionally display a badge — a bit of text that is layered over the icon. Badges make it easy to update the browser action to display a small amount of information about the state of the extension.
Because the badge has limited space, it should have 4 characters or less.
Set the text and color of the badge using setBadgeText() and setBadgeBackgroundColor(), respectively.
Browser actions can optionally display a badge — a bit of text that is layered over the icon. Badges make it easy to update the browser action to display a small amount of information about the state of the extension.
Because the badge has limited space, it should have 4 characters or less.
Set the text and color of the badge using setBadgeText() and setBadgeBackgroundColor(), respectively.
#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"
}
}・全てのサイトで、という意味
"permission": [
"tabs", "http://*/*"
],
"tabs", "http://*/*"
],