一、描述

使用 chrome.bookmarks 能够创建、组织和操作书签,能够自定义操作书签的页面。

二、权限申请

如果要使用 chrome.bookmarks 需要在 manifest 的 permissions 中增加 bookmarks 权限申请。

"permissions": ["tabs", "bookmarks", "storage"],

三、书签组织形式

书签以形式组织,树中的每个节点都是书签或文件夹(有时称为组)。

树中的每个节点都由 bookmarks.BookmarkTreeNode 对象表示。

整个 chrome.bookmarks API 都是使用 BookmarkTreeNode 属性。例如,当调用 bookmarks.create 时,传入新节点的父节点(parentId),并且可以选择传入节点的索引、标题和 URL 属性。

注意:无法使用 chrome.bookmarks API 添加或删除根文件夹中的条目。无法重命名、移动或删除特殊的 “书签栏” 和 “其他” 文件夹。

三、方法示例

1、chrome.bookmarks.getTree(function callback)

获取整个书签栏的树

btn1.onclick = () => {
    chrome.bookmarks.getTree((res) => {
        console.log(res);
    })
};

结果示例:

可以发现,通过这个方法能够拿到整个书签栏的树,而最外层就是根节点,根节点没有 title,根节点的两个子节点就是 书签栏其他书签两个,id 分别是 1 和 2

1.jpg

2、chrome.bookmarks.getSubTree(string id, function callback)

获取某个节点的子树

btn2.onclick = () => {
    chrome.bookmarks.getSubTree(tree[0].children[0].children[0].id, (res) => {
        console.log(res);
    })
};

上面我是从根节点的第一个子节点的第一个子节点查找的子树,可以发现父节点是 parentId: 1

2.jpg

3、chrome.bookmarks.get(string or array of string idOrIdList, function callback)

获取节点信息

需要注意的是,无论是什么 get 方法,每次都是返回一个 Array 类型,即使请求的是节点,返回的也是 Array

btn3.onclick = () => {
    chrome.bookmarks.get("5", (res) => {
        console.log(res);
    })
};

结果示例:

3.jpg

4、chrome.bookmarks.getChildren(string id, function callback)

获取所有的子节点

btn4.onclick = () => {
    chrome.bookmarks.getChildren("5", (res) => {
        console.log(res);
    })
};

可以观察下同样的节点 5,获取子树和子节点的不同

4.jpg

5、chrome.bookmarks.getRecent(integer numberOfItems, function callback)

获取最近的书签

btn5.onclick = () => {
    chrome.bookmarks.getRecent(5, (res) => {
        console.log(res);
    })
};

结果示例:

上面我设置了返回最近 5 个创建的书签

5.jpg

6、chrome.bookmarks.search(string or object query, function callback)

搜索书签

<div class="col-md-12">
  <textarea id="textarea" cols="30" rows="1">postbird</textarea>
  <button id="btn6" class="btn btn-primary">search</button>
</div>
btn6.onclick = () => {
    const value = document.querySelector('#textarea').value;
    chrome.bookmarks.search(value, (res) => {
        console.log(res);
    })
};

结果示例:

根据 title 搜索的都包含了 postbird

6.jpg

7、chrome.bookmarks.create(object bookmark, function callback)

创建一个书签,在指定的 parentId 下创建书签或文件夹。如果 url 为N ULL 或没有该字段,会创建一个文件夹。

btn7.onclick = () => {
    const title = document.querySelector('#title').value;
    const url = document.querySelector('#url').value;
    const obj = {
        parentId: '5',
        title,
        url,
    }
    chrome.bookmarks.create(obj, (res) => {
        console.log(res);
    })
};

结果示例:

可以发现在 5 这个文件夹中已经创建了新的书签

7.jpg

8、chrome.bookmarks.move(string id, object destination, function callback)

移动书签,注意不能移动到 0 这个 root 节点中,因为不允许任何修改 root 节点的行为

btn8.onclick = () => {
    const dest = {
        parentId: '1'
    }
    chrome.bookmarks.move('48', dest, (res) => {
        console.log(res);
    })
};

结果示例:

8.jpg

9、chrome.bookmarks.update(string id, object changes, function callback)

更新书签或文件夹的属性。仅指定要更改的属性; 未指定的属性将保持不变。注意:**目前,仅支持 titleurl

btn9.onclick = () => {
    const title = document.querySelector('#titleUpdate').value;
    const url = document.querySelector('#urlUpdate').value;
    const obj = {
        title,
        url,
    }
    chrome.bookmarks.update('48', obj, (res) => {
        console.log(res);
    })
};

结果示例:

9.jpg

10、chrome.bookmarks.remove(string id, function callback)

删除书签或空书签文件夹。

chrome.bookmarks.remove('48', (res) => {
        console.log(res);
    })

11、chrome.bookmarks.removeTree(string id, function callback)

删除整个书签树

chrome.bookmarks.removeTree('5', (res) => {
        console.log(res);
    })

完整代码

代码仓库:https://github.com/postbird/chrome-extensions-demo/tree/master/demo13-bookmarks