编写chrome插件，实现下面功能:
1.创建书签文件夹，名字是日期字符串 ，例如2011_11_21
2.输入 需要 导出 书签文件夹，获取书签的网址，导出到json，json文件名包含日期字符串
manifest.json
{
"manifest_version": 3,
"name": "Down Video Save Bookmark",
"version": "1.0",
"description": "[导出书签的网址] 1.创建日期文件夹 2.导出书签 日期文件夹 内的 标题和网址 的内容到json文件",
"permissions": ["bookmarks", "downloads"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
}
}
popup.js
// 生成日期字符串的函数
function generateDateString(date) {
var year = date.getFullYear();
// 将月份和日期转换为字符串，并确保两位数，例如将单个数字的月份或日期前面添加零
var month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，因此需要加1
var day = date.getDate().toString().padStart(2, '0'); // 获取日期并确保是两位数
return year + '_' + month + '_' + day;
}
document.addEventListener('DOMContentLoaded', function() {
// 创建 文件夹
var createFolderButton = document.getElementById('createFolderButton');
createFolderButton.addEventListener('click', async function() {
var today = new Date();
var folderName = generateDateString(today);
// 检查文件夹是否存在
let folders = await chrome.bookmarks.search({title: folderName});
if (folders.length === 0) {
// 文件夹不存在，创建它
await chrome.bookmarks.create({
title: folderName
});
// 提示用户操作成功
alert('Folder "' + folderName + '" created successfully.');
} else {
// 文件夹已存在，提示用户
alert('Folder "' + folderName + '" already exists.');
}
});
// 导出书签 网址到json
var exportButton = document.getElementById('exportButton');
var folderNameInput = document.getElementById('folderNameInput');
var exportResults = document.getElementById('exportResults');
exportButton.addEventListener('click', async function() {
var folderName = folderNameInput.value.trim();
// 如果 folderName 内容为空
if (!folderName) {
// 获取当前日期并更新输入框的默认值
var today = new Date();
folderNameInput.value = generateDateString(today);
folderName = folderNameInput.value;
}
// 检查文件夹是否存在
let folders = await chrome.bookmarks.search({title: folderName});
if (folders.length === 0) {
exportResults.textContent = 'Folder not found.';
return;
}
// 获取所选文件夹的书签
let bookmarks = await chrome.bookmarks.getChildren(folders[0].id);
// 创建JSON数据
let bookmarksData = bookmarks.map(bookmark => {
return {
title: bookmark.title,
url: bookmark.url
};
});
var folderNameWithExtension = 'bookmarks_' + folderName + '.json';
// 创建Blob对象并下载
// 创建包含书签数据的 Blob 对象，类型为 JSON
let blob = new Blob([JSON.stringify(bookmarksData, null, 2)], { type: 'application/json' });
// 使用 Blob 对象创建一个 URL
let downloadUrl = URL.createObjectURL(blob);
// 创建一个 <a> 元素作为下载链接
let downloadLink = document.createElement('a');
// 设置下载链接的 href 属性为 Blob URL
downloadLink.href = downloadUrl;
// 设置下载链接的下载文件名
downloadLink.download = folderNameWithExtension;
// 设置下载链接的文本内容
downloadLink.textContent = 'Download Bookmarks JSON';
// 设置下载链接的样式为块级元素，使其单独占据一行
downloadLink.style.display = 'block';
// 将下载链接添加到 exportResults 元素中显示在界面上
exportResults.appendChild(downloadLink);
});
});
popup.html
<!DOCTYPE html>
<html>
<head>
<title>Add to Bookmarks</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#folderNameInput {
width: 200px;
padding: 5px;
margin: 10px;
}
#exportButton {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#exportResults {
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<button id="createFolderButton">Create date Folder</button>
<input type="text" id="folderNameInput" placeholder="Enter folder name">
<button id="exportButton">Export Bookmarks</button>
<div id="exportResults"></div>
</body>
</html>
styles.css
#floatingButtonContainer {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
}
#floatingButton {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
网友评论