본문 바로가기
Computer/Chrome Extension

[Sample] My Bookmarks

by 생각하는달팽이 2015. 1. 30.



구글의 sample Extension 들을 하나하나 따라가 보겠습니다.


처음 따라가볼 예제는 My Bookmarks 입니다.





사용되는 API 목록은 다음과 같습니다.


bookmarks.getTree : 크롬의 북마크로부터 데이터들을 가져옵니다.

bookmarks.create : 크롬에 북마크를 추가합니다.

bookmarks.remove : 크롬에 존재하는 북마크를 삭제합니다.

bookmarks.update : 크롬에 존재하는 북마크를 

tabs.create : 탭을 생성합니다.




각 API 별 사용 예시입니다.


[ 북마크 가져오기 ]

chrome.bookmarks.getTree(function(nodes){});



function dumpBookmarks(query) {

  var bookmarkTreeNodes = chrome.bookmarks.getTree(function(bookmarkTreeNodes) {

      $('#bookmarks').append(dumpTreeNodes(bookmarkTreeNodes, query)); // 이쪽에서 북마크 리스트를 뿌려줍니다.       });

}



[ 북마크 추가하기 ]

chrome.bookmarks.create({parentid:bookmarkNode.id,title:titleValue,url:urlValue});


chrome.bookmarks.create({parentId: bookmarkNode.id,

                 title: $('#title').val(), url: $('#url').val()});



[ 북마크 삭제하기 ]

chrome.bookmarks.remove(String(bookmarkNode.id));


위와 동일하게 사용하면됩니다.



[북마크 수정하기]

chrome.bookmarks.update(id,{title:""});


chrome.bookmarks.update(String(bookmarkNode.id), {

     title: edit.val()

});



[ 탭에서 북마크 열기 ]

chrome.tabs.create({url: bookmarkNode.url});




실제로 해당 예제의 경우 jquery, js 를 이용한 전체 스크립트를 제외하고

chrome. 으로 시작하는 chrome extensions API 에만 집중해서 공부를 하였습니다.


다음부터는 프로젝트에 관련될 만한 예제들을 공부할 예정입니다.

감사합니다. (_ _)


아래 예제소스를 링크해드립니다.


My Bookmarks.zip




반응형

'Computer > Chrome Extension' 카테고리의 다른 글

[Sample] Content Settings  (0) 2015.01.30
[Sample] Print this page  (0) 2015.01.30
크롬 확장 API 리스트 정리  (0) 2015.01.30
OverView  (0) 2015.01.28