WebExtensions开发：如何捕获书签点击事件并获取BookmarkTreeNode对象

WebExtensions 确实没有提供直接监听书签点击的原生API，但可以通过以下两种方案实现你的需求：

方案一：通过导航拦截匹配书签信息（低侵入性） #

这种方案不需要改动原生书签栏，通过拦截导航事件反推书签信息：

• 书签创建时，把书签的url、id以及你的自定义配置一起存入storage.local，比如用url关联对应的书签ID和打开规则。
• 注册chrome.webNavigation.onBeforeNavigate监听器，在页面即将跳转时：
  1. 获取目标URL，从storage.local中查询是否有对应的书签配置。
  2. 如果匹配到，就根据配置自定义打开方式——比如原本是当前页打开，你可以先移除触发导航的标签页，再用chrome.windows.create在新窗口打开目标URL。

示例代码：

// 监听书签创建，存储关联信息
chrome.bookmarks.onCreated.addListener((bookmarkId, bookmarkNode) => {
  const storageKey = `bookmark_${bookmarkNode.url}`;
  chrome.storage.local.set({
    [storageKey]: {
      id: bookmarkId,
      openMode: "new_window" // 你的自定义打开规则
    }
  });
});

// 拦截导航并处理自定义打开逻辑
chrome.webNavigation.onBeforeNavigate.addListener((details) => {
  const storageKey = `bookmark_${details.url}`;
  chrome.storage.local.get(storageKey, (result) => {
    const bookmarkConfig = result[storageKey];
    if (bookmarkConfig) {
      // 取消默认导航（移除触发导航的标签页）
      chrome.tabs.remove(details.tabId);
      // 按照自定义规则打开
      if (bookmarkConfig.openMode === "new_window") {
        chrome.windows.create({ url: details.url });
      } else if (bookmarkConfig.openMode === "new_tab") {
        chrome.tabs.create({ url: details.url });
      }
    }
  });
}, { url: [{ schemes: ["http", "https", "ftp"] }] });

方案二：自定义书签UI（精准获取BookmarkTreeNode） #

如果必须直接拿到点击的BookmarkTreeNode对象，可以自己实现书签展示UI：

• 用chrome.bookmarks.getTree()拉取完整的书签树数据，在浏览器侧边栏或弹出页中渲染自定义的书签列表。
• 给每个自定义书签项绑定点击事件，点击时直接拿到对应的BookmarkTreeNode，再从storage.local读取配置，调用chrome.tabs.create或chrome.windows.create实现自定义打开。
• 这种方式的优势是完全精准，但需要自己实现书签的折叠、搜索等原生功能，开发成本更高。

注意事项 #

• 权限配置：在manifest.json中必须声明bookmarks、storage、webNavigation（方案一）或activeTab（方案二）权限。
• 重复URL处理：如果多个书签指向同一URL，建议用书签ID作为存储键，同时记录URL，查询时先通过URL筛选候选，再结合场景判断（比如优先最近创建的），或者在自定义UI中直接绑定ID避免歧义。

内容的提问来源于stack exchange，提问作者Wizard