一个功能强大的书签管理工具，支持双栏显示、搜索等功能
// ==UserScript==
// @name 更好的书签
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 一个功能强大的书签管理工具，支持双栏显示、搜索等功能
// @author xjy666a
// @match *://*/*
// @match file://*/*
// @include *
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_addValueChangeListener
// @grant GM_registerMenuCommand
// @run-at document-idle
// @priority 1
// @license MIT
// @icon https://youke1.picui.cn/s1/2025/11/08/690efd26c73bb.png
// ==/UserScript==
/* MIT License
Copyright (c) 2025 xjy666a
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
(function() {
'use strict';
// 创建书签管理器
class BookmarkManager {
constructor() {
this.bookmarks = [];
this.filteredBookmarks = [];
this.currentView = 'grid'; // grid 或 list
this.searchQuery = '';
this.isVisible = false;
this.shadowRoot = null;
this.selectedBookmarks = new Set(); // 选中的书签URL集合
this.batchMode = false; // 是否处于批量选择模式
this.storageListener = null; // 存储变化监听器
this.init();
}
init() {
// 创建主界面
this.createUI();
// 绑定事件
this.bindEvents();
// 从存储加载数据（使用 GM_getValue，可在所有网站间共享）
this.loadFromStorage();
// 监听存储变化，实现跨标签页同步
this.setupStorageListener();
// 添加页面关闭前保存
this.setupAutoSave();
}
createUI() {
// 创建主容器
const container = document.createElement('div');
container.id = 'better-bookmarks-container';
// 创建 Shadow DOM 来隔离样式
this.shadowRoot = container.attachShadow({ mode: 'open' });
// 在 Shadow DOM 中创建内容
this.shadowRoot.innerHTML = `
<div class="bb-wrapper">
<div class="bb-header">
<h1>更好的书签</h1>
<div class="bb-controls">
<button class="bb-btn bb-btn-primary" id="bb-add-current-btn" title="添加当前页面">+ 添加当前页面</button>
<button class="bb-btn bb-btn-primary" id="bb-add-manual-btn" title="手动添加书签">+ 手动添加</button>
<button class="bb-btn bb-btn-primary" id="bb-import-btn">导入书签</button>
<button class="bb-btn" id="bb-export-btn">导出书签</button>
<button class="bb-btn-icon" id="bb-close-btn" title="关闭 (Esc)">✕</button>
<input type="file" id="bb-file-input" accept=".html" style="display: none;">
</div>
</div>
<div class="bb-toolbar">
<div class="bb-search">
<input type="text" id="bb-search-input" placeholder="搜索书签..." class="bb-search-input">
<button class="bb-btn-icon" id="bb-clear-search">✕</button>
</div>
<div class="bb-view-toggle">
<button class="bb-btn-icon ${this.currentView === 'grid' ? 'active' : ''}" id="bb-grid-view" title="网格视图">⊞</button>
<button class="bb-btn-icon ${this.currentView === 'list' ? 'active' : ''}" id="bb-list-view" title="列表视图">☰</button>
</div>
<div class="bb-batch-controls" id="bb-batch-controls" style="display: none;">
<button class="bb-btn" id="bb-batch-select-all">全选</button>
<button class="bb-btn" id="bb-batch-deselect-all">取消全选</button>
<button class="bb-btn" id="bb-batch-pin">批量置顶</button>
<button class="bb-btn" id="bb-batch-unpin">批量取消置顶</button>
<button class="bb-btn bb-btn-danger" id="bb-batch-delete">批量删除</button>
<button class="bb-btn" id="bb-batch-cancel">取消批量</button>
<span class="bb-selected-count" id="bb-selected-count">已选择 0 项</span>
</div>
<button class="bb-btn" id="bb-batch-mode-btn" title="批量选择模式">批量选择</button>
</div>
<div class="bb-content" id="bb-content">
<div class="bb-empty-state">
<p>还没有书签，请先导入书签文件、添加书签或将当前访问页面保存为书签</p>
<button class="bb-btn bb-btn-primary" id="bb-empty-import-btn-initial">导入书签</button>
</div>
</div>
</div>
`;
// 添加样式到 Shadow DOM
this.addStyles();
// 插入到页面
document.body.appendChild(container);
}
addStyles() {
const style = document.createElement('style');
style.textContent = `
/* CSS Reset for Shadow DOM */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:host {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
display: none;
}
:host(.visible) {
display: block;
}
.bb-wrapper {
width: 100%;
height: 100%;
background: #f5f5f5;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
overflow-y: auto;
}
.bb-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px 30px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.bb-header h1 {
margin: 0;
font-size: 24px;
font-weight: 600;
}
.bb-controls {
display: flex;
gap: 10px;
}
.bb-btn {
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s;
}
.bb-btn-primary {
background: white;
color: #667eea;
}
.bb-btn-primary:hover {
background: #f0f0f0;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.bb-btn:not(.bb-btn-primary) {
background: rgba(255,255,255,0.2);
color: white;
}
.bb-btn:not(.bb-btn-primary):hover {
background: rgba(255,255,255,0.3);
}
#bb-batch-mode-btn {
background: #f0f0f0;
color: #333;
border: 2px solid #e0e0e0;
}
#bb-batch-mode-btn:hover {
background: #e0e0e0;
border-color: #d0d0d0;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.bb-toolbar {
background: white;
padding: 15px 30px;
display: flex;
gap: 15px;
align-items: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
flex-wrap: wrap;
}
.bb-toolbar .bb-btn:not(.bb-btn-danger) {
background: #f0f0f0;
color: #333;
border: 2px solid #e0e0e0;
}
.bb-toolbar .bb-btn:not(.bb-btn-danger):hover {
background: #e0e0e0;
border-color: #d0d0d0;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.bb-toolbar .bb-btn-danger {
background: #ff4444 !important;
color: white !important;
border: 2px solid #ff4444 !important;
}
.bb-toolbar .bb-btn-danger:hover {
background: #ff6666 !important;
border-color: #ff6666 !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);
}
.bb-search {
flex: 1;
min-width: 200px;
position: relative;
display: flex;
align-items: center;
}
.bb-search-input {
width: 100%;
padding: 10px 40px 10px 15px;
border: 2px solid #e0e0e0;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s;
}
.bb-search-input:focus {
outline: none;
border-color: #667eea;
}
.bb-btn-icon {
width: 36px;
height: 36px;
border: 2px solid #e0e0e0;
background: #e0e0e0;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: all 0.3s;
}
.bb-btn-icon:hover {
border-color: #667eea;
color: #667eea;
}
.bb-btn-icon.active {
background: #667eea;
border-color: #667eea;
color: white;
}
#bb-close-btn {
background: rgba(255,255,255,0.2);
border: none;
color: white;
font-size: 20px;
width: 36px;
height: 36px;
}
#bb-close-btn:hover {
background: rgba(255,255,255,0.3);
}
.bb-view-toggle {
display: flex;
gap: 5px;
}
.bb-batch-controls {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.bb-selected-count {
margin-left: 10px;
color: #667eea;
font-weight: 600;
font-size: 14px;
}
.bb-btn-danger {
background: #ff4444;
color: white;
}
.bb-btn-danger:hover {
background: #ff6666;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);
}
.bb-context-menu {
background: white;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
padding: 8px 0;
min-width: 150px;
z-index: 1000001;
}
.bb-context-menu-item {
padding: 10px 20px;
cursor: pointer;
font-size: 14px;
color: #333;
transition: background 0.2s;
}
.bb-context-menu-item:hover {
background: #f5f5f5;
}
.bb-context-menu-item.bb-context-menu-danger {
color: #ff4444;
}
.bb-context-menu-item.bb-context-menu-danger:hover {
background: #ffe0e0;
}
.bb-content {
padding: 30px;
max-width: 1400px;
margin: 0 auto;
}
.bb-empty-state {
text-align: center;
padding: 60px 20px;
color: #999;
}
.bb-empty-state p {
font-size: 16px;
margin-bottom: 20px;
}
/* 网格视图 */
.bb-grid-view {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.bb-bookmark-card {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: all 0.3s;
cursor: pointer;
border: 2px solid transparent;
position: relative;
}
.bb-bookmark-card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
border-color: #667eea;
}
.bb-bookmark-card.pinned {
border-color: #ffd700;
background: linear-gradient(135deg, #fffef0 0%, #ffffff 100%);
}
.bb-bookmark-card.selected {
border-color: #667eea;
background: #f0f4ff;
}
.bb-bookmark-card .bb-bookmark-checkbox {
position: absolute;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
cursor: pointer;
z-index: 11;
accent-color: #667eea;
}
.bb-pin-btn {
position: absolute;
top: 10px;
right: 10px;
background: rgba(255,255,255,0.9);
border: 2px solid #e0e0e0;
border-radius: 6px;
width: 32px;
height: 32px;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
z-index: 10;
padding: 0;
}
.bb-pin-btn:hover {
background: #fff;
border-color: #667eea;
transform: scale(1.1);
}
.bb-bookmark-card.pinned .bb-pin-btn {
border-color: #ffd700;
background: #fffef0;
}
.bb-bookmark-icon {
width: 48px;
height: 48px;
border-radius: 8px;
margin-bottom: 12px;
object-fit: cover;
}
.bb-bookmark-title {
font-size: 16px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bb-bookmark-url {
font-size: 12px;
color: #999;
margin-bottom: 8px;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 列表视图 */
.bb-list-view {
display: flex;
flex-direction: column;
gap: 10px;
}
.bb-bookmark-item {
background: white;
border-radius: 8px;
padding: 15px 20px;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
transition: all 0.3s;
cursor: pointer;
display: flex;
align-items: center;
gap: 15px;
border: 2px solid transparent;
position: relative;
}
.bb-bookmark-item:hover {
transform: translateX(4px);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
border-color: #667eea;
}
.bb-bookmark-item.pinned {
border-color: #ffd700;
background: linear-gradient(135deg, #fffef0 0%, #ffffff 100%);
}
.bb-bookmark-item.selected {
border-color: #667eea;
background: #f0f4ff;
}
.bb-bookmark-item .bb-bookmark-checkbox {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: #667eea;
flex-shrink: 0;
}
.bb-bookmark-item .bb-pin-btn {
background: rgba(255,255,255,0.9);
border: 2px solid #e0e0e0;
border-radius: 6px;
width: 28px;
height: 28px;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
padding: 0;
flex-shrink: 0;
}
.bb-bookmark-item .bb-pin-btn:hover {
background: #fff;
border-color: #667eea;
transform: scale(1.1);
}
.bb-bookmark-item.pinned .bb-pin-btn {
border-color: #ffd700;
background: #fffef0;
}
.bb-bookmark-item-icon {
width: 32px;
height: 32px;
border-radius: 6px;
flex-shrink: 0;
object-fit: cover;
}
.bb-bookmark-item-info {
flex: 1;
min-width: 0;
}
.bb-bookmark-item-title {
font-size: 15px;
font-weight: 600;
color: #333;
margin-bottom: 4px;
}
.bb-bookmark-item-url {
font-size: 12px;
color: #999;
word-break: break-all;
}
/* 高亮搜索关键词 */
.bb-highlight {
background: #fff3cd;
padding: 2px 4px;
border-radius: 3px;
}
/* 添加书签对话框 */
.bb-dialog-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000000;
}
.bb-dialog {
background: white;
border-radius: 8px;
padding: 24px;
min-width: 400px;
max-width: 500px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.bb-dialog h3 {
margin: 0 0 20px 0;
font-size: 20px;
color: #333;
}
.bb-dialog-form-group {
margin-bottom: 16px;
}
.bb-dialog-form-group label {
display: block;
margin-bottom: 6px;
font-size: 14px;
color: #666;
font-weight: 500;
}
.bb-dialog-form-group input,
.bb-dialog-form-group select {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
}
.bb-dialog-form-group input:focus,
.bb-dialog-form-group select:focus {
outline: none;
border-color: #667eea;
}
.bb-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
.bb-dialog-actions button {
padding: 8px 16px;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: background 0.2s;
}
.bb-dialog-actions .bb-btn-cancel {
background: #f0f0f0;
color: #333;
}
.bb-dialog-actions .bb-btn-cancel:hover {
background: #e0e0e0;
}
.bb-dialog-actions .bb-btn-confirm {
background: #667eea;
color: white;
}
.bb-dialog-actions .bb-btn-confirm:hover {
background: #5568d3;
}
.bb-dialog-actions button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.bb-icon-preview {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
padding: 12px;
background: #f5f5f5;
border-radius: 6px;
}
.bb-icon-preview img {
width: 48px;
height: 48px;
border-radius: 6px;
object-fit: cover;
border: 2px solid #e0e0e0;
}
.bb-icon-preview-text {
font-size: 12px;
color: #666;
}
`;
this.shadowRoot.appendChild(style);
}
bindEvents() {
// 添加当前页面按钮
this.shadowRoot.getElementById('bb-add-current-btn').addEventListener('click', () => {
this.showAddCurrentPageDialog();
});
// 手动添加书签按钮
this.shadowRoot.getElementById('bb-add-manual-btn').addEventListener('click', () => {
this.showAddManualDialog();
});
// 导入按钮
this.shadowRoot.getElementById('bb-import-btn').addEventListener('click', () => {
this.shadowRoot.getElementById('bb-file-input').click();
});
// 空状态的导入按钮（初始状态）
const emptyImportBtn = this.shadowRoot.getElementById('bb-empty-import-btn-initial');
if (emptyImportBtn) {
emptyImportBtn.addEventListener('click', () => {
this.shadowRoot.getElementById('bb-file-input').click();
});
}
// 文件选择
this.shadowRoot.getElementById('bb-file-input').addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
this.importBookmarks(file);
// 清空文件输入，以便可以重复选择同一个文件
e.target.value = '';
}
});
// 导出按钮
this.shadowRoot.getElementById('bb-export-btn').addEventListener('click', () => {
this.exportBookmarks();
});
// 搜索
this.shadowRoot.getElementById('bb-search-input').addEventListener('input', (e) => {
this.searchQuery = e.target.value.toLowerCase();
this.filterBookmarks();
});
// 清除搜索
this.shadowRoot.getElementById('bb-clear-search').addEventListener('click', () => {
this.shadowRoot.getElementById('bb-search-input').value = '';
this.searchQuery = '';
this.filterBookmarks();
});
// 视图切换
this.shadowRoot.getElementById('bb-grid-view').addEventListener('click', () => {
this.currentView = 'grid';
this.updateViewButtons();
this.renderBookmarks();
});
this.shadowRoot.getElementById('bb-list-view').addEventListener('click', () => {
this.currentView = 'list';
this.updateViewButtons();
this.renderBookmarks();
});
// 批量选择模式按钮
this.shadowRoot.getElementById('bb-batch-mode-btn').addEventListener('click', () => {
this.toggleBatchMode();
});
// 批量操作按钮
this.shadowRoot.getElementById('bb-batch-select-all').addEventListener('click', () => {
this.selectAllBookmarks();
});
this.shadowRoot.getElementById('bb-batch-deselect-all').addEventListener('click', () => {
this.deselectAllBookmarks();
});
this.shadowRoot.getElementById('bb-batch-pin').addEventListener('click', () => {
if (this.selectedBookmarks.size > 0) {
this.batchPin();
}
});
this.shadowRoot.getElementById('bb-batch-unpin').addEventListener('click', () => {
if (this.selectedBookmarks.size > 0) {
this.batchUnpin();
}
});
this.shadowRoot.getElementById('bb-batch-delete').addEventListener('click', () => {
const count = this.selectedBookmarks.size;
if (count > 0) {
if (confirm(`确定要删除选中的 ${count} 个书签吗？`)) {
const urls = Array.from(this.selectedBookmarks);
this.deleteBookmarks(urls);
this.toggleBatchMode();
}
}
});
this.shadowRoot.getElementById('bb-batch-cancel').addEventListener('click', () => {
this.toggleBatchMode();
});
// 关闭按钮
this.shadowRoot.getElementById('bb-close-btn').addEventListener('click', () => {
this.hide();
});
// 快捷键绑定
document.addEventListener('keydown', (e) => {
// Ctrl+B 或 Cmd+B 打开/关闭
if ((e.ctrlKey || e.metaKey) && e.key === 'b' && !e.shiftKey) {
e.preventDefault();
this.toggle();
}
// Ctrl+Shift+A 或 Cmd+Shift+A 添加当前页面
if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'A') {
e.preventDefault();
this.showAddCurrentPageDialog();
}
// Esc 关闭
if (e.key === 'Escape' && this.isVisible) {
this.hide();
}
});
// 点击背景关闭
const container = document.getElementById('better-bookmarks-container');
container.addEventListener('click', (e) => {
// 检查点击是否在 Shadow DOM 内部
// 如果事件路径中包含 Shadow Root，说明点击的是 Shadow DOM 内的元素，不关闭
// 如果事件路径中不包含 Shadow Root，说明点击的是容器本身（背景），关闭
const path = e.composedPath();
const clickedInShadow = path.includes(this.shadowRoot);
// 只有当点击的是容器本身（不在 Shadow DOM 内）时才关闭
if (!clickedInShadow) {
this.hide();
}
});
}
show() {
this.isVisible = true;
// 每次显示时重新加载数据，确保同步最新数据
this.loadFromStorage();
document.getElementById('better-bookmarks-container').classList.add('visible');
// 聚焦搜索框
setTimeout(() => {
this.shadowRoot.getElementById('bb-search-input').focus();
}, 100);
}
hide() {
this.isVisible = false;
document.getElementById('better-bookmarks-container').classList.remove('visible');
}
toggle() {
if (this.isVisible) {
this.hide();
} else {
this.show();
}
}
updateViewButtons() {
this.shadowRoot.getElementById('bb-grid-view').classList.toggle('active', this.currentView === 'grid');
this.shadowRoot.getElementById('bb-list-view').classList.toggle('active', this.currentView === 'list');
}
importBookmarks(file) {
const reader = new FileReader();
reader.onload = (e) => {
const html = e.target.result;
this.parseBookmarks(html);
// 保存到存储（使用 GM_setValue，可在所有网站间共享）
this.saveToStorage();
this.filterBookmarks();
};
reader.onerror = () => {
alert('读取文件失败，请重试');
};
reader.readAsText(file);
}
parseBookmarks(html) {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
this.bookmarks = [];
// 递归解析书签（忽略文件夹结构）
const parseNode = (node) => {
const children = node.querySelectorAll(':scope > DT');
children.forEach(child => {
const h3 = child.querySelector('H3');
const a = child.querySelector('A');
if (h3) {
// 文件夹，递归解析其内容
const dl = child.querySelector('DL');
if (dl) {
parseNode(dl);
}
} else if (a) {
// 书签
const href = a.getAttribute('HREF');
const title = a.textContent.trim();
const icon = a.getAttribute('ICON');
const addDate = a.getAttribute('ADD_DATE');
if (href && title) {
this.bookmarks.push({
title,
url: href,
icon: icon || this.getDefaultIcon(href),
addDate: addDate ? parseInt(addDate) * 1000 : Date.now(),
pinned: false
});
}
}
});
};
const dl = doc.querySelector('DL');
if (dl) {
parseNode(dl);
}
// 按置顶和标题排序
this.bookmarks.sort((a, b) => {
// 置顶的书签优先
if (a.pinned !== b.pinned) {
return b.pinned ? 1 : -1;
}
return a.title.localeCompare(b.title);
});
}
normalizeUrl(url) {
// 规范化URL，自动添加协议
if (!url) return url;
url = url.trim();
// 如果已经有协议，直接返回
if (/^https?:\/\//i.test(url)) {
return url;
}
// 如果以www开头或其他格式，自动添加https://
return `https://${url}`;
}
getFavicon(url) {
// 同步获取favicon URL（使用Google的favicon服务）
try {
const normalizedUrl = this.normalizeUrl(url);
const urlObj = new URL(normalizedUrl);
const domain = urlObj.hostname;
// 使用Google的favicon服务（最可靠且快速）
return `https://www.google.com/s2/favicons?domain=${domain}&sz=64`;
} catch {
return 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><rect width="32" height="32" fill="%23667eea"/></svg>';
}
}
getDefaultIcon(url) {
// 保持向后兼容，使用同步方法
return this.getFavicon(url);
}
filterBookmarks() {
this.filteredBookmarks = this.bookmarks.filter(bookmark => {
// 搜索筛选
if (this.searchQuery) {
const query = this.searchQuery.toLowerCase();
return bookmark.title.toLowerCase().includes(query) ||
bookmark.url.toLowerCase().includes(query);
}
return true;
});
// 对过滤后的书签进行排序：置顶优先
this.filteredBookmarks.sort((a, b) => {
if (a.pinned !== b.pinned) {
return b.pinned ? 1 : -1;
}
return a.title.localeCompare(b.title);
});
this.renderBookmarks();
}
highlightText(text, query) {
if (!query) return this.escapeHtml(text);
// 转义HTML
const escaped = this.escapeHtml(text);
// 转义查询字符串中的特殊字符
const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const regex = new RegExp(`(${escapedQuery})`, 'gi');
return escaped.replace(regex, '<span class="bb-highlight">$1</span>');
}
renderBookmarks() {
const content = this.shadowRoot.getElementById('bb-content');
if (this.filteredBookmarks.length === 0) {
content.innerHTML = `
<div class="bb-empty-state">
<p>${this.searchQuery ? '没有找到匹配的书签' : '还没有书签，请先导入书签文件、添加书签或将当前访问页面保存为书签'}</p>
${!this.searchQuery ? `<button class="bb-btn bb-btn-primary" id="bb-empty-import-btn">导入书签</button>` : ''}
</div>
`;
// 绑定空状态的导入按钮事件
if (!this.searchQuery) {
const emptyImportBtn = content.querySelector('#bb-empty-import-btn');
if (emptyImportBtn) {
emptyImportBtn.addEventListener('click', () => {
this.shadowRoot.getElementById('bb-file-input').click();
});
}
}
return;
}
let html = '';
if (this.currentView === 'grid') {
html += '<div class="bb-grid-view">';
this.filteredBookmarks.forEach(bookmark => {
html += this.renderBookmarkCard(bookmark);
});
html += '</div>';
} else {
html += '<div class="bb-list-view">';
this.filteredBookmarks.forEach(bookmark => {
html += this.renderBookmarkItem(bookmark);
});
html += '</div>';
}
content.innerHTML = html;
// 更新批量工具栏状态
this.updateBatchToolbar();
// 绑定点击事件
content.querySelectorAll('.bb-bookmark-card, .bb-bookmark-item').forEach((el) => {
el.addEventListener('click', (e) => {
// 如果点击的是复选框、置顶按钮或右键菜单，不打开链接
if (e.target.classList.contains('bb-pin-btn') ||
e.target.classList.contains('bb-bookmark-checkbox') ||
e.target.closest('.bb-context-menu')) {
e.stopPropagation();
return;
}
// 批量模式下点击卡片选择/取消选择
if (this.batchMode) {
const url = el.getAttribute('data-url');
if (url) {
this.toggleBookmarkSelection(url);
this.renderBookmarks();
}
return;
}
const url = el.getAttribute('data-url');
if (url) {
window.open(url, '_blank');
}
});
// 绑定右键菜单
el.addEventListener('contextmenu', (e) => {
e.preventDefault();
e.stopPropagation();
const url = el.getAttribute('data-url');
if (url) {
this.showContextMenu(e, url);
}
});
});
// 绑定复选框事件
content.querySelectorAll('.bb-bookmark-checkbox').forEach((checkbox) => {
checkbox.addEventListener('change', (e) => {
e.stopPropagation();
const url = checkbox.getAttribute('data-url');
if (url) {
this.toggleBookmarkSelection(url);
this.renderBookmarks();
}
});
});
// 绑定置顶按钮事件
content.querySelectorAll('.bb-pin-btn').forEach((btn) => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const url = btn.getAttribute('data-url');
this.togglePin(url);
});
});
}
renderBookmarkCard(bookmark) {
const highlightedTitle = this.highlightText(bookmark.title, this.searchQuery);
const highlightedUrl = this.highlightText(bookmark.url, this.searchQuery);
const pinIcon = bookmark.pinned ? '📌' : '📍';
const pinClass = bookmark.pinned ? 'pinned' : '';
const isSelected = this.selectedBookmarks.has(bookmark.url);
const checkboxHtml = this.batchMode ? `
<input type="checkbox" class="bb-bookmark-checkbox" data-url="${this.escapeHtml(bookmark.url)}" ${isSelected ? 'checked' : ''}>
` : '';
return `
<div class="bb-bookmark-card ${pinClass} ${isSelected ? 'selected' : ''}" data-url="${this.escapeHtml(bookmark.url)}">
${checkboxHtml}
<button class="bb-pin-btn" data-url="${this.escapeHtml(bookmark.url)}" title="${bookmark.pinned ? '取消置顶' : '置顶'}">${pinIcon}</button>
<img src="${this.escapeHtml(bookmark.icon)}" alt="" class="bb-bookmark-icon" onerror="this.src='data:image/svg+xml,<svg xmlns=\\'http://www.w3.org/2000/svg\\' width=\\'48\\' height=\\'48\\'><rect width=\\'48\\' height=\\'48\\' fill=\\'%23667eea\\'/></svg>'">
<div class="bb-bookmark-title">${highlightedTitle}</div>
<div class="bb-bookmark-url">${highlightedUrl}</div>
</div>
`;
}
renderBookmarkItem(bookmark) {
const highlightedTitle = this.highlightText(bookmark.title, this.searchQuery);
const highlightedUrl = this.highlightText(bookmark.url, this.searchQuery);
const pinIcon = bookmark.pinned ? '📌' : '📍';
const pinClass = bookmark.pinned ? 'pinned' : '';
const isSelected = this.selectedBookmarks.has(bookmark.url);
const checkboxHtml = this.batchMode ? `
<input type="checkbox" class="bb-bookmark-checkbox" data-url="${this.escapeHtml(bookmark.url)}" ${isSelected ? 'checked' : ''}>
` : '';
return `
<div class="bb-bookmark-item ${pinClass} ${isSelected ? 'selected' : ''}" data-url="${this.escapeHtml(bookmark.url)}">
${checkboxHtml}
<button class="bb-pin-btn" data-url="${this.escapeHtml(bookmark.url)}" title="${bookmark.pinned ? '取消置顶' : '置顶'}">${pinIcon}</button>
<img src="${this.escapeHtml(bookmark.icon)}" alt="" class="bb-bookmark-item-icon" onerror="this.src='data:image/svg+xml,<svg xmlns=\\'http://www.w3.org/2000/svg\\' width=\\'32\\' height=\\'32\\'><rect width=\\'32\\' height=\\'32\\' fill=\\'%23667eea\\'/></svg>'">
<div class="bb-bookmark-item-info">
<div class="bb-bookmark-item-title">${highlightedTitle}</div>
<div class="bb-bookmark-item-url">${highlightedUrl}</div>
</div>
</div>
`;
}
togglePin(url) {
const bookmark = this.bookmarks.find(b => b.url === url);
if (bookmark) {
bookmark.pinned = !bookmark.pinned;
this.saveToStorage();
this.filterBookmarks();
}
}
deleteBookmark(url) {
const index = this.bookmarks.findIndex(b => b.url === url);
if (index !== -1) {
// 从内存中删除
this.bookmarks.splice(index, 1);
this.selectedBookmarks.delete(url);
// 使用油猴 API 保存到存储
try {
if (this.bookmarks && this.bookmarks.length > 0) {
GM_setValue('better-bookmarks', JSON.stringify(this.bookmarks));
} else {
GM_setValue('better-bookmarks', JSON.stringify([]));
}
} catch (e) {
console.error('删除书签失败:', e);
alert('删除书签失败: ' + e.message);
return;
}
this.filterBookmarks();
}
}
deleteBookmarks(urls) {
// 从内存中批量删除
urls.forEach(url => {
const index = this.bookmarks.findIndex(b => b.url === url);
if (index !== -1) {
this.bookmarks.splice(index, 1);
}
this.selectedBookmarks.delete(url);
});
// 使用油猴 API 保存到存储
try {
if (this.bookmarks && this.bookmarks.length > 0) {
GM_setValue('better-bookmarks', JSON.stringify(this.bookmarks));
} else {
GM_setValue('better-bookmarks', JSON.stringify([]));
}
} catch (e) {
console.error('批量删除书签失败:', e);
alert('批量删除书签失败: ' + e.message);
return;
}
this.filterBookmarks();
}
toggleBookmarkSelection(url) {
if (this.selectedBookmarks.has(url)) {
this.selectedBookmarks.delete(url);
} else {
this.selectedBookmarks.add(url);
}
this.updateBatchToolbar();
}
selectAllBookmarks() {
this.filteredBookmarks.forEach(bookmark => {
this.selectedBookmarks.add(bookmark.url);
});
this.updateBatchToolbar();
this.renderBookmarks();
}
deselectAllBookmarks() {
this.selectedBookmarks.clear();
this.updateBatchToolbar();
this.renderBookmarks();
}
toggleBatchMode() {
this.batchMode = !this.batchMode;
if (!this.batchMode) {
this.selectedBookmarks.clear();
}
this.updateBatchToolbar();
this.renderBookmarks();
}
batchPin() {
const urls = Array.from(this.selectedBookmarks);
urls.forEach(url => {
const bookmark = this.bookmarks.find(b => b.url === url);
if (bookmark && !bookmark.pinned) {
bookmark.pinned = true;
}
});
this.saveToStorage();
this.filterBookmarks();
this.selectedBookmarks.clear();
this.updateBatchToolbar();
}
batchUnpin() {
const urls = Array.from(this.selectedBookmarks);
urls.forEach(url => {
const bookmark = this.bookmarks.find(b => b.url === url);
if (bookmark && bookmark.pinned) {
bookmark.pinned = false;
}
});
this.saveToStorage();
this.filterBookmarks();
this.selectedBookmarks.clear();
this.updateBatchToolbar();
}
showContextMenu(e, url) {
// 移除已存在的右键菜单
const existingMenu = this.shadowRoot.querySelector('.bb-context-menu');
if (existingMenu) {
existingMenu.remove();
}
const bookmark = this.bookmarks.find(b => b.url === url);
if (!bookmark) return;
// 获取容器位置
const container = this.shadowRoot.querySelector('.bb-wrapper');
const rect = container.getBoundingClientRect();
const menu = document.createElement('div');
menu.className = 'bb-context-menu';
menu.style.position = 'absolute';
menu.style.left = `${e.clientX - rect.left}px`;
menu.style.top = `${e.clientY - rect.top}px`;
menu.style.zIndex = '1000001';
menu.innerHTML = `
<div class="bb-context-menu-item" data-action="pin">${bookmark.pinned ? '取消置顶' : '置顶'}</div>
<div class="bb-context-menu-item" data-action="edit">编辑</div>
<div class="bb-context-menu-item bb-context-menu-danger" data-action="delete">删除</div>
`;
container.appendChild(menu);
// 绑定菜单项点击事件
menu.querySelectorAll('.bb-context-menu-item').forEach(item => {
item.addEventListener('click', (e) => {
e.stopPropagation();
const action = item.getAttribute('data-action');
this.handleContextMenuAction(action, url);
menu.remove();
});
});
// 点击其他地方关闭菜单
const closeMenu = (e) => {
const path = e.composedPath ? e.composedPath() : [];
if (!path.includes(menu)) {
menu.remove();
document.removeEventListener('click', closeMenu);
}
};
setTimeout(() => {
document.addEventListener('click', closeMenu);
}, 100);
}
handleContextMenuAction(action, url) {
switch (action) {
case 'pin':
this.togglePin(url);
break;
case 'edit':
const bookmark = this.bookmarks.find(b => b.url === url);
if (bookmark) {
this.showEditBookmarkDialog(bookmark);
}
break;
case 'delete':
if (confirm('确定要删除这个书签吗？')) {
this.deleteBookmark(url);
}
break;
}
}
updateBatchToolbar() {
const batchControls = this.shadowRoot.getElementById('bb-batch-controls');
const batchModeBtn = this.shadowRoot.getElementById('bb-batch-mode-btn');
const selectedCount = this.shadowRoot.getElementById('bb-selected-count');
if (this.batchMode) {
batchControls.style.display = 'flex';
batchModeBtn.textContent = '取消批量';
const count = this.selectedBookmarks.size;
selectedCount.textContent = `已选择 ${count} 项`;
} else {
batchControls.style.display = 'none';
batchModeBtn.textContent = '批量选择';
}
}
showAddCurrentPageDialog() {
// 获取当前页面信息
const currentUrl = window.location.href;
const currentTitle = document.title || currentUrl;
// 检查是否已存在
const existingBookmark = this.bookmarks.find(b => b.url === currentUrl);
if (existingBookmark) {
if (confirm(`该页面已存在于书签中：\n${existingBookmark.title}\n\n是否要更新它？`)) {
this.showEditBookmarkDialog(existingBookmark);
}
return;
}
// 创建对话框（在 Shadow DOM 中）
const overlay = document.createElement('div');
overlay.className = 'bb-dialog-overlay';
const overlayStyle = document.createElement('style');
overlayStyle.textContent = `
.bb-dialog-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000000;
}
.bb-dialog {
background: white;
border-radius: 8px;
padding: 24px;
min-width: 400px;
max-width: 500px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.bb-dialog h3 {
margin: 0 0 20px 0;
font-size: 20px;
color: #333;
}
.bb-dialog-form-group {
margin-bottom: 16px;
}
.bb-dialog-form-group label {
display: block;
margin-bottom: 6px;
font-size: 14px;
color: #666;
font-weight: 500;
}
.bb-dialog-form-group input {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
}
.bb-dialog-form-group input:focus {
outline: none;
border-color: #667eea;
}
.bb-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
.bb-dialog-actions button {
padding: 8px 16px;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: background 0.2s;
}
.bb-dialog-actions .bb-btn-cancel {
background: #f0f0f0;
color: #333;
}
.bb-dialog-actions .bb-btn-cancel:hover {
background: #e0e0e0;
}
.bb-dialog-actions .bb-btn-confirm {
background: #667eea;
color: white;
}
.bb-dialog-actions .bb-btn-confirm:hover {
background: #5568d3;
}
`;
overlay.appendChild(overlayStyle);
const dialog = document.createElement('div');
dialog.className = 'bb-dialog';
dialog.innerHTML = `
<h3>添加当前页面</h3>
<div class="bb-dialog-form-group">
<label>标题</label>
<input type="text" id="bb-dialog-title" value="${this.escapeHtml(currentTitle)}" />
</div>
<div class="bb-dialog-form-group">
<label>URL</label>
<input type="text" id="bb-dialog-url" value="${this.escapeHtml(currentUrl)}" readonly style="background: #f5f5f5;" />
</div>
<div class="bb-dialog-actions">
<button class="bb-btn-cancel" id="bb-dialog-cancel">取消</button>
<button class="bb-btn-confirm" id="bb-dialog-confirm">添加</button>
</div>
`;
overlay.appendChild(dialog);
document.body.appendChild(overlay);
// 绑定事件
const cancelBtn = overlay.querySelector('#bb-dialog-cancel');
const confirmBtn = overlay.querySelector('#bb-dialog-confirm');
const titleInput = overlay.querySelector('#bb-dialog-title');
const closeDialog = () => {
document.body.removeChild(overlay);
};
cancelBtn.addEventListener('click', closeDialog);
overlay.addEventListener('click', (e) => {
if (e.target === overlay) {
closeDialog();
}
});
confirmBtn.addEventListener('click', () => {
const title = titleInput.value.trim();
let url = overlay.querySelector('#bb-dialog-url').value.trim();
if (!title) {
alert('请输入标题');
return;
}
if (!url) {
alert('URL不能为空');
return;
}
// 规范化URL（自动添加https://）
url = this.normalizeUrl(url);
// 验证URL格式
try {
new URL(url);
} catch {
alert('请输入有效的URL（例如：example.com 或 www.example.com）');
return;
}
this.addBookmark(title, url);
closeDialog();
});
// 按Enter确认
titleInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
confirmBtn.click();
}
});
// 聚焦到标题输入框
setTimeout(() => titleInput.focus(), 100);
}
showAddManualDialog() {
// 创建对话框
const overlay = document.createElement('div');
overlay.className = 'bb-dialog-overlay';
const overlayStyle = document.createElement('style');
overlayStyle.textContent = `
.bb-dialog-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000000;
}
.bb-dialog {
background: white;
border-radius: 8px;
padding: 24px;
min-width: 400px;
max-width: 500px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.bb-dialog h3 {
margin: 0 0 20px 0;
font-size: 20px;
color: #333;
}
.bb-dialog-form-group {
margin-bottom: 16px;
}
.bb-dialog-form-group label {
display: block;
margin-bottom: 6px;
font-size: 14px;
color: #666;
font-weight: 500;
}
.bb-dialog-form-group input {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
}
.bb-dialog-form-group input:focus {
outline: none;
border-color: #667eea;
}
.bb-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
.bb-dialog-actions button {
padding: 8px 16px;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: background 0.2s;
}
.bb-dialog-actions .bb-btn-cancel {
background: #f0f0f0;
color: #333;
}
.bb-dialog-actions .bb-btn-cancel:hover {
background: #e0e0e0;
}
.bb-dialog-actions .bb-btn-confirm {
background: #667eea;
color: white;
}
.bb-dialog-actions .bb-btn-confirm:hover {
background: #5568d3;
}
.bb-dialog-actions button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.bb-icon-preview {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
padding: 12px;
background: #f5f5f5;
border-radius: 6px;
}
.bb-icon-preview img {
width: 48px;
height: 48px;
border-radius: 6px;
object-fit: cover;
border: 2px solid #e0e0e0;
}
.bb-icon-preview-text {
font-size: 12px;
color: #666;
}
`;
overlay.appendChild(overlayStyle);
const dialog = document.createElement('div');
dialog.className = 'bb-dialog';
dialog.innerHTML = `
<h3>手动添加书签</h3>
<div class="bb-dialog-form-group">
<label>标题</label>
<input type="text" id="bb-manual-dialog-title" placeholder="输入书签标题" />
</div>
<div class="bb-dialog-form-group">
<label>URL</label>
<input type="text" id="bb-manual-dialog-url" placeholder="https://example.com" />
<div class="bb-icon-preview" id="bb-icon-preview" style="display: none;">
<img id="bb-icon-preview-img" src="" alt="Icon" />
<div class="bb-icon-preview-text">网站图标预览</div>
</div>
</div>
<div class="bb-dialog-actions">
<button class="bb-btn-cancel" id="bb-manual-dialog-cancel">取消</button>
<button class="bb-btn-confirm" id="bb-manual-dialog-confirm">添加</button>
</div>
`;
overlay.appendChild(dialog);
document.body.appendChild(overlay);
// 绑定事件
const cancelBtn = overlay.querySelector('#bb-manual-dialog-cancel');
const confirmBtn = overlay.querySelector('#bb-manual-dialog-confirm');
const titleInput = overlay.querySelector('#bb-manual-dialog-title');
const urlInput = overlay.querySelector('#bb-manual-dialog-url');
const iconPreview = overlay.querySelector('#bb-icon-preview');
const iconPreviewImg = overlay.querySelector('#bb-icon-preview-img');
// URL输入时自动获取并预览icon
let iconUpdateTimeout;
urlInput.addEventListener('input', () => {
clearTimeout(iconUpdateTimeout);
let url = urlInput.value.trim();
if (!url) {
iconPreview.style.display = 'none';
return;
}
// 规范化URL（自动添加https://）
url = this.normalizeUrl(url);
// 验证URL格式
try {
new URL(url);
} catch {
iconPreview.style.display = 'none';
return;
}
// 延迟更新，避免频繁请求
iconUpdateTimeout = setTimeout(() => {
const icon = this.getFavicon(url);
iconPreviewImg.src = icon;
iconPreviewImg.onerror = () => {
iconPreviewImg.src = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><rect width="48" height="48" fill="%23667eea"/></svg>';
};
iconPreview.style.display = 'flex';
}, 500);
});
const closeDialog = () => {
document.body.removeChild(overlay);
};
cancelBtn.addEventListener('click', closeDialog);
overlay.addEventListener('click', (e) => {
if (e.target === overlay) {
closeDialog();
}
});
confirmBtn.addEventListener('click', async () => {
const title = titleInput.value.trim();
let url = urlInput.value.trim();
if (!title) {
alert('请输入标题');
return;
}
if (!url) {
alert('URL不能为空');
return;
}
// 规范化URL（自动添加https://）
url = this.normalizeUrl(url);
// 验证URL格式
try {
new URL(url);
} catch {
alert('请输入有效的URL（例如：example.com 或 www.example.com）');
return;
}
// 检查是否已存在
const existingBookmark = this.bookmarks.find(b => b.url === url);
if (existingBookmark) {
if (!confirm(`该URL已存在于书签中：\n${existingBookmark.title}\n\n是否要更新它？`)) {
return;
}
}
this.addBookmark(title, url);
closeDialog();
});
// 按Enter确认
urlInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
confirmBtn.click();
}
});
titleInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
urlInput.focus();
}
});
// 聚焦到标题输入框
setTimeout(() => titleInput.focus(), 100);
}
showEditBookmarkDialog(bookmark) {
// 创建对话框（在 Shadow DOM 中）
const overlay = document.createElement('div');
overlay.className = 'bb-dialog-overlay';
const overlayStyle = document.createElement('style');
overlayStyle.textContent = `
.bb-dialog-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000000;
}
.bb-dialog {
background: white;
border-radius: 8px;
padding: 24px;
min-width: 400px;
max-width: 500px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.bb-dialog h3 {
margin: 0 0 20px 0;
font-size: 20px;
color: #333;
}
.bb-dialog-form-group {
margin-bottom: 16px;
}
.bb-dialog-form-group label {
display: block;
margin-bottom: 6px;
font-size: 14px;
color: #666;
font-weight: 500;
}
.bb-dialog-form-group input {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
}
.bb-dialog-form-group input:focus {
outline: none;
border-color: #667eea;
}
.bb-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
.bb-dialog-actions button {
padding: 8px 16px;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: background 0.2s;
}
.bb-dialog-actions .bb-btn-cancel {
background: #f0f0f0;
color: #333;
}
.bb-dialog-actions .bb-btn-cancel:hover {
background: #e0e0e0;
}
.bb-dialog-actions .bb-btn-confirm {
background: #667eea;
color: white;
}
.bb-dialog-actions .bb-btn-confirm:hover {
background: #5568d3;
}
`;
overlay.appendChild(overlayStyle);
const dialog = document.createElement('div');
dialog.className = 'bb-dialog';
dialog.innerHTML = `
<h3>编辑书签</h3>
<div class="bb-dialog-form-group">
<label>标题</label>
<input type="text" id="bb-dialog-title" value="${this.escapeHtml(bookmark.title)}" />
</div>
<div class="bb-dialog-form-group">
<label>URL</label>
<input type="text" id="bb-dialog-url" value="${this.escapeHtml(bookmark.url)}" />
</div>
<div class="bb-dialog-actions">
<button class="bb-btn-cancel" id="bb-dialog-cancel">取消</button>
<button class="bb-btn-confirm" id="bb-dialog-confirm">保存</button>
</div>
`;
overlay.appendChild(dialog);
document.body.appendChild(overlay);
// 绑定事件
const cancelBtn = overlay.querySelector('#bb-dialog-cancel');
const confirmBtn = overlay.querySelector('#bb-dialog-confirm');
const titleInput = overlay.querySelector('#bb-dialog-title');
const urlInput = overlay.querySelector('#bb-dialog-url');
const closeDialog = () => {
document.body.removeChild(overlay);
};
cancelBtn.addEventListener('click', closeDialog);
overlay.addEventListener('click', (e) => {
if (e.target === overlay) {
closeDialog();
}
});
confirmBtn.addEventListener('click', () => {
const title = titleInput.value.trim();
let url = urlInput.value.trim();
if (!title) {
alert('请输入标题');
return;
}
if (!url) {
alert('URL不能为空');
return;
}
// 规范化URL（自动添加https://）
url = this.normalizeUrl(url);
// 验证URL格式
try {
new URL(url);
} catch {
alert('请输入有效的URL（例如：example.com 或 www.example.com）');
return;
}
bookmark.title = title;
bookmark.url = url;
bookmark.icon = this.getFavicon(url);
this.saveToStorage();
this.filterBookmarks();
closeDialog();
});
// 聚焦到标题输入框
setTimeout(() => titleInput.focus(), 100);
}
addBookmark(title, url) {
// 检查是否已存在相同的URL
const existingIndex = this.bookmarks.findIndex(b => b.url === url);
const icon = this.getFavicon(url);
if (existingIndex !== -1) {
// 如果已存在，更新它
this.bookmarks[existingIndex].title = title;
this.bookmarks[existingIndex].icon = icon;
} else {
// 添加新书签
this.bookmarks.push({
title: title.trim(),
url: url.trim(),
icon: icon,
addDate: Date.now(),
pinned: false
});
}
// 保存并更新显示
this.saveToStorage();
this.filterBookmarks();
}
addCurrentPage(title, url) {
// 保持向后兼容
this.addBookmark(title, url);
}
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
saveToStorage() {
try {
if (this.bookmarks && this.bookmarks.length > 0) {
GM_setValue('better-bookmarks', JSON.stringify(this.bookmarks));
} else {
// 如果书签为空，也保存空数组，以便下次加载时知道已经初始化过
GM_setValue('better-bookmarks', JSON.stringify([]));
}
} catch (e) {
console.error('保存书签失败:', e);
alert('保存书签失败: ' + e.message);
}
}
setupAutoSave() {
// 页面关闭前保存
window.addEventListener('beforeunload', () => {
this.saveToStorage();
});
// 页面隐藏时保存（切换标签页等）
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
this.saveToStorage();
}
});
}
setupStorageListener() {
// 监听存储变化，实现跨标签页实时同步
try {
if (typeof GM_addValueChangeListener !== 'undefined') {
this.storageListener = GM_addValueChangeListener('better-bookmarks', (name, oldValue, newValue, remote) => {
// remote 为 true 表示变化来自其他标签页
if (remote) {
// 重新加载数据
this.loadFromStorage();
// 如果界面是打开的，刷新显示
if (this.isVisible) {
this.filterBookmarks();
}
}
});
}
} catch (e) {
console.warn('无法设置存储监听器:', e);
// 如果不支持监听器，至少每次显示时重新加载数据（已在 show() 方法中实现）
}
}
loadFromStorage() {
try {
// 先尝试从 GM_getValue 加载
let stored = GM_getValue('better-bookmarks', null);
// 如果 GM_getValue 没有数据，尝试从 localStorage 迁移（兼容旧数据）
if (!stored) {
const oldStored = localStorage.getItem('better-bookmarks');
if (oldStored) {
stored = oldStored;
// 迁移到 GM_setValue
GM_setValue('better-bookmarks', oldStored);
// 清理旧的 localStorage 数据
try {
localStorage.removeItem('better-bookmarks');
} catch (e) {
// 忽略清理错误
}
}
}
if (stored) {
this.bookmarks = JSON.parse(stored);
// 确保所有书签都有 pinned 属性，并移除旧的 folder 属性
this.bookmarks.forEach(bookmark => {
if (bookmark.pinned === undefined) {
bookmark.pinned = false;
}
// 移除 folder 属性（如果存在）
if (bookmark.folder !== undefined) {
delete bookmark.folder;
}
});
// 保存清理后的数据
this.saveToStorage();
this.filterBookmarks();
}
} catch (e) {
console.error('加载书签失败:', e);
}
}
exportBookmarks() {
// 生成Netscape格式的书签HTML
let html = `<!DOCTYPE NETSCAPE-Bookmark-file-1>
<!-- This is an automatically generated file.
It is created by 更好的书签 -->
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<TITLE>Bookmarks</TITLE>
<H1>Bookmarks</H1>
<DL><p>`;
// 生成HTML（所有书签放在一个文件夹中）
html += ` <DT><H3>收藏夹</H3>\n <DL><p>\n`;
this.bookmarks.forEach(bookmark => {
const date = Math.floor(bookmark.addDate / 1000);
const url = this.escapeHtml(bookmark.url);
const icon = this.escapeHtml(bookmark.icon || '');
const title = this.escapeHtml(bookmark.title);
html += ` <DT><A HREF="${url}" ADD_DATE="${date}" ICON="${icon}">${title}</A>\n`;
});
html += ` </DL><p>\n`;
html += `</DL><p>`;
// 下载文件
const blob = new Blob([html], { type: 'text/html;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `bookmarks_${new Date().toISOString().split('T')[0]}.html`;
a.click();
URL.revokeObjectURL(url);
}
}
// 注册油猴菜单命令 - 显示快捷键提示
GM_registerMenuCommand('快捷键说明', () => {
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
const ctrlKey = isMac ? 'Cmd' : 'Ctrl';
const shortcuts = [
`${ctrlKey} + B：打开/关闭书签界面`,
`${ctrlKey} + Shift + A：添加当前页面到书签`,
`Esc：关闭书签界面`
];
alert('快捷键说明：\n\n' + shortcuts.join('\n'));
});
// 等待DOM加载完成后初始化
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
new BookmarkManager();
});
} else {
new BookmarkManager();
}
})();