当前位置：首页 > 行业动态 > 正文

如何在Chrome中添加收藏并使用JavaScript进行操作？

admin
行业动态
2024-12-19
4

在现代浏览器中，JavaScript 提供了多种方法来操作用户的书签（收藏夹），对于 Chrome 浏览器，虽然用户界面不直接支持通过 JavaScript 添加书签，但可以通过一些间接的方法实现这一功能，本文将详细介绍如何在 Chrome 中使用 JavaScript 添加书签，包括使用书签 API、创建快捷方式以及利用扩展程序等方法。

如何在Chrome中添加收藏并使用JavaScript进行操作？第1张

使用 Bookmarks API

Chrome 提供了一个实验性的 Bookmarks API，允许开发者在扩展程序中访问和管理用户的书签，这个 API 目前处于实验阶段，因此需要启用实验性功能才能使用。

启用实验性功能

1、打开 Chrome 浏览器。

2、输入chrome://flags/ 并按 Enter。

3、搜索#extensions-on-manual-update 并将该选项设置为Enabled。

4、重新启动 Chrome 浏览器。

创建扩展程序

要使用 Bookmarks API，你需要创建一个 Chrome 扩展程序，以下是一个简单的示例：

manifest.json

{
  "manifest_version": 3,
  "name": "Bookmark Adder",
  "version": "1.0",
  "description": "Adds a bookmark to the user's bookmarks bar.",
  "permissions": ["bookmarks"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

background.js

chrome.runtime.onInstalled.addListener(() => {
  chrome.bookmarks.create({
    'parentId': '1', // ID of the bookmarks bar folder
    'title': 'New Bookmark',
    'url': 'https://www.example.com'
  }, (bookmarkItem) => {
    console.log('Bookmark added:', bookmarkItem);
  });
});

popup.html

<!DOCTYPE html>
<html>
<head>
  <title>Bookmark Adder</title>
</head>
<body>
  <h1>Bookmark Adder</h1>
  <button id="add-bookmark">Add Bookmark</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js

document.getElementById('add-bookmark').addEventListener('click', () => {
  chrome.bookmarks.create({
    'parentId': '1', // ID of the bookmarks bar folder
    'title': 'New Bookmark',
    'url': 'https://www.example.com'
  }, (bookmarkItem) => {
    alert('Bookmark added: ' + bookmarkItem.id);
  });
});

创建快捷方式

除了使用 Bookmarks API，还可以通过创建 URL 快捷方式的方式间接实现添加书签的功能，这种方法不需要启用实验性功能，也不需要创建扩展程序。

创建快捷方式的代码示例

以下是一个创建桌面快捷方式的示例代码：

function createShortcut(url, name) {
  const shortCut = {
    type: 'url',
    url: url,
    name: name,
    icon: 'icon.png' // 可选，指定图标文件路径
  };
  navigator.msSaveOrOpenBlob(new Blob([JSON.stringify(shortCut)], {type : 'application/x-win-shortcut'}), name + '.url');
}
createShortcut('https://www.example.com', 'Example');

这种方法仅适用于 Windows 系统，并且需要用户手动保存生成的.url 文件，这种方法并不能直接添加到 Chrome 的书签管理器中。

利用扩展程序实现更多功能

如果你需要更复杂的功能，例如动态添加书签、管理现有书签或与用户交互，建议使用 Chrome 扩展程序，扩展程序不仅可以访问 Bookmarks API，还可以使用其他强大的 API，如chrome.tabs、chrome.storage 等。

扩展程序示例

以下是一个更复杂的扩展程序示例，它允许用户通过右键菜单添加当前页面为书签：

manifest.json

{
  "manifest_version": 3,
  "name": "Context Menu Bookmark Adder",
  "version": "1.0",
  "description": "Adds the current page as a bookmark via context menu.",
  "permissions": ["contextMenus", "bookmarks"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

background.js

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    "title": "Add Bookmark",
    "id": "add-bookmark",
    "contexts": ["page"]
  });
});
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "add-bookmark") {
    chrome.bookmarks.create({
      'parentId': '1', // ID of the bookmarks bar folder
      'title': tab.title,
      'url': tab.url
    }, (bookmarkItem) => {
      alert('Bookmark added: ' + bookmarkItem.id);
    });
  }
});

popup.html

<!DOCTYPE html>
<html>
<head>
  <title>Context Menu Bookmark Adder</title>
</head>
<body>
  <h1>Context Menu Bookmark Adder</h1>
  <button id="add-bookmark">Add Bookmark</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js

document.getElementById('add-bookmark').addEventListener('click', () => {
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    const activeTab = tabs[0];
    chrome.bookmarks.create({
      'parentId': '1', // ID of the bookmarks bar folder
      'title': activeTab.title,
      'url': activeTab.url
    }, (bookmarkItem) => {
      alert('Bookmark added: ' + bookmarkItem.id);
    });
  });
});

通过以上几种方法，你可以在 Chrome 浏览器中使用 JavaScript 添加书签，具体选择哪种方法取决于你的需求和应用场景，如果你只是简单地添加一个书签，可以使用 Bookmarks API；如果你需要更复杂的功能，可以考虑使用扩展程序，希望本文对你有所帮助！

FAQs

Q1: 如何启用 Chrome 的 Bookmarks API？

A1: 要启用 Chrome 的 Bookmarks API，你需要按照以下步骤操作：

1、打开 Chrome 浏览器。

2、输入chrome://flags/ 并按 Enter。

3、搜索#extensions-on-manual-update 并将该选项设置为Enabled。

4、重新启动 Chrome 浏览器。

5、创建一个包含"permissions": ["bookmarks"] 的 Chrome 扩展程序。

6、在扩展程序的背景脚本中使用chrome.bookmarks API。

Q2: 如何使用 JavaScript 创建桌面快捷方式？

A2: 你可以使用以下代码创建桌面快捷方式：

function createShortcut(url, name) {
  const shortCut = {
    type: 'url',
    url: url,
    name: name,
    icon: 'icon.png' // 可选，指定图标文件路径
  };
  navigator.msSaveOrOpenBlob(new Blob([JSON.stringify(shortCut)], {type : 'application/x-win-shortcut'}), name + '.url');
}
createShortcut('https://www.example.com', 'Example');

这种方法仅适用于 Windows 系统，并且需要用户手动保存生成的.url 文件。

到此，以上就是小编对于“chrome加入收藏js”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。