どうもつっつです。
今日はChrome拡張機能の作り方を、簡単に紹介していきたいと思います。

フォームに入力された文字列を置換する拡張機能

どんなものをつくるのかというと、フォームに入力された文字列を置換する拡張機能です！

大量にあるテキストエリアの文字列を一括で変換したいなんて考えた事ありませんか？？
今回はもっとも？？簡単な方法で作成していきたいと思います。

開発ツールとか必要なの？

GoogleChrome、テキストエディター(メモ帳など)

単純ですよねー余計に●●をインストールなんてのも特にありません。

用意するファイル！

• jquery.js これがないと始まらない定番JSフレームワーク
• main.js ここにメインの処理を記述していきます
• style.css 見栄えを整えるcss
• manifest.json 超重要！設定を定義するファイル

フォルダー(名前はなんでもOKだけど英語がいいかな、今回はtestとします)
これらをtestフォルダーの中に格納します。

で、、、今日は省略って事でこちらに示すコードを各用意作成したファイルにペタペタ貼り付けていってください。

main.js

$(function() {
    //bodyの直下にこの拡張用のHTMLを生成する処理
    $("body").prepend("<div id='seo_replace_str'></div>");
    stylesheet = chrome.extension.getURL('style.css');
    sethtml0 = '<link rel="stylesheet" href="'+stylesheet+'" type="text/css">';
    sethtml1 = '<label>検索する文字　<input type="text" id="match"></label>　　<label>置換する文字　<input type="text" id="replace"></label>　';
    sethtml2 = '<input type="button" value="置換" id="submit_replace"> <input type="button" value="元に戻す" onclick="location.reload();" id="submit_replace_return">'
    $("#seo_replace_str").html(sethtml0+sethtml1+sethtml2);

    //メインの処理 置換ボタンを押すと処理がスタートします
    $("#submit_replace").click(function(){
        if($('#match').val()==""){
            //検索文字列が空の場合は何もしない
        } else{
            $("input:not('#match'):not('#replace'):not('#submit_replace'):not('#submit_replace_return'), textarea").each(function(){
                var replace_str = $(this).val().replace($('#match').val(), $('#replace').val());
                if(($(this).val().indexOf($('#match').val())!=-1)){
                    $(this).css("background", "#FCFFBC");
                    $(this).val(replace_str);
                }
            });
        }
    });
});

style.css

body{
    background: #fff;
    position: absolute;
    top: 50px;
    width: 100%;
}

#seo_replace_str {
    position:fixed;
    z-index:2147483647;
    top:0px; left:0px;
    background: linear-gradient(to bottom, rgba(221, 233, 242, 1) 0%,rgba(196, 216, 230, 1) 100%);
    width:100%;
    padding:10px 10px 10px 10px; text-align:center;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}

#seo_replace_str *{
    display:inline-block;
    padding: 0;
}

#seo_replace_str input{
    width:200px;
}

#submit_replace_return{
    width:100px !important;
}

manifest.json

{
    "name": "Form Replace Tools",
    "version": "0.1",
    "manifest_version": 2,
    "description": "Replace Form Text",
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": [
                "jquery.min.js",
                "main.js"
            ]
        }
    ],
    "web_accessible_resources":["style.css"],
    "permissions": ["http://*/*"]
}

どうです貼り付けできましたか？？とりあえずこれで作業は完了です！

あれ？？って気づいた方もいるかもしれませんが実は拡張の実態はHTML、CSS、JavaScriptなんです。
すごく単純なんですねー

ではこれをどうやって動作させるか、、、

動作方法

1. Chromeのアドレスバーにchrome://extensions/と打ち込み
2. デベロッパーモードにチェックを入れ、
3. 「パッケージ化されてない拡張機能を読み込む」でtestフォルダーを選択読み込んでください
4. 有効にチェック

そして適当にブラウザーにurlを打ち込んで、、、

こんな感じで表示されたら成功です。

ね！簡単でしょ？？

応用させる場合は

これが必要最低限のファイルとなります多分。

例えばもっとjQueryのライブラリーをもっと読み込みたい場合は、、、
jQueryライブラリーを用意して、manifest.jsonのこの強調した部分にこんな感じで記入してください。

sample.jsを追加した例

{
    "name": "Form Replace Tools",
    "version": "0.1",
    "manifest_version": 2,
    "description": "Replace Form Text",
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": [
                "jquery.min.js",
                "main.js",
                "sample.js"
            ]
        }
    ],
    "web_accessible_resources":["style.css"],
    "permissions": ["http://*/*"]
}

で、main.jsに処理したいコードをゴリゴリ書いてみてください。

ちなみに今回はHTMLの生成をjQueryで行う感じにしてます。

ではでは書き出したら長くなるので今日はこれくらいで失礼します。