[크롬 익스텐션 개발하기]
Chrome Extension Sample page 소스분석
https://developer.chrome.com/extensions/samples
My Bookmarks
1. 프로그램 설명
해당 샘플은 크롬 함수를 통해 북마크 현황조회, 북마크 추가, 새 탭 생성으로 북마크 이동 기능을 지원한다.
북마크에 관련된 함수 위주의 샘플이기 때문에 크게 사용할일은 없을 것 같다.
2. 소스 설명
manifest.json
bookmark 접근 권한 설정, browser_action으로 버튼 선택 시 실행될 popup.html이 설정되어 있다.
{
"name": "My Bookmarks",
"version": "1.1",
"description": "A browser action with a popup dump of all bookmarks, including search, add, edit and delete.",
"permissions": [
"bookmarks"
],
"browser_action": {
"default_title": "My Bookmarks",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version": 2,
"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}
popup.html
div를 통해 각 영역의 이름만 선언되어있다.
실제 내부 코드는 코드는 popup.js에서 호출된다.
manifest.json은 popup.html을 호출하고, popup.html은 popup.js를 호출하는 방식
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="popup.js"></script>
</head>
<body style="width: 400px">
<div>Search Bookmarks: <input id="search"></div>
<div id="bookmarks"></div>
<div id="editdialog"></div>
<div id="deletedialog"></div>
<div id="adddialog"></div>
</body>
</html>
popup.js
popup.js 로그 시 document.addEventListener 'DOMContentLoaded' 가 등록된다.
DOMContentLoaded는 웹페이지의 DOM 로딩 완료 후 호출된다.
웹페이지에서 이미지 다운로드를 기다리기 전에 호출 되기 때문에 전체 페이지가 다 로딩되기 전에 실행된다.
DOM로딩이 완료될 시 dumpBookmarks 함수가 실행된다.
dumpBookmarks 함수는 chrome.bookmarks.getTree 를 실행하여 현재 Chrome 브라우저에 설정된 Bookmark Tree를 받아온다.
이후 받아온 Bookmark 정보는 anchor 객체를 설정한 후 코드에 추가한다.
var anchor = $('<a>');
anchor.attr('href', bookmarkNode.url);
anchor.text(bookmarkNode.title);
/*
* When clicking on a bookmark in the extension, a new tab is fired with
* the bookmark url.
*/
anchor.click(function() {
chrome.tabs.create({url: bookmarkNode.url});
});
// Copyright (c) 2012 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// Search the bookmarks when entering the search keyword.
$(function() {
$('#search').change(function() {
$('#bookmarks').empty();
dumpBookmarks($('#search').val());
});
});
// Traverse the bookmark tree, and print the folder and nodes.
function dumpBookmarks(query) {
var bookmarkTreeNodes = chrome.bookmarks.getTree(
function(bookmarkTreeNodes) {
$('#bookmarks').append(dumpTreeNodes(bookmarkTreeNodes, query));
});
}
function dumpTreeNodes(bookmarkNodes, query) {
var list = $('<ul>');
var i;
for (i = 0; i < bookmarkNodes.length; i++) {
list.append(dumpNode(bookmarkNodes[i], query));
}
return list;
}
function dumpNode(bookmarkNode, query) {
if (bookmarkNode.title) {
if (query && !bookmarkNode.children) {
if (String(bookmarkNode.title).indexOf(query) == -1) {
return $('<span></span>');
}
}
var anchor = $('<a>');
anchor.attr('href', bookmarkNode.url);
anchor.text(bookmarkNode.title);
/*
* When clicking on a bookmark in the extension, a new tab is fired with
* the bookmark url.
*/
anchor.click(function() {
chrome.tabs.create({url: bookmarkNode.url});
});
var span = $('<span>');
var options = bookmarkNode.children ?
$('<span>[<a href="#" id="addlink">Add</a>]</span>') :
$('<span>[<a id="editlink" href="#">Edit</a> <a id="deletelink" ' +
'href="#">Delete</a>]</span>');
var edit = bookmarkNode.children ? $('<table><tr><td>Name</td><td>' +
'<input id="title"></td></tr><tr><td>URL</td><td><input id="url">' +
'</td></tr></table>') : $('<input>');
// Show add and edit links when hover over.
span.hover(function() {
span.append(options);
$('#deletelink').click(function() {
$('#deletedialog').empty().dialog({
autoOpen: false,
title: 'Confirm Deletion',
resizable: false,
height: 140,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Yes, Delete It!': function() {
chrome.bookmarks.remove(String(bookmarkNode.id));
span.parent().remove();
$(this).dialog('destroy');
},
Cancel: function() {
$(this).dialog('destroy');
}
}
}).dialog('open');
});
$('#addlink').click(function() {
$('#adddialog').empty().append(edit).dialog({autoOpen: false,
closeOnEscape: true, title: 'Add New Bookmark', modal: true,
buttons: {
'Add' : function() {
chrome.bookmarks.create({parentId: bookmarkNode.id,
title: $('#title').val(), url: $('#url').val()});
$('#bookmarks').empty();
$(this).dialog('destroy');
window.dumpBookmarks();
},
'Cancel': function() {
$(this).dialog('destroy');
}
}}).dialog('open');
});
$('#editlink').click(function() {
edit.val(anchor.text());
$('#editdialog').empty().append(edit).dialog({autoOpen: false,
closeOnEscape: true, title: 'Edit Title', modal: true,
show: 'slide', buttons: {
'Save': function() {
chrome.bookmarks.update(String(bookmarkNode.id), {
title: edit.val()
});
anchor.text(edit.val());
options.show();
$(this).dialog('destroy');
},
'Cancel': function() {
$(this).dialog('destroy');
}
}}).dialog('open');
});
options.fadeIn();
},
// unhover
function() {
options.remove();
}).append(anchor);
}
var li = $(bookmarkNode.title ? '<li>' : '<div>').append(span);
if (bookmarkNode.children && bookmarkNode.children.length > 0) {
li.append(dumpTreeNodes(bookmarkNode.children, query));
}
return li;
}
document.addEventListener('DOMContentLoaded', function () {
dumpBookmarks();
});
