引言:
在日常的网络浏览中,书签是我们快速访问常用网站的得力助手。
Manifest
在使用书签功能之前,我们需要在 manifest 文件中声明必要的权限。
{
"manifest_version": 3,
"name": "Bookmark Viewer",
"version": "1.0",
"description": "Uses the chrome.bookmarks API to search through, add, and delete bookmarks from the user's bookmark tree.",
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"permissions": ["bookmarks"]
}
查询书签
通过 chrome.bookmarks.search 方法,我们可以根据不同的条件来查找特定的书签。
API
chrome.bookmarks.search(object, callback)
object: 其参数可以是一个包含各种筛选条件的对象,例如可以按照书签的标题、网址、文件夹等属性进行查询。
示例
chrome.bookmarks.search({ url: 'https://www.google.com/' }, (results) => {
for (const result of results) {
if (result.url === 'https://www.google.com/') {
chrome.bookmarks.remove(result.id, () => {});
}
}
location.reload();
});
查询树形书签
通过 chrome.bookmarks.getTree 方法,我们可以得到一个树形的书签列表。
API
chrome.bookmarks.getTree(callback)
示例
chrome.bookmarks.getTree((tree) => {
const bookmarkList = document.getElementById('bookmarkList');
displayBookmarks(tree[0].children, bookmarkList);
});
function displayBookmarks(nodes, parentNode) {
for (const node of nodes) {
// If the node is a bookmark, create a list item and append it to the parent node
if (node.url) {
const listItem = document.createElement('li');
listItem.textContent = node.title;
parentNode.appendChild(listItem);
}
// If the node has children, recursively display them
if (node.children) {
const sublist = document.createElement('ul');
parentNode.appendChild(sublist);
displayBookmarks(node.children, sublist);
}
}
}
新增书签
使用 chrome.bookmarks.create 方法,我们可以传入一个包含书签详细信息的对象来创建书签。
API
chrome.bookmarks.create(object, callback)
示例
function addBookmark() {
chrome.bookmarks.create(
{
parentId: '1',
title: 'Google',
url: 'https://www.google.com'
},
() => {
console.log('Bookmark added');
location.reload(); // Refresh the popup
}
);
}
修改书签
当书签的信息需要更改时,如标题或者网址发生变化,就需要用到 chrome.bookmarks.update 方法。
API
chrome.bookmarks.update(bookmarkId, updatedInfo, callback())
bookmarkId: 书签ID
updatedInfo: 修改后信息的对象
示例
// 假设我们已经获取到了某个书签的 ID,例如 bookmarkId
var updatedInfo = {
title: '修改后的书签标题'
};
chrome.bookmarks.update(bookmarkId, updatedInfo, function() {
console.log('书签修改成功');
});
删除书签
对于不再需要的书签,我们可以使用 chrome.bookmarks.remove 方法将其删除。
API
chrome.bookmarks.remove(bookmarkId, callback)
bookmarkId: 书签ID
示例
function removeBookmark() {
chrome.bookmarks.search({ url: 'https://www.google.com/' }, (results) => {
for (const result of results) {
if (result.url === 'https://www.google.com/') {
chrome.bookmarks.remove(result.id, () => {});
}
}
location.reload();
});
}