がわおメモ

どこかの誰かのお役に立てれば。

Chrome Extensionが作れた!

はじまり

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

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

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

勉強方法

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

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

作り始める

やりたいこと

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

Mappy
pageAction.showextension.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

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();
});

おわり

無事に作成と配布を完了!
定期的にメンテナンスをして使っている。
HTMLの構造が変わると修正しないといけない、、という弱点はあるが、作業がグッと楽になった。
ようやく役に立てたかな。。。

何よりも、作るのがすごく楽しかった!こういうものは自分のテンションが上がる方法でやるのが一番だなぁ。
今までにない集中力で作ったと思う。
何これ楽しい〜って思うのは、やっぱりJavaScript使ってる時だなーと実感。

参考