0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-02-06

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

####仕様(今後の展開も含む)

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

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

test/
  - manifest.json → 設定ファイル
  - jquery.min.js
  - content_scripts.js → 処理ファイル
  - background.js → イベント発火ファイル

####ファイルの中身

manifest.json
{
  "name": "TakeAPicture",
  "manifest_version": 2,
  "version": "1.0.0",
  "permissions": [
    "activeTab"
  ],
  "browser_action": {
    "default_title": "TakeAPicture"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["jquery.min.js", "content_scripts.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"],
    "persistant": false
  }
}
background.js
// 拡張機能のアイコンのクリックイベントを登録
chrome.browserAction.onClicked.addListener(function(tab) {
    // 拡張機能内で通信を行う為、メッセージ送信
    chrome.tabs.sendMessage(tab.id, "Action");
});
content_scripts.js
// メッセージ受信用のイベントを登録
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    if (request == "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');
		var img = '<img src="' + src + '" alt="' + $(this).attr('alt') + '" />';
		var cap = '<p>' + $(this).attr('alt') + '</p>';
		set_html += img + cap + "<br>";
	})

	var nwin = window.open("", "image_list", 'width=600,height=700,resizable=1,scrollbars=1');
	nwin.document.open();
	nwin.document.write(set_html);
	nwin.document.close();
}

####終わり
前回まではページを表示した瞬間に拡張機能の処理が動いていた為、毎回鬱陶しい感じでした。
アイコンクリックでの発火にしたことで、拡張機能を随時ONで使用できるようになりました。

####参考サイト
Google Chromeのエクステンションを作成する方法

####更新履歴
20/02/10 タイトルを変更しました。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?