[Chrome extension] 高速勉強 #2「バッジテキスト、Browser-Action」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

Chromeブラウザを使っていると沢山のWEBページを開いていてTABが一杯になってしまうことありますよね?
実はChromeの表示はPCのメモリを消費してしまうため、沢山のTABを開いている状態では、メモリ不足になってPCではの速度が遅くなることがあります。
っていうか、ノートPCのなどで使っているとかなり致命的に遅くなる。
そんな時は、「OneTab」っていうExtensionを使うと、メモリを開放してくれて、それでもってTABの復活や個別に開くことも可能。
ブックマークしておくほどのURLでもないし・・・っていう作業中のTABはこれで整理して快適に使いましょう。

OneTab

バッジテキスト

リンク

#05 バッジテキストをつけてみよう

目的

ChromeExtensionのアイコンに数字をつける。(Gmailのメール着信数など)

必要なファイルと事前準備

ex2フォルダを作成
ex2/manifest.json
ex2/icon19.png
icon19
ex2/background.js

1、manifes.jsontファイルに追記< ・h3>

※ポイント
「background」を追加

2、background.jsの作成

・リンク
http://developer.chrome.com/extensions/browserAction.html#method-setBadgeText

・reference

chrome.browserAction.setBadgeText(object details)

※文字列は最高で4文字ぐらいいける(半角)

popup.htmlが必要

どうやらmanifest.jsonの設定で「Browser_action」は外せないらしく

確認

Chromeブラウザの拡張機能に登録してみて、アイコンに「100」というバッジテキストが表示されていれば成功です。
色々なプログラム判定をして、中の数値を変更するようにしたり、文字列にしてみたりしてみよう。

スクリーンショット 2016-09-03 11.41.18

ページの背景色の変更

リンク

#06 ページの背景色を変えてみよう (1)
#07 ページの背景色を変えてみよう (2)
#08 ページの背景色を変えてみよう (3)

目的

アイコンをクリックすると今いるページの背景色を変更する

事前準備

– ex2-1/

必要なファイル

– ex2-1/manifest.js
– ex2-1/icon19.png
icon19
– ex2-1/popup.html
– ex2-1/myscript.js

1、manifest.jsonを変更

* 解説
・permissionsのtabsを追加
・browser_actionで使わないファイルを外す

2、popup.htmlの変更

3、myscript.js

* 参考
– https://developer.chrome.com/extensions/tabs#method-executeScript
– chrome.tabs.executeScript(integer tabId, object details, function callback)

* 解説
integer tabId : 対象タブのIDをセットする(nullにしておくと現在開いているtab)
object details : 実際のコードを記述
function callback : コードが実行された後によばれるコード(無くても良い)

4、確認

・拡張機能でex2-1を読み込む
・アイコンをクリックして、popup.htmlが表示されることを確認
・red,yellowの文字をクリックして表示しているページの背景色が変わるのを確認
・上手く行かない時は「右クリック -> 要素の検証」でconsole画面を開く
・consoleでerrorの確認

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です