BookMark：开启高效书签管理之旅

大家好，欢迎来到IT知识分享网。

引言：

在日常的网络浏览中，书签是我们快速访问常用网站的得力助手。

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: 其参数可以是一个包含各种筛选条件的对象，例如可以按照书签的标题、网址、文件夹等属性进行查询。

示例

jschrome.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)

示例

jschrome.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)

示例

jsfunction 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: 修改后信息的对象

示例

js// 假设我们已经获取到了某个书签的 ID，例如 bookmarkId var updatedInfo = { title: '修改后的书签标题' }; chrome.bookmarks.update(bookmarkId, updatedInfo, function() { console.log('书签修改成功'); }); 

删除书签

对于不再需要的书签，我们可以使用 chrome.bookmarks.remove 方法将其删除。

API

chrome.bookmarks.remove(bookmarkId, callback)

bookmarkId: 书签ID

示例

jsfunction 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(); }); } 

引用

https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/bookmarks