はじまり

仕事ではJavaScriptを殆ど書かなくなってしまったけど、毎日のはてブ巡回ではJavaScriptの情報を追っていた。
そこでたまたま tacamy さんのスライド

はじめてのJavaScript / JS Girls Tokyo #1 // Speaker Deck

を見て、Chrome Extensionすげー！って思った。JS Girlsというのもあるのね。
仕事中もずーっとChrome Extensionの事を考えていて、もしかしたら今の業務で面倒だと思っている作業が簡単に出来るかもしれない、と閃いた。
作業短縮、ミスも減る！！メリットしかない！という事で作り方の勉強から。

勉強方法

まずはドットインストールで概要を勉強。他の人との共有の仕方まで理解出来た。
右クリックのTwitter検索便利。

Google Chrome拡張機能入門 (全20回) - プログラミングならドットインストール

次に、 JS Girlsのハンズオン資料と本家のサンプルで勉強。
とてもわかりやすくて理解が深まった気がする。画像を取得して表示するのいいなー。

作り始める

やりたいこと

HTMLを表示
表示しているHTMLをスクレイピングして必要な要素を抽出
抽出した要素からjsonを作成
作成したjsonをクリップボードにコピー出来る
Chrome Extensionのアイコンは、必要なページにのみ表示

やりたいことは決まっていたのだが、今まで勉強した内容ではどうやったらいいかわからなかった。。。
サンプルにヒントがないか見ていたら、ぴったりのサンプルが見つかった！

https://developer.chrome.com/extensions/samples

のMappy
pageAction.showやextension.onRequestで検索していたら出てきたサンプル
上記のやりたいことを実現するための要素が全部入っていたと思う。

作成方針

Mappyのコードを見てどう作ればいいのかイメージが湧いた

background.jsでアイコンクリック前に裏側で処理をしておく
content scriptの呼び出し
HTMLをスクレイピングしてjson作成
作成したjsonをbackground.jsの変数に保持
それをpopup.jsで使う

作成

サンプルとリファレンスを見ながらチマチマ作成。1.5日位で使えそうなのが出来た。
jsonを作りたいHTMLを表示してアイコンをクリックすればOK！
Bootstrap使用

f:id:gawao:20140413010508j:plain

仕事で使うツールなのでぼかしを。ほぼぼけてる。。
あとは技術的なメモを。

manifest.json

特定のURLのみ有効にしたかったのでmatchesにURL指定
jQuery使用

  "permissions": [
    "tabs", "*://example.com/test/*"
  ],

  "page_action": {
     "default_icon": "icons/icon19.png",
     "default_title": "TEST",
     "default_popup": "popup.html"
  },

  "background": {
    "scripts": ["jquery-2.1.0.min.js", "background.js"]
  },
  "content_scripts": [{
     "matches": ["*://example.com/test/*"],
     "js": ["jquery-2.1.0.min.js","script.js"]
  }]

background.js

popupから使うための変数を定義
拡張を有効にするかの判定
content scriptにmessageを送る
content scriptからレスポンスを受け取る

// Global accessor that the popup uses.
var jsonDatas = null;

var updateJson = function(tabId, tab) {
    if(tab.url.indexOf('example.com/test') == -1) {
        return;
    }

    // message send
    chrome.tabs.sendMessage(tabId, {}, function(res) {
        jsonDatas = res;
        if(!res) {
            chrome.pageAction.hide(tabId);
        } else {
            chrome.pageAction.show(tabId);
        }
    });
};

// PageAction
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if(changeInfo.status == 'complete') {
        updateJson(tabId, tab);
    }
});

script.js

messageの受け取り
HTMLスクレイピング
json作る
作ったjsonを返す

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
     sendResponse(buildJson());
});

popup.html & popup.js

拡張アイコンをクリックした時に表示されるもの
jsonを整形して表示
コピーボタンの処理

   <script src="jquery-2.1.0.min.js" type="text/javascript"></script>
    <script src="popup.js" type="text/javascript"></script>

var addCopyEvent = function() {
    var copyBtn = $('#copy');
    var resultMsg = $('#resultMsg');
    copyBtn.on('click', function() {
        var copyArea = $('textarea');
        copyArea.select();
        var result = document.execCommand('copy');
        if(result) {
            resultMsg.fadeIn().delay(800).fadeOut();
        }
    });
};

$(function() {
    var jsonDatas = chrome.extension.getBackgroundPage().jsonDatas;
    if(jsonDatas) {
        showJson(jsonDatas);

        addCopyEvent();
    }
    addInfoToggleEvent();
});