怎么通过js打开chrome书签

通过JS打开Chrome书签的方法包括：使用Chrome扩展、利用Chrome API、编写用户脚本等方法。其中最直接的方式是利用Chrome扩展，因为Chrome扩展提供了更多的权限和功能，允许你直接访问和操作书签。

一、了解Chrome扩展开发

Chrome扩展是一种可以增强浏览器功能的小程序。通过编写Chrome扩展，你可以实现对Chrome书签的访问和操作。要开始开发Chrome扩展，你需要掌握基本的HTML、CSS和JavaScript编程知识。

1. 初始化扩展项目

首先，创建一个新的文件夹用于存放你的扩展项目。在这个文件夹中，创建一个名为 manifest.json 的文件，这个文件是Chrome扩展的配置文件。

{
  "manifest_version": 3,
  "name": "Bookmark Opener",
  "version": "1.0",
  "permissions": ["bookmarks"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

2. 编写背景脚本

创建一个名为 background.js 的文件，这是你的扩展的背景脚本。这个脚本会在后台运行，管理你的扩展的主要逻辑。

chrome.runtime.onInstalled.addListener(() => {
  console.log("Extension installed");
});
chrome.action.onClicked.addListener((tab) => {
  chrome.bookmarks.getTree((bookmarkTreeNodes) => {
    console.log(bookmarkTreeNodes);
  });
});

3. 创建一个弹出页面

为了让用户能够方便地打开书签，你可以创建一个弹出页面。在项目文件夹中创建一个名为 popup.html 的文件。

<!DOCTYPE html>
<html>
<head>
  <title>Bookmark Opener</title>
  <script src="popup.js"></script>
</head>
<body>
  <h1>Bookmarks</h1>
  <ul id="bookmarkList"></ul>
</body>
</html>

同时，创建一个名为 popup.js 的文件，用于处理弹出页面的逻辑。

document.addEventListener('DOMContentLoaded', () => {
  chrome.bookmarks.getTree((bookmarkTreeNodes) => {
    const bookmarkList = document.getElementById('bookmarkList');
    bookmarkTreeNodes.forEach((node) => {
      processNode(node, bookmarkList);
    });
  });
});
function processNode(node, parentElement) {
  if (node.url) {
    const li = document.createElement('li');
    const a = document.createElement('a');
    a.href = node.url;
    a.textContent = node.title;
    a.target = '_blank';
    li.appendChild(a);
    parentElement.appendChild(li);
  } else if (node.children) {
    const li = document.createElement('li');
    li.textContent = node.title;
    const ul = document.createElement('ul');
    parentElement.appendChild(li);
    li.appendChild(ul);
    node.children.forEach((childNode) => {
      processNode(childNode, ul);
    });
  }
}

二、使用Chrome API

Chrome提供了一系列API供扩展使用，其中包括书签API。通过这些API，你可以创建、删除、查询和移动书签。

1. 获取书签

你可以使用 chrome.bookmarks.getTree 方法来获取书签的树状结构。

chrome.bookmarks.getTree((bookmarkTreeNodes) => {
  console.log(bookmarkTreeNodes);
});

2. 创建书签

使用 chrome.bookmarks.create 方法可以创建新的书签。

chrome.bookmarks.create({
  parentId: '1',
  title: 'New Bookmark',
  url: 'https://www.example.com'
}, (newBookmark) => {
  console.log('Bookmark created: ', newBookmark);
});

3. 删除书签

通过 chrome.bookmarks.remove 方法可以删除书签。

chrome.bookmarks.remove('bookmarkId', () => {
  console.log('Bookmark removed');
});

三、编写用户脚本

如果你不想开发Chrome扩展，也可以通过编写用户脚本来实现打开书签的功能。用户脚本是一种运行在浏览器中的脚本，通常通过扩展如Tampermonkey或Greasemonkey来运行。

1. 安装用户脚本管理器

首先，你需要安装一个用户脚本管理器，如Tampermonkey。

2. 编写用户脚本

创建一个新的用户脚本，并编写以下代码：

// ==UserScript==
// @name         Bookmark Opener
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Open bookmarks from a custom menu
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
    // Your code here...
    const bookmarks = [
        { title: 'Google', url: 'https://www.google.com' },
        { title: 'Example', url: 'https://www.example.com' }
    ];
    const menu = document.createElement('div');
    menu.style.position = 'fixed';
    menu.style.top = '10px';
    menu.style.right = '10px';
    menu.style.backgroundColor = 'white';
    menu.style.border = '1px solid black';
    menu.style.padding = '10px';
    menu.style.zIndex = 1000;
    bookmarks.forEach((bookmark) => {
        const a = document.createElement('a');
        a.href = bookmark.url;
        a.textContent = bookmark.title;
        a.target = '_blank';
        menu.appendChild(a);
        menu.appendChild(document.createElement('br'));
    });
    document.body.appendChild(menu);
})();

四、总结

通过JS打开Chrome书签的方法有很多种，主要包括使用Chrome扩展、利用Chrome API和编写用户脚本。使用Chrome扩展是最灵活和功能最强大的方法，因为它允许你直接访问和操作书签，并提供了丰富的API供你使用。编写用户脚本也是一种简单且快速的方法，适合一些简单的需求。希望这篇文章能够帮助你理解并实现通过JS打开Chrome书签的方法。