カラフルプログラム

プログラムについて気になったトピックを、ちょっと調べて載せます。最近気になっているのは、rubyとTypeScriptとChromeExtensionです。

Chrome Extensionでjqueryを使って、背景を変えてみる!

サンプルページに、背景色を変更するサンプルがあった。

Set Page Color Popup

しかし、これをタダ動かしても面白く無いので、

jqueryで動作させようと思う。

 まずサンプルをダウンロード

上記からサンプルをダウンロードして、解凍します。

そしてChromeに読み込ませる。

jQuery

jQueryも適当なものを落としてきます。

同一フォルダに入れます。

 

ソースをちょっと変更する。

popup.htmlで、jQueryを読み込みます。

<script src="jquery-2.1.4.js"></script>

popup.jsをまるまる書き換えます。

$(function () {
$('#red, #blue, #green, #yellow').click(function(e) {
chrome.tabs.executeScript(null,
{code:"document.body.style.backgroundColor='" + e.target.id + "'"});
window.close();
});
});

これで、動作します。

次は、設定内容を保存するフォームを作ってみようかと思います。