####前回の続き
Googleの拡張機能を作成してみた
####仕様(今後の展開も含む)
- ページを開いた瞬間にページ内のimgタグを取得し、別タブに画像とaltの内容を表示します
- イベントの発火をページ開いた時ではなく、アイコンをタップした瞬間に変更する ←今ココ
- 別タブに表示するのではなく、アイコンクリック時に表示する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 タイトルを変更しました。