サイトのテーマカラーを変えるだけのChrome拡張

概要

http://neue.cc/
こちらのサイトを読んでいたら目が疲れてきたので、
テキストと背景の色を変更する"browser action"型のchrome拡張を作成。

generator-chrome-extensionを使用してテンプレに乗っかる。

完成イメージ

コード

重要そうな部分だけ抜粋

contentscript.js

contentscript.jsは、
ページの中に挿入されるスクリプト。
ページのDOMにアクセスできる。

contentscript.js

var data = {
    simple: {
        color: "#666666",
        background: "#ffffff"
    },
    sepia: {
        color: "#622d18",
        background: "#f0ddc3"
    },
}

function changeColor(type) {
    $('body').css({
        'background': data[type].background,
    });
    $('div, p, span, input, textarea').css({
        'color': data[type].color,
    });
}
changeColor('simple'); // 初期色

// メッセージを受ける準備
chrome.runtime.onMessage.addListener(function(request, sender, callback){
    if(request){
        changeColor(request);
    }
})

popup.js

popup.jsはブラウザアクション時に表示される、
popup.htmlに読み込まれるファイル。
popup上のDOMにアクセスできる。

popup.js

var queryInfo = {
    active: true,
    windowId: chrome.windows.WINDOW_ID_CURRENT // 設定しないと複数タブを開いたときにバグる
};

chrome.tabs.query(queryInfo, function(tab){
    $('button').on('click', function() {
        var colorType = $(this).attr('data-color');
        // タブにメッセージを送る
        chrome.tabs.sendMessage(tab[0].id, colorType, function(response){});
    })
})

参考
難しいことを考えずに30分でChrome拡張をささっと作る手順
Chromeのオリジナル拡張機能を開発しよう（ソースコードあり）