[Chrome extension] 高速勉強 #3「background処理」

2016年9月6日

Chrome Extension テクノロジー プログラミング

Chromeエクステンションを使うとChromeブラウザをカスタマイズできます。 ブラウザをカスタマイズできると、自分の使いやすいブラウザが構築できるようになります。 もし仮にWEB関連の仕事をしているとしたら、テストや検証のツールを作ることなどは簡単にできます。 こりゃあ、覚えておくと、仕事の効率がアップするって事だな・・・って考えたんですが、浅はかでしょうか?

background処理

目的

拡張機能のアイコンをクリックするだけでページの背景色を変更する。

リンク

#09 クリックだけで背景色を変えてみよう

目的

popupウィンドウを表示せずにIconをクリックしただけで背景色を変更する。

作業

「ex2」をフォルダ毎コピーして「ex3」を作成

必要なファイル

icon19.png manifest.json background.js

1、manifest.json

{ "name": "ex3", "version": "0.1", "manifest_version": 2, "description":"背景色を変更する!2", "permissions":[ "tabs", "http://*/*" ], "background":{ "scripts":["background.js"] }, "browser_action":{ "default_icon":"icon19.png", "default_title":"ex3" } }

2、background.jsの作成

* 参考 - https://developer.chrome.com/extensions/browserAction#event-onClicked - chrome.browserAction.onClicked.addListener(function callback) chrome.browserAction.onClicked.addListener(function(){ chrome.tabs.executeScript(null, { "code": "document.body.style.backgroundColor='green';" }); });
* 解説 function callback : スクリプトが起動された時に実行されるコード

3、確認

・拡張機能に登録 ・アイコンボタンをクリックしてページの背景色が変更されることを確認(緑色になるだけ)

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。