More than 3 years have passed since last update.

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

Posted at 2020-02-10

####前回の続き
Googleの拡張機能を作成してみた
 Googleの拡張機能を作成してみた〜2〜

####仕様（今後の展開も含む）

ページを開いた瞬間にページ内のimgタグを取得し、別タブに画像とaltの内容を表示します
イベントの発火をページ開いた時ではなく、アイコンをタップした瞬間に変更する
別タブに表示するのではなく、アイコンクリック時に表示するHTMLへ表示する　←今ココ

####フォルダ・ファイル構成

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

####ファイルの中身

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"]
    }
  ]
}

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

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>

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のエクステンションを作成する方法
 chrome.runtime.sendMessageでメッセージ通信

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up