북마크 다루기

북마크 API를 사용하여 북마크 트리 전체 또는 일부에 액세스하고 북마크를 작성, 업데이트 또는 삭제할 수 있으며 검색 쿼리에 따라 북마크 트리의 일부를 검색 할 수도 있습니다. 단, 루트 폴더에서는 아무 것도 제거하거나 추가 할 수 없습니다.

매니페스트 설정

북마크 API를 사용하려면 먼저 매니페스트의 permissions 항목에 아래와 같이 bookmarks 항목울 추가해야 합니다.

{
"name": "북마크 확장앱",
"permissions": [
"bookmarks"
]
}

자료 구조

북마크 시스템은 컴퓨터 과학에서 말하는 트리 구조로 되어 있습니다. 트리의 각 노드를 북마크 항목으로 생각할 수 있습니다. 이 항목은 실제 북마크 또는 북마크 폴더 일 수 있습니다. 각 노드에는 특정 속성 집합이 있습니다. 이 중 일부는 제목, URL (북마크 인 경우), 추가 된 날짜 등을 포함합니다. 폴더인 경우 이 노드에는 추가 하위 항목이 있으므로 하위 트리가 이러한 속성에도 노출됩니다.

목록 만들기

북마크 트리를 탐색하고 브라우저에있는 모든 북마크를 나열하는 방법을 살펴 보겠습니다.
whale.bookmarks.getTree() 함수를 이용해 전체 북마크 트리 구조에 따라 북마크 제목을 나열하는 코드는 아래와 같이 작성할 수 있습니다.

const list = document.querySelector(`#bookmarklist`);

whale.bookmarks.getTree(function (bmTree) {
bmTree.forEach(function (node) {
processNode(node);
});
});

function processNode(node) {
if (node.children) {
// 이 예제에서는 `북마크바` 폴더 등 parentId 가 `0` 이거나
// parentId 가 없는 루트 디렉토리는 다루지 않을 것입니다.
// 그 이외의 항목들을 대상으로 합니다.
if (node.parentId && node.parentId != `0`) {
list.innerHTML += `
<li>${node.title} (폴더)</li>
<ul id="${node.id}"></ul>
`;
}

node.children.forEach(processNode);
}

if (node.url) {
const sublistEl = node.parentId &&
document.getElementById(node.parentId);

if (sublistEl) {
// 이 아이디로 폴더가 존재하면 폴더 아래에 항목을 추가한다
sublistEl.innerHTML += `<li>${node.title}</li>`;
} else {
// 아니면 최상위 목록에 항목을 추가한다
list.innerHTML += `<li>${node.title}</li>`;
}
}
}

위의 코드는 재귀 함수를 사용하여 모든 북마크 노드를 탐색하는 예제입니다. 더 이상 하위 노드가 존재하지 않을 때까지 북마크 폴더 구조를 따라 계속 북마크 항목을 목록에 <li> 태그로 추가합니다. 이 예제에 더하여, 실제로 사용자가 클릭 가능한 링크를 구현하면 북마크 관리자와 비슷하게 만들 수 있습니다. 북마크 노드는 폴더가 아닌 경우 url 속성을 갖습니다.

새 항목 생성

whale.bookmarks.create () 메소드를 사용하여 새로운 북마크 또는 북마크 폴더를 생성 할 수 있습니다. 첫 번째 레벨에서 북마크를 만들려면 parentId1로 지정해야합니다. 다음 예제를 살펴 보겠습니다.

whale.browserAction.onClicked.addListener(function () {
whale.bookmarks.create({
title: `네이버 웨일`,
parentId: `1`
}, function (newEntry) {
whale.bookmarks.create({
title: '웨일 홈',
url: 'http://whale.naver.com/',
parentId: newEntry.id
});

whale.bookmarks.create({
title: '웨일 연구소',
url: 'http://lab.whale.naver.com',
parentId: newEntry.id
});

console.log('New Entry Added');
});
});

위의 코드는 “네이버 웨일”이라는 새 폴더를 만든 다음 해당 폴더 내에 두 개의 북마크를 만듭니다. 생성시 콜백 함수가 실행되어 새로 생성 된 북마크 항목의 id를 얻을 수 있습니다. 위의 코드에서 두 개의 북마크를 만들때 방금 만든 북마크 폴더의 idparentId로 설정합니다. 이렇게 하면 두 개의 북마크가 새로 생성된 북마크 폴더 안에 저장됩니다.

다운로드 다루기