Chromeの拡張機能を作成してみた〜3〜

####前回の続き
[Googleの拡張機能を作成してみた](https://qiita.com/migikata-agari/items/434858999257f6ca52be)
[Googleの拡張機能を作成してみた〜2〜](https://qiita.com/migikata-agari/items/d3c082c583bfe06a6cbb)

####仕様（今後の展開も含む）
1. ページを開いた瞬間にページ内のimgタグを取得し、別タブに画像とaltの内容を表示します
2. イベントの発火をページ開いた時ではなく、アイコンをタップした瞬間に変更する
3. 別タブに表示するのではなく、アイコンクリック時に表示するHTMLへ表示する　←今ココ

####フォルダ・ファイル構成
```
test/
  - manifest.json　→　設定ファイル
  - jquery.min.js
  - semantic.min.js
  - semantic.min.css
  - content_scripts.js　→　処理ファイル
  - popup.html　→　アイコンクリック時に表示するHTML
  - popup.js　→　アイコンクリック時に発火するJs
  - icon.png　→　アイコン
```

####ファイルの中身
```json:manifest.json
{
  "name": "画像と〜れる",
  "manifest_version": 2,
  "version": "1.0.0",
  "browser_action": {
    "default_title": "画像と〜れる",
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["jquery.min.js", "content_scripts.js"]
    }
  ]
}
```
```javascript:content_scripts.js
// popup.jsからのイベント取得
chrome.runtime.onMessage.addListener(function(msg) {
	if (msg == "Action") {
		get_image_in_window();
	}
});

function get_image_in_window() {
	var set_html = "";
	$("img").each(function() {
		var src = ($(this).hasClass('lazyload')) ? (($(this).attr('data-src') != undefined) ? $(this).attr('data-src') : $(this).attr('src')) : $(this).attr('src');
		if (src !== undefined && src.match(/http|https/) === null) src = location.origin + src;
		var img = '<img src="' + src + '" alt="' + $(this).attr('alt') + '" />';
		var cap = '<p>' + $(this).attr('alt') + '</p>';
		set_html += img + cap + "<br>";
	});

    // popup.jsへのイベント発火
    chrome.runtime.sendMessage({html_tag: set_html});
}
```
```html:popup.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="semantic.min.css" rel="stylesheet" type="text/css" media="all" />
    <style type="text/css">
      body {
        background-color: #DADADA;
      }
      body > .grid {
        height: 100%;
      }
      .image {
        margin-top: -100px;
      }
      .column {
        max-width: 450px;
      }
      #btn_block {
        background-color: #DADADA;
      }
      #h2_block {
        margin-bottom: -10px;
        padding-top: 10px;
      }
      #disp_block img {
          max-width: 300px; /* 最大幅 */
          min-width: 150px;
          height: auto;
      }
    </style>
    <script src="jquery.min.js"></script>
    <script src="semantic.min.js"></script>
    <script src="popup.js"></script>
  </head>
  <body>
    <div class="ui middle aligned center aligned grid">
      <div class="column">
        <h2 class="ui black image header" id="h2_block">
          <img src="icon.png" class="image">
          <div class="content">
            画像と〜れる
          </div>
        </h2>
        <div class="ui basic segment" id="disp_block"></div>
      </div>
    </div>
  </body>
</html>
```
```javascript:popup.js
$(function(){
    // content_scriptsへのイベント発火
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, "Action");
    });

    // content_scriptsからのイベント取得
    chrome.runtime.onMessage.addListener(
	  function (request, sender, sendResponse) {
	    if (request.html_tag != "") {
	    	$('#disp_block').html(request.html_tag);
	    } else {
	    	$('#disp_block').html("画像の取得に失敗しました。");
	    }
	  }
	);
});
```

####終わり
`chromeAPI`について調べてみましたが、そんなに複雑な仕様ではありませんでした。
一つずつ調べていけば全体像の把握や理解は深まるかなと感じました。
デバック方法もJavaScript内に`debugger`を入れれば挙動が止まるのでこの方法が確認しやすいかと思います。
画像取得および表示の処理についてはもう少しスマートにかけそうなので、今後改修予定です。
※一部、画像取得でうまくいかない場合があります。

####参考サイト
[Google Chromeのエクステンションを作成する方法](https://ajike.github.io/build-chrome-extension/)
[chrome.runtime.sendMessageでメッセージ通信](https://easyramble.com/chrome-runtime-send-message.html)