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

218 阅读1分钟

引言:

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

123.png

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

引用

github.com/GoogleChrom…