즐겨찾기 사이트 모음 및 관리 서비스 만들기(4) - 크롬 확장프로그램 만들기2 (Building a favorite site management service - Building Chrome extension 2)
즐겨찾기 사이트 모음 및 관리 서비스 만들기(3) - 크롬 확장프로그램 만들기2 (Building a favorite site management service - Building Chrome extension 2)
개발을 하려고 하는데 생각보다 즐겨찾기에 대한 솔루션이 많이 있어서 일단 간단하게 마무리하고 조금 더 여유가 생기면 추가적으로 개발을 해보려고 한다.
간단하게 검색만 되는 기능을 만들어보았다. 이것도 내가 만든건 아니고 소스 복붙이라 내가 한 건 크게 없다. 여기서 대,소문자 구분 없이 검색하는 방법을 조금 더 생각해보는게 첫 번째 숙제다.
일단 manifest.json 은 이렇게 작성해준다.
{
"manifest_version": 2,
"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'",
"name": "Awesome Bookmark Manager",
"description": "You can easily find bookmark that you want to go by using this program ! ",
"version": "1.0",
"browser_action": {
"default_title": "ABM",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"bookmarks"
]
}
popup.html 은 이렇게 작성해준다.
<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 는 이렇게 작성해준다.
// Search the bookmarks when entering the search keyword.
$(function() {
$('#search').change(function() {
$('#bookmarks').empty();
var searchWord = $('#search').val()
dumpBookmarks(searchWord);
});
});
// 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();
});
현재 작업 환경은 이렇다.
완성된 확장프로그램 결과
즐겨찾기 목록과 검색바가 나오고 검색 바에 검색어를 넣고 엔터를 치면 검색결과가 나온다.
일단 이것으로 일단락하고 시간이 된다면 대, 소문자 구분없이 , 최근에 만든 즐겨찾기 순서, 자주들어가는 순서 순으로 정렬할 수 있게 만들어야겠다.
댓글
댓글 쓰기