• WEB

簡単!Chrome拡張機能の作り方

  • つっつ
    つっつ デザインちーむ
  • このエントリーをはてなブックマークに追加
簡単!Chrome拡張機能の作り方

どうもつっつです。
今日は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なんです。
すごく単純なんですねー

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

ソースコードは、必ずUTF-8で保存してください!

動作方法

  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で行う感じにしてます。

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

このエントリーをはてなブックマークに追加

つっつが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ