在现代浏览器中，JavaScript 提供了多种方法来操作用户的书签（收藏夹），对于 Chrome 浏览器，虽然用户界面不直接支持通过 JavaScript 添加书签，但可以通过一些间接的方法实现这一功能，本文将详细介绍如何在 Chrome 中使用 JavaScript 添加书签，包括使用书签 API、创建快捷方式以及利用扩展程序等方法。
使用 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”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。
