Chromeブラウザを使っていると沢山のWEBページを開いていてTABが一杯になってしまうことありますよね？
実はChromeの表示はPCのメモリを消費してしまうため、沢山のTABを開いている状態では、メモリ不足になってPCではの速度が遅くなることがあります。
っていうか、ノートPCのなどで使っているとかなり致命的に遅くなる。
そんな時は、「OneTab」っていうExtensionを使うと、メモリを開放してくれて、それでもってTABの復活や個別に開くことも可能。
ブックマークしておくほどのURLでもないし・・・っていう作業中のTABはこれで整理して快適に使いましょう。
OneTab
バッジテキスト
リンク
#05 バッジテキストをつけてみよう
目的
ChromeExtensionのアイコンに数字をつける。（Gmailのメール着信数など）
必要なファイルと事前準備
ex2フォルダを作成
ex2/manifest.json
ex2/icon19.png
ex2/background.js
１、manifes.jsontファイルに追記
{
"name": "ex2",
"version": "0.1",
"manifest_version": 2,
"description":"バッジテキスト",
"background":{
"scripts":["background.js"]
}
}
※ポイント
「background」を追加
２、background.jsの作成
・リンク
http://developer.chrome.com/extensions/browserAction.html#method-setBadgeText
・reference
chrome.browserAction.setBadgeText(object details)
chrome.browserAction.setBadgeText({"text":"100"});
※文字列は最高で４文字ぐらいいける（半角）
popup.htmlが必要
どうやらmanifest.jsonの設定で「Browser_action」は外せないらしく
確認
Chromeブラウザの拡張機能に登録してみて、アイコンに「100」というバッジテキストが表示されていれば成功です。
色々なプログラム判定をして、中の数値を変更するようにしたり、文字列にしてみたりしてみよう。
ページの背景色の変更
リンク
#06 ページの背景色を変えてみよう (1)
#07 ページの背景色を変えてみよう (2)
#08 ページの背景色を変えてみよう (3)
目的
アイコンをクリックすると今いるページの背景色を変更する
事前準備
- ex2-1/
必要なファイル
- ex2-1/manifest.js
- ex2-1/icon19.png
- ex2-1/popup.html
- ex2-1/myscript.js
１、manifest.jsonを変更
{
"name": "ex2-1",
"version": "0.1",
"manifest_version": 2,
"description":"今いるページの背景色を変える！",
"permissions":[
"tabs" , "http://*/*"
],
"browser_action":{
"default_icon":"icon19.png",
"default_title":"ex2-1",
"default_popup":"popup.html"
}
}
* 解説
・permissionsのtabsを追加
・browser_actionで使わないファイルを外す
２、popup.htmlの変更
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body style="min-wifth:250px;">
<ul>
<li id="red">Red</li>
<li id="yellow">Yellow</li>
</ul>
<script src="myscript.js"></script>
</body>
</html>
３、myscript.js
* 参考
-
https://developer.chrome.com/extensions/tabs#method-executeScript
- chrome.tabs.executeScript(integer tabId, object details, function callback)
function changeColor(color){
chrome.tabs.executeScript(null, {
"code": "document.body.style.backgroundColor='"+color+"';"
});
}
document.getElementById("red").onclick = function(){
changeColor("red");
};
document.getElementById("yellow").onclick = function(){
changeColor("yellow");
};
* 解説
integer tabId : 対象タブのIDをセットする（nullにしておくと現在開いているtab）
object details : 実際のコードを記述
function callback : コードが実行された後によばれるコード（無くても良い）
４、確認
・拡張機能でex2-1を読み込む
・アイコンをクリックして、popup.htmlが表示されることを確認
・red,yellowの文字をクリックして表示しているページの背景色が変わるのを確認
・上手く行かない時は「右クリック -> 要素の検証」でconsole画面を開く
・consoleでerrorの確認
