☰

网页划词高亮工具

提供网页划词高亮功能

  1. // ==UserScript==
  2. // @name         网页划词高亮工具
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2.1
  5. // @description  提供网页划词高亮功能
  6. // @author       sunny43
  7. // @license      MIT
  8. // @match        *://*/*
  9. // @grant        GM_addStyle
  10. // @grant        GM_setValue
  11. // @grant        GM_getValue
  12. // @grant        GM_registerMenuCommand
  13. // ==/UserScript==
  14.  
  15. (function () {
  16.     'use strict';
  17.  
  18.     const STYLE_PREFIX = 'sunny43-';
  19.  
  20.     // 全局变量
  21.     let highlights = [];
  22.     let currentPageUrl = window.location.href;
  23.     let currentDomain = window.location.hostname;
  24.     let settings = GM_getValue('highlight_settings', {
  25.         colors: ['#ff909c', '#b89fff', '#74b4ff', '#70d382', '#ffcb7e'],
  26.         activeColor: '#ff909c',
  27.         minTextLength: 1,
  28.         enableFuzzyMatch: true,
  29.         maxContextDistance: 50,
  30.         sidebarDescription: '高亮工具',
  31.         sidebarWidth: 320,
  32.         showFloatingButton: true
  33.     });
  34.     let savedRange = null; // 保存选区范围
  35.     let ignoreNextClick = false; // 忽略下一次点击的标志
  36.     let menuDisplayTimer = null; // 菜单显示定时器
  37.     let menuOperationInProgress = false; // 添加菜单操作锁定
  38.     // 启用列表
  39.     let enabledList = GM_getValue('enabled_list', {
  40.         domains: [],
  41.         urls: []
  42.     });
  43.     // 检查当前页面是否启用高亮功能
  44.     let isHighlightEnabled = enabledList.domains.includes(currentDomain) ||
  45.         enabledList.urls.includes(currentPageUrl);
  46.     let updateSidebarHighlights = null;
  47.  
  48.     GM_addStyle(`
  49.         /* 高亮菜单样式 */
  50.         .${STYLE_PREFIX}highlight-menu {
  51.             position: absolute;
  52.             background: #333336;
  53.             border: none;
  54.             border-radius: 24px;
  55.             box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  56.             padding: 10px 8px;
  57.             z-index: 9999;
  58.             display: flex;
  59.             flex-direction: row;
  60.             align-items: center;
  61.             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  62.             color: #fff;
  63.             opacity: 0; /* 初始隐藏 */
  64.             transition: opacity 0.2s ease-in;
  65.             pointer-events: none; /* 隐藏时不响应事件 */
  66.         }
  67.         .${STYLE_PREFIX}highlight-menu.${STYLE_PREFIX}show {
  68.             opacity: 1;
  69.             pointer-events: auto; /* 显示时响应事件 */
  70.         }
  71.  
  72.         /* 菜单箭头样式 */
  73.         .${STYLE_PREFIX}highlight-menu::after {
  74.             content: '';
  75.             position: absolute;
  76.             bottom: -6px;
  77.             left: var(--arrow-left, 50%);
  78.             width: 12px;
  79.             height: 6px;
  80.             background-color: #333336;
  81.             clip-path: polygon(0 0, 100% 0, 50% 100%);
  82.             margin-left: -6px;
  83.         }
  84.         .${STYLE_PREFIX}highlight-menu.${STYLE_PREFIX}arrow-top::after {
  85.             top: -6px;
  86.             bottom: auto;
  87.             clip-path: polygon(0 100%, 100% 100%, 50% 0);
  88.         }
  89.  
  90.         /* 颜色选择区域 */
  91.         .${STYLE_PREFIX}highlight-menu-colors {
  92.             display: flex;
  93.             flex-direction: row;
  94.             align-items: center;
  95.             margin: 0 2px;
  96.             flex-wrap: nowrap;
  97.             flex: 0 0 auto;
  98.         }
  99.  
  100.         /* 颜色选择按钮 */
  101.         .${STYLE_PREFIX}highlight-menu-color {
  102.             width: 22px;
  103.             height: 22px;
  104.             border-radius: 50%;
  105.             margin: 0 3px;
  106.             cursor: pointer;
  107.             position: relative;
  108.             display: flex;
  109.             align-items: center;
  110.             justify-content: center;
  111.             transition: transform 0.15s ease;
  112.             box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  113.             flex-shrink: 0;
  114.         }
  115.         .${STYLE_PREFIX}highlight-menu-color:hover {
  116.             transform: scale(1.12);
  117.         }
  118.         .${STYLE_PREFIX}highlight-menu-color.${STYLE_PREFIX}active::after {
  119.             content: "";
  120.             width: 12px;
  121.             height: 12px;
  122.             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333336' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  123.             background-repeat: no-repeat;
  124.             background-position: center;
  125.             background-size: contain;
  126.         }
  127.  
  128.         /* 菜单按钮通用样式 */
  129.         .${STYLE_PREFIX}highlight-menu-action {
  130.             height: 22px;
  131.             margin: 0 2px;
  132.             cursor: pointer;
  133.             padding: 0 10px;
  134.             border-radius: 12px;
  135.             color: #fff;
  136.             font-size: 13px;
  137.             background: rgba(255,255,255,0.1);
  138.             border: none;
  139.             transition: all 0.15s ease;
  140.             white-space: nowrap;
  141.             display: flex;
  142.             align-items: center;
  143.             justify-content: center;
  144.             flex-shrink: 0;
  145.         }
  146.         .${STYLE_PREFIX}highlight-menu-action:hover {
  147.             background: rgba(255,255,255,0.2);
  148.         }
  149.  
  150.         /* 删除按钮样式 */
  151.         .${STYLE_PREFIX}highlight-action-delete {
  152.             color: #f0f0f0;
  153.             font-weight: 500;
  154.             position: relative;
  155.             overflow: hidden;
  156.             transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  157.             margin-left: 3px;
  158.         }
  159.         .${STYLE_PREFIX}highlight-action-delete:hover {
  160.             background: rgba(255,82,82,0.12);
  161.             color: #ff6b6b;
  162.             transform: translateY(-1px);
  163.             box-shadow: 0 2px 8px rgba(255,82,82,0.25);
  164.         }
  165.         .${STYLE_PREFIX}highlight-action-delete:active {
  166.             transform: translateY(0px);
  167.             background: rgba(255,82,82,0.2);
  168.         }
  169.  
  170.         /* 闪烁效果用于高亮跳转 */
  171.         @keyframes ${STYLE_PREFIX}highlightFlash {
  172.             0%, 100% { opacity: 1; }
  173.             50% { opacity: 0.3; }
  174.         }
  175.         .${STYLE_PREFIX}highlight-flash {
  176.             animation: ${STYLE_PREFIX}highlightFlash 0.5s ease 4;
  177.             box-shadow: 0 0 0 3px rgba(255, 255, 0, 0.7) !important;
  178.             position: relative;
  179.             z-index: 10;
  180.         }
  181.  
  182.         /* 浮动按钮样式 */
  183.         #${STYLE_PREFIX}floating-button {
  184.             position: fixed;
  185.             bottom: 20px;
  186.             right: 20px;
  187.             z-index: 10000;
  188.             width: 38px;
  189.             height: 38px;
  190.             border: none;
  191.             border-radius: 6px;
  192.             cursor: pointer;
  193.             background-color: #262A33;
  194.             color: #E8E9EB;
  195.             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  196.             transition: all 0.2s ease;
  197.             display: flex;
  198.             align-items: center;
  199.             justify-content: center;
  200.         }
  201.         #${STYLE_PREFIX}floating-button:hover {
  202.             background-color: #3BA5D8;
  203.             box-shadow: 0 4px 12px rgba(59, 165, 216, 0.25);
  204.         }
  205.         #${STYLE_PREFIX}floating-button:active {
  206.             transform: translateY(0px);
  207.         }
  208.         
  209.         /* 侧边栏样式 */
  210.         #${STYLE_PREFIX}sidebar {
  211.             position: fixed;
  212.             top: 0;
  213.             right: -280px;
  214.             width: 280px;
  215.             height: 100%;
  216.             background: linear-gradient(135deg, #262A33 0%, #1A1D24 100%);
  217.             box-shadow: -1px 0 5px rgba(0, 0, 0, 0.15);
  218.             transition: right 0.3s ease;
  219.             z-index: 9999;
  220.             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  221.         }
  222.     `);
  223.  
  224.     // 保存启用列表
  225.     function saveEnabledList() {
  226.         GM_setValue('enabled_list', enabledList);
  227.         // 刷新当前状态
  228.         isHighlightEnabled = enabledList.domains.includes(currentDomain) ||
  229.             enabledList.urls.includes(currentPageUrl);
  230.  
  231.         // 更新浮动按钮显示状态
  232.         const floatingButton = document.getElementById(`${STYLE_PREFIX}floating-button`);
  233.         if (floatingButton) {
  234.             floatingButton.style.display = (settings.showFloatingButton && isHighlightEnabled) ? 'flex' : 'none';
  235.         }
  236.     }
  237.  
  238.     // 启用域名
  239.     function enableDomain(domain) {
  240.         if (!enabledList.domains.includes(domain)) {
  241.             enabledList.domains.push(domain);
  242.             saveEnabledList();
  243.         }
  244.     }
  245.  
  246.     // 启用域名
  247.     function disableDomain(domain) {
  248.         enabledList.domains = enabledList.domains.filter(d => d !== domain);
  249.         saveEnabledList();
  250.     }
  251.  
  252.     // 启用URL
  253.     function enableUrl(url) {
  254.         if (!enabledList.urls.includes(url)) {
  255.             enabledList.urls.push(url);
  256.             saveEnabledList();
  257.         }
  258.     }
  259.  
  260.     // 启用URL
  261.     function disableUrl(url) {
  262.         enabledList.urls = enabledList.urls.filter(u => u !== url);
  263.         saveEnabledList();
  264.     }
  265.  
  266.     // 加载当前页面的高亮
  267.     function loadHighlights() {
  268.         const allHighlights = GM_getValue('highlights', {});
  269.         highlights = allHighlights[currentPageUrl] || [];
  270.         return highlights;
  271.     }
  272.  
  273.     // 保存高亮到存储
  274.     function saveHighlights() {
  275.         const allHighlights = GM_getValue('highlights', {});
  276.         allHighlights[currentPageUrl] = highlights;
  277.         GM_setValue('highlights', allHighlights);
  278.     }
  279.  
  280.     // 保存设置
  281.     function saveSettings() {
  282.         GM_setValue('highlight_settings', settings);
  283.     }
  284.  
  285.     // 移除高亮菜单
  286.     function removeHighlightMenu() {
  287.         if (window.currentMenuCloseHandler) {
  288.             document.removeEventListener('click', window.currentMenuCloseHandler);
  289.             window.currentMenuCloseHandler = null;
  290.         }
  291.         const existingMenus = document.querySelectorAll(`.${STYLE_PREFIX}highlight-menu`);
  292.         if (existingMenus.length) {
  293.             existingMenus.forEach(menu => {
  294.                 menu.classList.remove(`${STYLE_PREFIX}show`);
  295.                 setTimeout(() => {
  296.                     if (menu && menu.parentNode) {
  297.                         menu.parentNode.removeChild(menu);
  298.                     }
  299.                 }, 200);
  300.             });
  301.         }
  302.         clearTimeout(menuDisplayTimer);
  303.         ignoreNextClick = false;
  304.         menuOperationInProgress = false;
  305.     }
  306.  
  307.     // 高亮选中文本
  308.     function highlightSelection(color) {
  309.         if (!isHighlightEnabled) {
  310.             return null;
  311.         }
  312.         const selection = window.getSelection();
  313.         if (!selection.rangeCount) return null;
  314.         const range = selection.getRangeAt(0);
  315.         const selectedText = selection.toString().trim();
  316.         if (!selectedText || selectedText.length < settings.minTextLength) {
  317.             return null;
  318.         }
  319.         const highlightId = 'highlight-' + Date.now() + '-' + Math.floor(Math.random() * 10000);
  320.         const highlightElement = document.createElement('span');
  321.         highlightElement.className = `${STYLE_PREFIX}highlight-marked`;
  322.         highlightElement.dataset.highlightId = highlightId;
  323.         highlightElement.style.backgroundColor = color;
  324.  
  325.         // ★ 先从未修改前的文本中提取上下文
  326.         let prefix = '', suffix = '';
  327.         if (range.startContainer.nodeType === Node.TEXT_NODE) {
  328.             const originalText = range.startContainer.textContent;
  329.             const startOffset = range.startOffset;
  330.             const endOffset = startOffset + selectedText.length;
  331.             prefix = extractValidContext(originalText, startOffset, 20, "backward");
  332.             suffix = extractValidContext(originalText, endOffset, 20, "forward");
  333.         }
  334.  
  335.         try {
  336.             // 再进行DOM操作前，提取上下文后才调用 extractContents
  337.             const fragment = range.extractContents();
  338.             highlightElement.appendChild(fragment);
  339.             range.insertNode(highlightElement);
  340.  
  341.             const highlight = {
  342.                 id: highlightId,
  343.                 text: selectedText,
  344.                 color: color,
  345.                 timestamp: Date.now(),
  346.                 url: currentPageUrl,
  347.                 prefix: prefix,    // 前置上下文
  348.                 suffix: suffix     // 后置上下文
  349.             };
  350.  
  351.             highlights.push(highlight);
  352.             saveHighlights();
  353.  
  354.             highlightElement.addEventListener('click', (e) => {
  355.                 e.preventDefault();
  356.                 e.stopPropagation();
  357.                 removeHighlightMenu();
  358.                 setTimeout(() => {
  359.                     showHighlightEditMenu(e, highlightId);
  360.                 }, 10);
  361.             });
  362.  
  363.             // 检查侧边栏是否打开，如果打开则刷新高亮列表
  364.             const sidebar = document.getElementById(`${STYLE_PREFIX}sidebar`);
  365.             if (sidebar && sidebar.style.right === '0px' && updateSidebarHighlights) {
  366.                 updateSidebarHighlights();
  367.             }
  368.  
  369.             selection.removeAllRanges();
  370.             return highlightId;
  371.         } catch (e) {
  372.             console.warn('高亮失败:', e);
  373.             try {
  374.                 findAndHighlight(selectedText, color, highlightId);
  375.  
  376.                 // 检查侧边栏是否打开，如果打开则刷新高亮列表
  377.                 const sidebar = document.getElementById(`${STYLE_PREFIX}sidebar`);
  378.                 if (sidebar && sidebar.style.right === '0px' && updateSidebarHighlights) {
  379.                     updateSidebarHighlights();
  380.                 }
  381.  
  382.                 return highlightId;
  383.             } catch (error) {
  384.                 console.error('替代高亮方法也失败:', error);
  385.                 return null;
  386.             }
  387.         }
  388.     }
  389.  
  390.     // 根据ID删除高亮
  391.     function removeHighlightById(highlightId) {
  392.         const highlightElement = document.querySelector(`.${STYLE_PREFIX}highlight-marked[data-highlight-id="${highlightId}"]`);
  393.         if (highlightElement) {
  394.             const textNode = document.createTextNode(highlightElement.textContent);
  395.             highlightElement.parentNode.replaceChild(textNode, highlightElement);
  396.         }
  397.         highlights = highlights.filter(h => h.id !== highlightId);
  398.         saveHighlights();
  399.  
  400.         // 检查侧边栏是否打开，如果打开则刷新高亮列表
  401.         const sidebar = document.getElementById(`${STYLE_PREFIX}sidebar`);
  402.         if (sidebar && sidebar.style.right === '0px' && updateSidebarHighlights) {
  403.             updateSidebarHighlights();
  404.         }
  405.     }
  406.  
  407.     // 使用 MutationObserver 监听 DOM 变化，动态恢复高亮
  408.     function observeDomChanges() {
  409.         let debounceTimer;  // 新增变量用于防抖
  410.         const observer = new MutationObserver((mutations) => {
  411.             clearTimeout(debounceTimer);
  412.             debounceTimer = setTimeout(() => {
  413.                 applyHighlights();
  414.             }, 300);
  415.         });
  416.         observer.observe(document.body, {
  417.             childList: true,
  418.             subtree: true,
  419.             characterData: true
  420.         });
  421.     }
  422.  
  423.     // 更改高亮颜色
  424.     function changeHighlightColor(highlightId, newColor) {
  425.         const highlightElement = document.querySelector(`.${STYLE_PREFIX}highlight-marked[data-highlight-id="${highlightId}"]`);
  426.         if (highlightElement) {
  427.             highlightElement.style.backgroundColor = newColor;
  428.         }
  429.         const index = highlights.findIndex(h => h.id === highlightId);
  430.         if (index !== -1) {
  431.             highlights[index].color = newColor;
  432.             saveHighlights();
  433.         }
  434.  
  435.         // 检查侧边栏是否打开，如果打开则刷新高亮列表
  436.         const sidebar = document.getElementById(`${STYLE_PREFIX}sidebar`);
  437.         if (sidebar && sidebar.style.right === '0px' && updateSidebarHighlights) {
  438.             updateSidebarHighlights();
  439.         }
  440.     }
  441.  
  442.     // 显示/隐藏侧边栏
  443.     function toggleSidebar(forceShow = true) {
  444.         const sidebar = document.getElementById(`${STYLE_PREFIX}sidebar`);
  445.         const floatingButton = document.getElementById(`${STYLE_PREFIX}floating-button`);
  446.         if (!sidebar) return;
  447.  
  448.         if (forceShow) {
  449.             sidebar.style.right = '0px';
  450.             // 显示侧边栏时隐藏浮动按钮
  451.             if (floatingButton) {
  452.                 floatingButton.style.display = 'none';
  453.             }
  454.             if (updateSidebarHighlights) {
  455.                 updateSidebarHighlights();
  456.             }
  457.         } else {
  458.             const width = sidebar.style.width || '300px';
  459.             const wasVisible = sidebar.style.right === '0px';
  460.             sidebar.style.right = wasVisible ? `-${width}` : '0px';
  461.  
  462.             // 更新浮动按钮显示状态
  463.             if (floatingButton) {
  464.                 if (wasVisible) {
  465.                     // 关闭侧边栏时，根据设置和启用状态决定是否显示浮动按钮
  466.                     floatingButton.style.display = (settings.showFloatingButton && isHighlightEnabled) ? 'flex' : 'none';
  467.                 } else {
  468.                     // 打开侧边栏时，隐藏浮动按钮
  469.                     floatingButton.style.display = 'none';
  470.                 }
  471.             }
  472.  
  473.             if (sidebar.style.right === '0px' && updateSidebarHighlights) {
  474.                 updateSidebarHighlights();
  475.             }
  476.         }
  477.     }
  478.  
  479.     // 切换浮动按钮显示/隐藏
  480.     function toggleFloatingButton() {
  481.         const floatingButton = document.getElementById(`${STYLE_PREFIX}floating-button`);
  482.         if (!floatingButton) return;
  483.  
  484.         settings.showFloatingButton = !settings.showFloatingButton;
  485.         // 即使设置为显示，在启用页面也不显示按钮
  486.         floatingButton.style.display = (settings.showFloatingButton && isHighlightEnabled) ? 'flex' : 'none'; saveSettings();
  487.     }
  488.  
  489.     // 显示高亮编辑菜单
  490.     function showHighlightEditMenu(event, highlightId) {
  491.         if (!isHighlightEnabled) {
  492.             return;
  493.         }
  494.         removeHighlightMenu();
  495.         if (menuOperationInProgress) return;
  496.         menuOperationInProgress = true;
  497.         event.preventDefault();
  498.         event.stopPropagation();
  499.         ignoreNextClick = true;
  500.         const highlight = highlights.find(h => h.id === highlightId);
  501.         if (!highlight) {
  502.             menuOperationInProgress = false;
  503.             return;
  504.         }
  505.         const menu = createHighlightMenu(false);
  506.         menu.dataset.currentHighlightId = highlightId;
  507.         menu.querySelectorAll(`.${STYLE_PREFIX}highlight-menu-color`).forEach(colorBtn => {
  508.             colorBtn.classList.remove(`${STYLE_PREFIX}active`);
  509.         });
  510.         const activeColorButton = menu.querySelector(`.${STYLE_PREFIX}highlight-menu-color[data-color="${highlight.color}"]`);
  511.         if (activeColorButton) {
  512.             activeColorButton.classList.add(`${STYLE_PREFIX}active`);
  513.         }
  514.         const menuHeight = 50;
  515.         let menuTop = event.clientY + window.scrollY - menuHeight - 10;
  516.         let showAbove = true;
  517.         if (event.clientY < menuHeight + 10) {
  518.             menuTop = event.clientY + window.scrollY + 10;
  519.             showAbove = false;
  520.         }
  521.         menu.style.top = `${menuTop}px`;
  522.         const menuWidth = menu.offsetWidth || 200;
  523.         let menuLeft;
  524.         if (event.clientX - (menuWidth / 2) < 5) {
  525.             menuLeft = 5;
  526.         } else if (event.clientX + (menuWidth / 2) > window.innerWidth - 5) {
  527.             menuLeft = window.innerWidth - menuWidth - 5;
  528.         } else {
  529.             menuLeft = event.clientX - (menuWidth / 2);
  530.         }
  531.         menu.style.left = `${menuLeft}px`;
  532.         const arrowLeft = event.clientX - menuLeft;
  533.         const minArrowLeft = 12;
  534.         const maxArrowLeft = menuWidth - 12;
  535.         const safeArrowLeft = Math.max(minArrowLeft, Math.min(arrowLeft, maxArrowLeft));
  536.         menu.style.setProperty('--arrow-left', `${safeArrowLeft}px`);
  537.         if (!showAbove) {
  538.             menu.classList.add(`${STYLE_PREFIX}arrow-top`);
  539.         } else {
  540.             menu.classList.remove(`${STYLE_PREFIX}arrow-top`);
  541.         }
  542.         requestAnimationFrame(() => {
  543.             menu.classList.add(`${STYLE_PREFIX}show`);
  544.             // 使用 once:true 来自动清理事件监听
  545.             document.addEventListener('click', function closeMenu(e) {
  546.                 if (ignoreNextClick) {
  547.                     ignoreNextClick = false;
  548.                     return;
  549.                 }
  550.                 if (!menu.contains(e.target)) {
  551.                     removeHighlightMenu();
  552.                 }
  553.             }, { once: true });
  554.             setTimeout(() => {
  555.                 ignoreNextClick = false;
  556.                 menuOperationInProgress = false;
  557.             }, 50);
  558.         });
  559.     }
  560.  
  561.     // 查找并高亮文本
  562.     function findAndHighlight(searchText, color, highlightId) {
  563.         // 遍历所有文本节点查找匹配内容
  564.         const treeWalker = document.createTreeWalker(
  565.             document.body,
  566.             NodeFilter.SHOW_TEXT,
  567.             null
  568.         );
  569.         while (treeWalker.nextNode()) {
  570.             const node = treeWalker.currentNode;
  571.             const textContent = node.textContent;
  572.             if (!textContent || textContent.trim().length === 0) continue;
  573.             const idx = textContent.indexOf(searchText);
  574.             if (idx !== -1) {
  575.                 const range = document.createRange();
  576.                 range.setStart(node, idx);
  577.                 range.setEnd(node, idx + searchText.length);
  578.                 const highlightElement = document.createElement('span');
  579.                 highlightElement.className = `${STYLE_PREFIX}highlight-marked`;
  580.                 highlightElement.dataset.highlightId = highlightId;
  581.                 highlightElement.style.backgroundColor = color;
  582.                 try {
  583.                     const fragment = range.extractContents();
  584.                     highlightElement.appendChild(fragment);
  585.                     range.insertNode(highlightElement);
  586.                     highlightElement.addEventListener('click', (e) => {
  587.                         e.preventDefault();
  588.                         e.stopPropagation();
  589.                         showHighlightEditMenu(e, highlightId);
  590.                     });
  591.                     // 新高亮直接返回 true
  592.                     return true;
  593.                 } catch (e) {
  594.                     console.warn('应用高亮失败:', e);
  595.                 }
  596.             }
  597.         }
  598.         return false;
  599.     }
  600.  
  601.     // 应用页面上的所有高亮
  602.     function applyHighlights() {
  603.         // 按 timestamp 降序排序（从后向前恢复）
  604.         highlights.sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
  605.         highlights.forEach(highlight => {
  606.             const restored = advancedRestoreHighlight(highlight);
  607.             if (!restored) {
  608.                 console.warn('多步恢复失败:', highlight.id);
  609.             }
  610.         });
  611.     }
  612.  
  613.     // 创建高亮菜单
  614.     function createHighlightMenu(isNewHighlight = true) {
  615.         removeHighlightMenu();
  616.         ignoreNextClick = true;
  617.         const menu = document.createElement('div');
  618.         menu.className = `${STYLE_PREFIX}highlight-menu`;
  619.         menu.innerHTML = `
  620.         <div class="${STYLE_PREFIX}highlight-menu-colors">
  621.             ${settings.colors.map(color => `
  622.                 <div class="${STYLE_PREFIX}highlight-menu-color"
  623.                     style="background-color: ${color};"
  624.                     data-color="${color}">
  625.                 </div>
  626.             `).join('')}
  627.         </div>
  628.     `;
  629.         // 无论如何先置空操作ID
  630.         menu.dataset.currentHighlightId = '';
  631.         document.body.appendChild(menu);
  632.  
  633.         // 如果是新建高亮，确保所有颜色块没有激活状态
  634.         if (isNewHighlight) {
  635.             menu.querySelectorAll(`.${STYLE_PREFIX}highlight-menu-color`).forEach(el => {
  636.                 el.classList.remove(`${STYLE_PREFIX}active`);
  637.             });
  638.         }
  639.  
  640.         menu.querySelectorAll(`.${STYLE_PREFIX}highlight-menu-color`).forEach(el => {
  641.             el.addEventListener('click', (e) => {
  642.                 const color = el.dataset.color;
  643.                 const isActive = el.classList.contains(`${STYLE_PREFIX}active`);
  644.                 const currentHighlightId = menu.dataset.currentHighlightId;
  645.                 if (isActive) {
  646.                     if (currentHighlightId) {
  647.                         removeHighlightById(currentHighlightId);
  648.                         menu.dataset.currentHighlightId = '';
  649.                         menu.querySelectorAll(`.${STYLE_PREFIX}highlight-menu-color`)
  650.                             .forEach(colorEl => colorEl.classList.remove(`${STYLE_PREFIX}active`));
  651.                         const sel = window.getSelection();
  652.                         sel.removeAllRanges();
  653.                         if (savedRange) {
  654.                             sel.addRange(savedRange.cloneRange());
  655.                         }
  656.                     } else {
  657.                         window.getSelection().removeAllRanges();
  658.                         menu.querySelectorAll(`.${STYLE_PREFIX}highlight-menu-color`)
  659.                             .forEach(colorEl => colorEl.classList.remove(`${STYLE_PREFIX}active`));
  660.                     }
  661.                     removeHighlightMenu();
  662.                 } else {
  663.                     settings.activeColor = color;
  664.                     saveSettings();
  665.                     if (currentHighlightId) {
  666.                         changeHighlightColor(currentHighlightId, color);
  667.                     } else {
  668.                         const selection = window.getSelection();
  669.                         if (selection.toString().trim() === '' && savedRange) {
  670.                             selection.removeAllRanges();
  671.                             selection.addRange(savedRange.cloneRange());
  672.                         }
  673.                         const newHighlightId = highlightSelection(color);
  674.                         if (newHighlightId) {
  675.                             menu.dataset.currentHighlightId = newHighlightId;
  676.                         }
  677.                     }
  678.                     menu.querySelectorAll(`.${STYLE_PREFIX}highlight-menu-color`)
  679.                         .forEach(colorEl => colorEl.classList.toggle(`${STYLE_PREFIX}active`, colorEl.dataset.color === color));
  680.                 }
  681.                 e.stopPropagation();
  682.             });
  683.         });
  684.         return menu;
  685.     }
  686.  
  687.     // 显示高亮菜单
  688.     function showHighlightMenu() {
  689.         if (!isHighlightEnabled) {
  690.             return;
  691.         }
  692.         if (menuOperationInProgress) return;
  693.         menuOperationInProgress = true;
  694.         const selection = window.getSelection();
  695.         const selectedText = selection.toString().trim();
  696.         if (selectedText === '') {
  697.             menuOperationInProgress = false;
  698.             return;
  699.         }
  700.         const menu = createHighlightMenu(true);
  701.         const range = selection.getRangeAt(0);
  702.         const rects = range.getClientRects();
  703.         if (rects.length === 0) {
  704.             menuOperationInProgress = false;
  705.             return;
  706.         }
  707.         const targetRect = rects[0];
  708.         const menuHeight = 50;
  709.         let initialTop = window.scrollY + targetRect.top - menuHeight - 8;
  710.         let showAbove = true;
  711.         if (targetRect.top < menuHeight + 10) {
  712.             initialTop = window.scrollY + targetRect.bottom + 8;
  713.             showAbove = false;
  714.         }
  715.         menu.style.top = `${initialTop}px`;
  716.         setTimeout(() => {
  717.             const menuWidth = menu.offsetWidth;
  718.             const textCenterX = targetRect.left + (targetRect.width / 2);
  719.             let menuLeft;
  720.             if (textCenterX - (menuWidth / 2) < 5) {
  721.                 menuLeft = 5;
  722.             } else if (textCenterX + (menuWidth / 2) > window.innerWidth - 5) {
  723.                 menuLeft = window.innerWidth - menuWidth - 5;
  724.             } else {
  725.                 menuLeft = textCenterX - (menuWidth / 2);
  726.             }
  727.             menu.style.left = `${menuLeft}px`;
  728.             menu.style.transform = 'none';
  729.             const arrowLeft = textCenterX - menuLeft;
  730.             const minArrowLeft = 12;
  731.             const maxArrowLeft = menuWidth - 12;
  732.             const safeArrowLeft = Math.max(minArrowLeft, Math.min(arrowLeft, maxArrowLeft));
  733.             menu.style.setProperty('--arrow-left', `${safeArrowLeft}px`);
  734.             if (!showAbove) {
  735.                 menu.classList.add(`${STYLE_PREFIX}arrow-top`);
  736.             } else {
  737.                 menu.classList.remove(`${STYLE_PREFIX}arrow-top`);
  738.             }
  739.             requestAnimationFrame(() => {
  740.                 menu.classList.add(`${STYLE_PREFIX}show`);
  741.             });
  742.         }, 0);
  743.         document.addEventListener('click', function closeMenu(e) {
  744.             if (ignoreNextClick) {
  745.                 ignoreNextClick = false;
  746.                 return;
  747.             }
  748.             if (!menu.contains(e.target)) {
  749.                 removeHighlightMenu();
  750.             }
  751.         }, { once: true });
  752.         setTimeout(() => {
  753.             ignoreNextClick = false;
  754.             menuOperationInProgress = false;
  755.         }, 100);
  756.     }
  757.  
  758.     // 注册(不可用)事件
  759.     function registerEvents() {
  760.         document.addEventListener('mouseup', function (e) {
  761.             if (!isHighlightEnabled) {
  762.                 return;
  763.             }
  764.             if (e.target.closest(`.${STYLE_PREFIX}highlight-menu`)) {
  765.                 return;
  766.             }
  767.             const selection = window.getSelection();
  768.             const selectedText = selection.toString().trim();
  769.             if (selectedText.length < (settings.minTextLength || 1)) {
  770.                 return;
  771.             }
  772.             if (selection.rangeCount > 0) {
  773.                 savedRange = selection.getRangeAt(0).cloneRange();
  774.             }
  775.             removeHighlightMenu();
  776.             clearTimeout(menuDisplayTimer);
  777.             ignoreNextClick = true;
  778.             menuDisplayTimer = setTimeout(() => {
  779.                 showHighlightMenu();
  780.             }, 10);
  781.         });
  782.     }
  783.  
  784.     function fuzzyContextMatch(highlight) {
  785.         // 如果未启用模糊匹配，则直接返回 false
  786.         if (!settings.enableFuzzyMatch) return false;
  787.  
  788.         if (!highlight.text) return false;
  789.         const textNodes = document.createTreeWalker(
  790.             document.body,
  791.             NodeFilter.SHOW_TEXT,
  792.             null
  793.         );
  794.         const pattern = highlight.text.trim();
  795.  
  796.         // 预处理前缀和后缀
  797.         const storedPrefix = highlight.prefix ? highlight.prefix.trim() : '';
  798.         const storedSuffix = highlight.suffix ? highlight.suffix.trim() : '';
  799.  
  800.         // 存储所有匹配项及其上下文评分
  801.         const matches = [];
  802.  
  803.         // 记录匹配的总数，以便特殊处理单一匹配的情况
  804.         let matchCount = 0;
  805.  
  806.         while (textNodes.nextNode()) {
  807.             const node = textNodes.currentNode;
  808.             const textContent = node.textContent;
  809.             if (!textContent || textContent.trim().length === 0) continue;
  810.  
  811.             // 查找所有可能的匹配位置
  812.             let startIdx = 0;
  813.             while (startIdx < textContent.length) {
  814.                 const idx = textContent.indexOf(pattern, startIdx);
  815.                 if (idx === -1) break;
  816.  
  817.                 matchCount++;
  818.  
  819.                 // 获取上下文
  820.                 const actualPrefix = textContent.substring(Math.max(0, idx - 40), idx).trim();
  821.                 const actualSuffix = textContent.substring(idx + pattern.length,
  822.                     idx + pattern.length + 40).trim();
  823.  
  824.                 // 计算上下文匹配分数
  825.                 let score = 0;
  826.  
  827.                 // 前缀匹配分数计算 (更宽松版)
  828.                 if (storedPrefix && actualPrefix) {
  829.                     if (actualPrefix.includes(storedPrefix)) {
  830.                         score += 10; // 前缀完全包含加10分
  831.                     } else {
  832.                         // 尝试寻找部分匹配
  833.                         for (let i = 1; i <= Math.min(storedPrefix.length, 12); i++) {
  834.                             const prefixEnd = storedPrefix.slice(-i);
  835.                             if (actualPrefix.endsWith(prefixEnd)) {
  836.                                 score += i / 2; // 匹配前缀尾部，加分
  837.                                 break;
  838.                             }
  839.                         }
  840.  
  841.                         // 尝试在前缀中查找关键片段
  842.                         if (storedPrefix.length > 6) {
  843.                             for (let i = 0; i < storedPrefix.length - 5; i++) {
  844.                                 const fragment = storedPrefix.substring(i, i + 5);
  845.                                 if (actualPrefix.includes(fragment)) {
  846.                                     score += 2.5; // 找到显著片段加2.5分
  847.                                     break;
  848.                                 }
  849.                             }
  850.                         }
  851.                     }
  852.                 }
  853.  
  854.                 // 后缀匹配分数计算 (更宽松版)
  855.                 if (storedSuffix && actualSuffix) {
  856.                     if (actualSuffix.includes(storedSuffix)) {
  857.                         score += 10; // 后缀完全包含加10分
  858.                     } else {
  859.                         // 尝试寻找部分匹配
  860.                         for (let i = 1; i <= Math.min(storedSuffix.length, 12); i++) {
  861.                             const suffixStart = storedSuffix.slice(0, i);
  862.                             if (actualSuffix.startsWith(suffixStart)) {
  863.                                 score += i / 2; // 匹配后缀头部，加分
  864.                                 break;
  865.                             }
  866.                         }
  867.  
  868.                         // 尝试在后缀中查找关键片段
  869.                         if (storedSuffix.length > 6) {
  870.                             for (let i = 0; i < storedSuffix.length - 5; i++) {
  871.                                 const fragment = storedSuffix.substring(i, i + 5);
  872.                                 if (actualSuffix.includes(fragment)) {
  873.                                     score += 2.5; // 找到显著片段加2.5分
  874.                                     break;
  875.                                 }
  876.                             }
  877.                         }
  878.                     }
  879.                 }
  880.  
  881.                 // 如果是单个字符的高亮，给予额外分数，避免完全相同的短文本被错过
  882.                 if (pattern.length <= 3 && (actualPrefix.includes(storedPrefix) || actualSuffix.includes(storedSuffix))) {
  883.                     score += 5;
  884.                 }
  885.  
  886.                 // 记录匹配项
  887.                 matches.push({
  888.                     node,
  889.                     idx,
  890.                     score,
  891.                     actualPrefix,
  892.                     actualSuffix
  893.                 });
  894.  
  895.                 startIdx = idx + 1; // 继续搜索下一个匹配
  896.             }
  897.         }
  898.  
  899.         // 特殊情况：如果页面上只有一个匹配，直接使用它
  900.         if (matchCount === 1 && matches.length === 1) {
  901.             const match = matches[0];
  902.             try {
  903.                 const range = document.createRange();
  904.                 range.setStart(match.node, match.idx);
  905.                 range.setEnd(match.node, match.idx + pattern.length);
  906.  
  907.                 const highlightElement = document.createElement('span');
  908.                 highlightElement.className = `${STYLE_PREFIX}highlight-marked`;
  909.                 highlightElement.dataset.highlightId = highlight.id;
  910.                 highlightElement.style.backgroundColor = highlight.color;
  911.  
  912.                 const fragment = range.extractContents();
  913.                 highlightElement.appendChild(fragment);
  914.                 range.insertNode(highlightElement);
  915.  
  916.                 highlightElement.addEventListener('click', (e) => {
  917.                     e.preventDefault();
  918.                     e.stopPropagation();
  919.                     showHighlightEditMenu(e, highlight.id);
  920.                 });
  921.  
  922.                 return true;
  923.             } catch (e) {
  924.                 console.warn('唯一模糊匹配高亮失败:', e);
  925.             }
  926.         }
  927.  
  928.         // 如果有多个匹配项，选择分数最高的
  929.         if (matches.length > 0) {
  930.             // 按分数降序排序
  931.             matches.sort((a, b) => b.score - a.score);
  932.             const bestMatch = matches[0];
  933.  
  934.             // 降低得分阈值到2，使更多匹配可以被接受
  935.             const threshold = matchCount > 1 ? 2 : 0.5;
  936.  
  937.             if (bestMatch.score >= threshold) {
  938.                 // 构造高亮
  939.                 try {
  940.                     const range = document.createRange();
  941.                     range.setStart(bestMatch.node, bestMatch.idx);
  942.                     range.setEnd(bestMatch.node, bestMatch.idx + pattern.length);
  943.  
  944.                     const highlightElement = document.createElement('span');
  945.                     highlightElement.className = `${STYLE_PREFIX}highlight-marked`;
  946.                     highlightElement.dataset.highlightId = highlight.id;
  947.                     highlightElement.style.backgroundColor = highlight.color;
  948.  
  949.                     const fragment = range.extractContents();
  950.                     highlightElement.appendChild(fragment);
  951.                     range.insertNode(highlightElement);
  952.  
  953.                     highlightElement.addEventListener('click', (e) => {
  954.                         e.preventDefault();
  955.                         e.stopPropagation();
  956.                         showHighlightEditMenu(e, highlight.id);
  957.                     });
  958.  
  959.                     return true;
  960.                 } catch (e) {
  961.                     console.warn('模糊匹配插入高亮失败:', e);
  962.                 }
  963.             } else {
  964.                 console.log('模糊匹配分数过低，尝试进一步降低要求:', {
  965.                     text: pattern,
  966.                     bestScore: bestMatch.score
  967.                 });
  968.  
  969.                 // 如果分数太低但至少有一个匹配，可以考虑用最后的回退机制
  970.                 if (matches.length > 0 && pattern.length <= 5) {
  971.                     // 对于短文本，如果我们有任何匹配并且上下文也有一些匹配，就使用它
  972.                     const bestMatch = matches[0];
  973.                     try {
  974.                         const range = document.createRange();
  975.                         range.setStart(bestMatch.node, bestMatch.idx);
  976.                         range.setEnd(bestMatch.node, bestMatch.idx + pattern.length);
  977.  
  978.                         const highlightElement = document.createElement('span');
  979.                         highlightElement.className = `${STYLE_PREFIX}highlight-marked`;
  980.                         highlightElement.dataset.highlightId = highlight.id;
  981.                         highlightElement.style.backgroundColor = highlight.color;
  982.  
  983.                         console.log('使用回退机制恢复短文本高亮:', pattern);
  984.  
  985.                         const fragment = range.extractContents();
  986.                         highlightElement.appendChild(fragment);
  987.                         range.insertNode(highlightElement);
  988.  
  989.                         highlightElement.addEventListener('click', (e) => {
  990.                             e.preventDefault();
  991.                             e.stopPropagation();
  992.                             showHighlightEditMenu(e, highlight.id);
  993.                         });
  994.  
  995.                         return true;
  996.                     } catch (e) {
  997.                         console.warn('回退机制高亮失败:', e);
  998.                     }
  999.                 }
  1000.             }
  1001.         }
  1002.  
  1003.         return false;
  1004.     }
  1005.  
  1006.     function advancedRestoreHighlight(highlight) {
  1007.         // 检查是否已经有相同ID的高亮存在
  1008.         const existingHighlight = document.querySelector(`.${STYLE_PREFIX}highlight-marked[data-highlight-id="${highlight.id}"]`);
  1009.         if (existingHighlight) {
  1010.             // 高亮已存在，不需要重复恢复
  1011.             return true;
  1012.         }
  1013.  
  1014.         // 使用文本上下文匹配恢复高亮
  1015.         const contextRestored = restoreHighlightUsingContext(highlight);
  1016.         if (contextRestored) {
  1017.             // 只保存最新一次恢复记录
  1018.             highlight.recoveryHistory = {
  1019.                 timestamp: Date.now(),
  1020.                 method: 'contextMatch',
  1021.                 success: true
  1022.             };
  1023.             saveHighlights(); // 保存更新后的恢复历史
  1024.             return true;
  1025.         }
  1026.  
  1027.         // 尝试模糊匹配
  1028.         if (fuzzyContextMatch(highlight)) {
  1029.             highlight.recoveryHistory = {
  1030.                 timestamp: Date.now(),
  1031.                 method: 'fuzzyContext',
  1032.                 success: true
  1033.             };
  1034.             saveHighlights();
  1035.             return true;
  1036.         }
  1037.  
  1038.         // 记录失败状态
  1039.         highlight.recoveryHistory = {
  1040.             timestamp: Date.now(),
  1041.             method: 'fallback',
  1042.             success: false
  1043.         };
  1044.         saveHighlights();
  1045.         return false;
  1046.     }
  1047.  
  1048.     function restoreHighlightUsingContext(highlight) {
  1049.         // 遍历页面中所有文本节点
  1050.         const treeWalker = document.createTreeWalker(
  1051.             document.body,
  1052.             NodeFilter.SHOW_TEXT,
  1053.             null
  1054.         );
  1055.  
  1056.         // 如果存在前缀和后缀信息，预处理它们以便于比较
  1057.         const storedPrefix = highlight.prefix ? highlight.prefix.trim() : '';
  1058.         const storedSuffix = highlight.suffix ? highlight.suffix.trim() : '';
  1059.  
  1060.         // 存储所有可能的匹配及其得分
  1061.         const matches = [];
  1062.  
  1063.         // 记录找到多少个完全相同的文本
  1064.         let exactTextMatches = 0;
  1065.  
  1066.         while (treeWalker.nextNode()) {
  1067.             const node = treeWalker.currentNode;
  1068.             const textContent = node.textContent;
  1069.             if (!textContent || textContent.trim().length === 0) continue;
  1070.  
  1071.             const idx = textContent.indexOf(highlight.text);
  1072.             if (idx !== -1) {
  1073.                 // 记录找到了一个文本匹配
  1074.                 exactTextMatches++;
  1075.  
  1076.                 // 获取当前节点中匹配区域前后的上下文
  1077.                 const actualPrefix = textContent.substring(Math.max(0, idx - 30), idx).trim();
  1078.                 const actualSuffix = textContent.substring(idx + highlight.text.length,
  1079.                     idx + highlight.text.length + 30).trim();
  1080.  
  1081.                 // 计算上下文匹配得分
  1082.                 let score = 1; // 基础分：找到了文本
  1083.  
  1084.                 // 前缀匹配得分计算 (改进版)
  1085.                 if (storedPrefix && actualPrefix) {
  1086.                     if (actualPrefix.includes(storedPrefix)) {
  1087.                         score += 10; // 前缀完全包含加10分
  1088.                     } else if (storedPrefix.length > 3) {
  1089.                         // 尝试匹配前缀的尾部
  1090.                         for (let i = Math.min(storedPrefix.length, actualPrefix.length); i >= 3; i--) {
  1091.                             if (storedPrefix.slice(-i) === actualPrefix.slice(-i)) {
  1092.                                 score += i / 2; // 匹配长度越长分数越高
  1093.                                 break;
  1094.                             }
  1095.                         }
  1096.  
  1097.                         // 另外尝试寻找前缀中的部分匹配
  1098.                         if (storedPrefix.length >= 8) {
  1099.                             for (let i = 0; i < storedPrefix.length - 6; i++) {
  1100.                                 const fragment = storedPrefix.substring(i, i + 6);
  1101.                                 if (actualPrefix.includes(fragment)) {
  1102.                                     score += 3; // 找到部分匹配加3分
  1103.                                     break;
  1104.                                 }
  1105.                             }
  1106.                         }
  1107.                     }
  1108.                 }
  1109.  
  1110.                 // 后缀匹配得分计算 (改进版)
  1111.                 if (storedSuffix && actualSuffix) {
  1112.                     if (actualSuffix.includes(storedSuffix)) {
  1113.                         score += 10; // 后缀完全包含加10分
  1114.                     } else if (storedSuffix.length > 3) {
  1115.                         // 尝试匹配后缀的开头
  1116.                         for (let i = Math.min(storedSuffix.length, actualSuffix.length); i >= 3; i--) {
  1117.                             if (storedSuffix.slice(0, i) === actualSuffix.slice(0, i)) {
  1118.                                 score += i / 2; // 匹配长度越长分数越高
  1119.                                 break;
  1120.                             }
  1121.                         }
  1122.  
  1123.                         // 另外尝试寻找后缀中的部分匹配
  1124.                         if (storedSuffix.length >= 8) {
  1125.                             for (let i = 0; i < storedSuffix.length - 6; i++) {
  1126.                                 const fragment = storedSuffix.substring(i, i + 6);
  1127.                                 if (actualSuffix.includes(fragment)) {
  1128.                                     score += 3; // 找到部分匹配加3分
  1129.                                     break;
  1130.                                 }
  1131.                             }
  1132.                         }
  1133.                     }
  1134.                 }
  1135.  
  1136.                 matches.push({
  1137.                     node,
  1138.                     idx,
  1139.                     score,
  1140.                     actualPrefix,
  1141.                     actualSuffix
  1142.                 });
  1143.             }
  1144.         }
  1145.  
  1146.         // 特殊情况处理：如果页面上只有一个文本匹配，直接使用它
  1147.         if (exactTextMatches === 1 && matches.length === 1) {
  1148.             const match = matches[0];
  1149.             try {
  1150.                 const range = document.createRange();
  1151.                 range.setStart(match.node, match.idx);
  1152.                 range.setEnd(match.node, match.idx + highlight.text.length);
  1153.  
  1154.                 const highlightElement = document.createElement('span');
  1155.                 highlightElement.className = `${STYLE_PREFIX}highlight-marked`;
  1156.                 highlightElement.dataset.highlightId = highlight.id;
  1157.                 highlightElement.style.backgroundColor = highlight.color;
  1158.  
  1159.                 const fragment = range.extractContents();
  1160.                 highlightElement.appendChild(fragment);
  1161.                 range.insertNode(highlightElement);
  1162.  
  1163.                 highlightElement.addEventListener('click', (e) => {
  1164.                     e.preventDefault();
  1165.                     e.stopPropagation();
  1166.                     showHighlightEditMenu(e, highlight.id);
  1167.                 });
  1168.  
  1169.                 return true;
  1170.             } catch (e) {
  1171.                 console.warn('唯一文本匹配恢复高亮失败:', e);
  1172.             }
  1173.         }
  1174.  
  1175.         // 如果找到多个匹配项，选择得分最高的
  1176.         if (matches.length > 0) {
  1177.             // 按得分降序排序
  1178.             matches.sort((a, b) => b.score - a.score);
  1179.             const bestMatch = matches[0];
  1180.  
  1181.             // 降低匹配阈值，从5降到3，使得更多的匹配可以被接受
  1182.             const minScore = exactTextMatches > 1 ? 3 : 1;
  1183.  
  1184.             if (bestMatch.score >= minScore) {
  1185.                 try {
  1186.                     const range = document.createRange();
  1187.                     range.setStart(bestMatch.node, bestMatch.idx);
  1188.                     range.setEnd(bestMatch.node, bestMatch.idx + highlight.text.length);
  1189.  
  1190.                     const highlightElement = document.createElement('span');
  1191.                     highlightElement.className = `${STYLE_PREFIX}highlight-marked`;
  1192.                     highlightElement.dataset.highlightId = highlight.id;
  1193.                     highlightElement.style.backgroundColor = highlight.color;
  1194.  
  1195.                     const fragment = range.extractContents();
  1196.                     highlightElement.appendChild(fragment);
  1197.                     range.insertNode(highlightElement);
  1198.  
  1199.                     highlightElement.addEventListener('click', (e) => {
  1200.                         e.preventDefault();
  1201.                         e.stopPropagation();
  1202.                         showHighlightEditMenu(e, highlight.id);
  1203.                     });
  1204.  
  1205.                     return true;
  1206.                 } catch (e) {
  1207.                     console.warn('上下文匹配恢复高亮失败:', e);
  1208.                 }
  1209.             } else {
  1210.                 console.log('匹配分数过低，尝试模糊匹配:', {
  1211.                     text: highlight.text,
  1212.                     bestScore: bestMatch.score,
  1213.                     matchCount: matches.length
  1214.                 });
  1215.             }
  1216.         }
  1217.  
  1218.         return false;
  1219.     }
  1220.  
  1221.     function extractValidContext(text, start, count, direction) {
  1222.         // direction: "backward" 从 start 往前提取, "forward" 从 start 往后提取
  1223.         let result = "";
  1224.         let processedChars = 0;
  1225.  
  1226.         // 对于短文本或单个字符，我们提取更多上下文
  1227.         const adjustedCount = count * (text.length <= 3 ? 2 : 1);
  1228.  
  1229.         if (direction === "backward") {
  1230.             for (let i = start - 1; i >= 0 && processedChars < adjustedCount * 2; i--) {
  1231.                 const ch = text.charAt(i);
  1232.                 // 只计算有效字符（中文、英文、数字）
  1233.                 if (/[\u4e00-\u9fffA-Za-z0-9]/.test(ch)) {
  1234.                     result = ch + result;
  1235.                     processedChars++;
  1236.                     if (processedChars >= adjustedCount) break;
  1237.                 } else {
  1238.                     // 空格和标点也记录，但不计入有效字符数
  1239.                     result = ch + result;
  1240.                 }
  1241.             }
  1242.         } else { // forward
  1243.             for (let i = start; i < text.length && processedChars < adjustedCount * 2; i++) {
  1244.                 const ch = text.charAt(i);
  1245.                 // 只计算有效字符（中文、英文、数字）
  1246.                 if (/[\u4e00-\u9fffA-Za-z0-9]/.test(ch)) {
  1247.                     result += ch;
  1248.                     processedChars++;
  1249.                     if (processedChars >= adjustedCount) break;
  1250.                 } else {
  1251.                     // 空格和标点也记录，但不计入有效字符数
  1252.                     result += ch;
  1253.                 }
  1254.             }
  1255.         }
  1256.         return result;
  1257.     }
  1258.  
  1259.     // 添加浮动按钮和侧边栏功能
  1260.     function createFloatingButtonAndSidebar() {
  1261.         const tooltipStyle = document.createElement('style');
  1262.         tooltipStyle.textContent = `
  1263.             .${STYLE_PREFIX}tooltip {
  1264.                 position: absolute;
  1265.                 background: #1A1D24;
  1266.                 color: #E8E9EB;
  1267.                 padding: 4px 10px;
  1268.                 border-radius: 4px;
  1269.                 font-size: 12px;
  1270.                 pointer-events: none;
  1271.                 white-space: nowrap;
  1272.                 z-index: 10000;
  1273.                 opacity: 0;
  1274.                 transition: opacity 0.2s;
  1275.                 bottom: 130%;
  1276.                 left: 50%;
  1277.                 transform: translateX(-50%);
  1278.                 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  1279.                 border: 1px solid rgba(59, 165, 216, 0.2);
  1280.             }
  1281.             
  1282.             .${STYLE_PREFIX}tooltip::after {
  1283.                 content: "";
  1284.                 position: absolute;
  1285.                 top: 100%;
  1286.                 left: 50%;
  1287.                 margin-left: -5px;
  1288.                 border-width: 5px;
  1289.                 border-style: solid;
  1290.                 border-color: #1A1D24 transparent transparent transparent;
  1291.             }
  1292.             
  1293.             .${STYLE_PREFIX}tooltip-container {
  1294.                 position: relative;
  1295.             }
  1296.         `;
  1297.         document.head.appendChild(tooltipStyle);
  1298.         // 创建浮动按钮
  1299.         const floatingButton = document.createElement('button');
  1300.         floatingButton.id = `${STYLE_PREFIX}floating-button`;
  1301.         // 使用 SVG 图标，代表"汉堡菜单"
  1302.         floatingButton.innerHTML = `
  1303.             <svg viewBox="0 0 100 80" width="16" height="16" fill="#ccc" xmlns="http://www.w3.org/2000/svg">
  1304.                 <rect width="100" height="10"></rect>
  1305.                 <rect y="30" width="100" height="10"></rect>
  1306.                 <rect y="60" width="100" height="10"></rect>
  1307.             </svg>
  1308.         `;
  1309.         // 根据设置和启用状态决定是否显示
  1310.         floatingButton.style.display = (settings.showFloatingButton && isHighlightEnabled) ? 'flex' : 'none';
  1311.         document.body.appendChild(floatingButton);
  1312.         // 创建侧边栏（初始隐藏）
  1313.         const sidebar = document.createElement('div');
  1314.         sidebar.id = `${STYLE_PREFIX}sidebar`;
  1315.         Object.assign(sidebar.style, {
  1316.             position: 'fixed',
  1317.             top: '0',
  1318.             right: '-280px',
  1319.             width: '280px',
  1320.             height: '100%',
  1321.             boxShadow: '-1px 0 8px rgba(0, 0, 0, 0.2)',
  1322.             transition: 'none',
  1323.             zIndex: '9999',
  1324.             overflow: 'hidden',
  1325.             display: 'flex',
  1326.             flexDirection: 'column',
  1327.             color: '#E8E9EB',
  1328.             fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
  1329.             background: 'linear-gradient(135deg, #262A33 0%, #1A1D24 100%)',
  1330.             borderLeft: '1px solid rgba(255, 255, 255, 0.03)',
  1331.         });
  1332.  
  1333.         // 构建侧边栏内部结构
  1334.         sidebar.innerHTML = `
  1335.             <div class="${STYLE_PREFIX}sidebar-header">
  1336.                 <div class="${STYLE_PREFIX}sidebar-title" title="双击修改标题">
  1337.                     ${settings.sidebarDescription || '网页划词高亮工具'}
  1338.                 </div>
  1339.                 <div class="${STYLE_PREFIX}sidebar-controls">
  1340.                     <button class="${STYLE_PREFIX}sidebar-close" title="关闭侧边栏">
  1341.                         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  1342.                             <path d="M18 6L6 18M6 6l12 12"></path>
  1343.                         </svg>
  1344.                     </button>
  1345.                 </div>
  1346.             </div>
  1347.         
  1348.             <div class="${STYLE_PREFIX}sidebar-tabs">
  1349.                 <button class="${STYLE_PREFIX}sidebar-tab ${STYLE_PREFIX}active" data-tab="highlights">高亮列表</button>
  1350.                 <button class="${STYLE_PREFIX}sidebar-tab" data-tab="disabled">启用管理</button>
  1351.             </div>
  1352.         
  1353.             <div class="${STYLE_PREFIX}sidebar-content">
  1354.                 <div class="${STYLE_PREFIX}tab-panel ${STYLE_PREFIX}active" data-panel="highlights">
  1355.                     <div class="${STYLE_PREFIX}highlights-list"></div>
  1356.                 </div>
  1357.         
  1358.                 <div class="${STYLE_PREFIX}tab-panel" data-panel="disabled">
  1359.                     <div class="${STYLE_PREFIX}disabled-container"></div>
  1360.                 </div>
  1361.             </div>
  1362.         `;
  1363.  
  1364.         document.body.appendChild(sidebar);
  1365.         setTimeout(() => {
  1366.             sidebar.style.transition = 'right 0.3s ease';
  1367.         }, 10);
  1368.  
  1369.         // 设置侧边栏内部元素样式
  1370.         const header = sidebar.querySelector(`.${STYLE_PREFIX}sidebar-header`);
  1371.         Object.assign(header.style, {
  1372.             display: 'flex',
  1373.             justifyContent: 'space-between',
  1374.             alignItems: 'center',
  1375.             boxSizing: 'border-box',
  1376.             borderBottom: '1px solid rgba(255, 255, 255, 0.05)',
  1377.             height: '42px',
  1378.             background: 'rgba(26, 29, 36, 0.8)',
  1379.             padding: '0 16px',
  1380.         });
  1381.  
  1382.         const title = sidebar.querySelector(`.${STYLE_PREFIX}sidebar-title`);
  1383.         Object.assign(title.style, {
  1384.             fontSize: '13px',
  1385.             fontWeight: '600',
  1386.             flex: '1',
  1387.             overflow: 'hidden',
  1388.             textOverflow: 'ellipsis',
  1389.             whiteSpace: 'nowrap',
  1390.             cursor: 'default',
  1391.             letterSpacing: '0.3px',
  1392.             opacity: '0.9',
  1393.         });
  1394.  
  1395.         const controls = sidebar.querySelector(`.${STYLE_PREFIX}sidebar-controls`);
  1396.         Object.assign(controls.style, {
  1397.             display: 'flex',
  1398.             gap: '8px'
  1399.         });
  1400.  
  1401.         // 设置按钮样式
  1402.         sidebar.querySelectorAll(`.${STYLE_PREFIX}sidebar-controls button`).forEach(btn => {
  1403.             Object.assign(btn.style, {
  1404.                 background: 'none',
  1405.                 border: 'none',
  1406.                 cursor: 'pointer',
  1407.                 padding: '3px',         // 从5px减小到3px
  1408.                 display: 'flex',
  1409.                 alignItems: 'center',
  1410.                 justifyContent: 'center',
  1411.                 color: '#ccc',
  1412.                 borderRadius: '3px',
  1413.                 transition: 'background-color 0.2s'
  1414.             });
  1415.  
  1416.             // 添加按钮悬停效果
  1417.             btn.addEventListener('mouseenter', () => {
  1418.                 btn.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
  1419.             });
  1420.  
  1421.             btn.addEventListener('mouseleave', () => {
  1422.                 btn.style.backgroundColor = 'transparent';
  1423.             });
  1424.         });
  1425.  
  1426.         // 设置标签页样式
  1427.         const tabs = sidebar.querySelector(`.${STYLE_PREFIX}sidebar-tabs`);
  1428.         Object.assign(tabs.style, {
  1429.             display: 'flex',
  1430.             borderBottom: '1px solid rgba(255, 255, 255, 0.05)',
  1431.             padding: '0',
  1432.             justifyContent: 'center',
  1433.             backgroundColor: 'rgba(26, 29, 36, 0.6)',
  1434.             height: '36px'
  1435.         });
  1436.  
  1437.         sidebar.querySelectorAll(`.${STYLE_PREFIX}sidebar-tab`).forEach(tab => {
  1438.             Object.assign(tab.style, {
  1439.                 height: '100%',
  1440.                 cursor: 'pointer',
  1441.                 fontWeight: '500',
  1442.                 background: 'none',
  1443.                 border: 'none',
  1444.                 color: '#ADADB8',
  1445.                 borderBottom: '2px solid transparent',
  1446.                 margin: '0',
  1447.                 transition: 'all 0.2s ease',
  1448.                 flex: '1',
  1449.                 display: 'flex',
  1450.                 alignItems: 'center',
  1451.                 justifyContent: 'center',
  1452.                 letterSpacing: '0.3px',
  1453.                 fontSize: '13px',
  1454.                 padding: '0 12px',
  1455.                 opacity: '0.75',
  1456.             });
  1457.         });
  1458.  
  1459.         // 激活的标签页样式
  1460.         const activeTab = sidebar.querySelector(`.${STYLE_PREFIX}sidebar-tab.${STYLE_PREFIX}active`);
  1461.         if (activeTab) {
  1462.             Object.assign(activeTab.style, {
  1463.                 color: '#3BA5D8',
  1464.                 borderBottom: '2px solid #3BA5D8',  // 改为湖蓝色
  1465.                 backgroundColor: 'rgba(59, 165, 216, 0.05)',
  1466.                 opacity: '1',
  1467.             });
  1468.         }
  1469.  
  1470.         // 内容区域样式
  1471.         const contentArea = sidebar.querySelector(`.${STYLE_PREFIX}sidebar-content`);
  1472.         Object.assign(contentArea.style, {
  1473.             flex: '1',
  1474.             overflow: 'hidden',
  1475.             position: 'relative'
  1476.         });
  1477.  
  1478.         // 设置面板样式
  1479.         sidebar.querySelectorAll(`.${STYLE_PREFIX}tab-panel`).forEach(panel => {
  1480.             Object.assign(panel.style, {
  1481.                 height: '100%',
  1482.                 width: '100%',
  1483.                 position: 'absolute',
  1484.                 top: '0',
  1485.                 left: '0',
  1486.                 padding: '14px 14px 14px 14px',  // 修改为：上右下左，底部padding设为0
  1487.                 boxSizing: 'border-box',
  1488.                 overflow: 'auto',
  1489.                 display: 'none'
  1490.             });
  1491.         });
  1492.  
  1493.         // 显示当前活动面板
  1494.         const activePanel = sidebar.querySelector(`.${STYLE_PREFIX}tab-panel.${STYLE_PREFIX}active`);
  1495.         if (activePanel) {
  1496.             activePanel.style.display = 'block';
  1497.         }
  1498.  
  1499.         // 添加侧边栏拖拽调整区域（位于侧边栏的最左侧）
  1500.         const resizer = document.createElement('div');
  1501.         Object.assign(resizer.style, {
  1502.             position: 'absolute',
  1503.             left: '0',
  1504.             top: '0',
  1505.             width: '5px',
  1506.             height: '100%',
  1507.             cursor: 'ew-resize',
  1508.             backgroundColor: 'transparent'
  1509.         });
  1510.         sidebar.appendChild(resizer);
  1511.  
  1512.         // 拖拽事件逻辑
  1513.         resizer.addEventListener('mousedown', initResize);
  1514.  
  1515.         function initResize(e) {
  1516.             e.preventDefault();
  1517.             window.addEventListener('mousemove', resizeSidebar);
  1518.             window.addEventListener('mouseup', stopResize);
  1519.         }
  1520.  
  1521.         function resizeSidebar(e) {
  1522.             // 计算出新的宽度：侧边栏右对齐，宽度 = 窗口宽度 - 鼠标水平位置
  1523.             const newWidth = window.innerWidth - e.clientX;
  1524.             // 限制最小宽度为 150px，最大宽度为窗口 80%
  1525.             if (newWidth >= 150 && newWidth <= window.innerWidth * 0.8) {
  1526.                 sidebar.style.width = newWidth + 'px';
  1527.                 // 更新设置中的宽度
  1528.                 settings.sidebarWidth = newWidth;
  1529.                 saveSettings();
  1530.             }
  1531.         }
  1532.  
  1533.         function stopResize(e) {
  1534.             window.removeEventListener('mousemove', resizeSidebar);
  1535.             window.removeEventListener('mouseup', stopResize);
  1536.         }
  1537.  
  1538.         // 标签页切换事件
  1539.         sidebar.querySelectorAll(`.${STYLE_PREFIX}sidebar-tab`).forEach(tab => {
  1540.             tab.addEventListener('click', () => {
  1541.                 // 移除所有标签页和面板的活动状态
  1542.                 sidebar.querySelectorAll(`.${STYLE_PREFIX}sidebar-tab`).forEach(t => {
  1543.                     t.classList.remove(`${STYLE_PREFIX}active`);
  1544.                     t.style.color = '#ccc';
  1545.                     t.style.borderBottom = '2px solid transparent';
  1546.                     t.style.backgroundColor = 'transparent';
  1547.                 });
  1548.  
  1549.                 sidebar.querySelectorAll(`.${STYLE_PREFIX}tab-panel`).forEach(p => {
  1550.                     p.classList.remove(`${STYLE_PREFIX}active`);
  1551.                     p.style.display = 'none';
  1552.                 });
  1553.  
  1554.                 // 激活当前标签和面板
  1555.                 tab.classList.add(`${STYLE_PREFIX}active`);
  1556.                 tab.style.color = '#fff';
  1557.                 // 这里需要修改，将红色改为湖蓝色
  1558.                 tab.style.borderBottom = '2px solid #3BA5D8'; // 修改为湖蓝色，与初始样式一致
  1559.                 tab.style.backgroundColor = 'rgba(59, 165, 216, 0.05)'; // 添加微妙的背景色
  1560.  
  1561.                 const panelId = tab.getAttribute('data-tab');
  1562.                 const panel = sidebar.querySelector(`.${STYLE_PREFIX}tab-panel[data-panel="${panelId}"]`);
  1563.                 if (panel) {
  1564.                     panel.classList.add(`${STYLE_PREFIX}active`);
  1565.                     panel.style.display = 'block';
  1566.                 }
  1567.             });
  1568.  
  1569.             // 悬停效果也应修改为一致的颜色
  1570.             tab.addEventListener('mouseenter', () => {
  1571.                 if (!tab.classList.contains(`${STYLE_PREFIX}active`)) {
  1572.                     tab.style.backgroundColor = 'rgba(59, 165, 216, 0.05)'; // 改为湖蓝色背景
  1573.                     tab.style.borderBottom = '2px solid rgba(59, 165, 216, 0.3)'; // 淡化的湖蓝色边框
  1574.                 }
  1575.             });
  1576.         });
  1577.  
  1578.         // 标题双击编辑功能
  1579.         const titleElement = sidebar.querySelector(`.${STYLE_PREFIX}sidebar-title`);
  1580.         titleElement.addEventListener('dblclick', () => {
  1581.             const currentTitle = titleElement.textContent.trim() || '高亮工具';
  1582.             const input = document.createElement('input');
  1583.             input.type = 'text';
  1584.             input.value = currentTitle;
  1585.  
  1586.             // 美化输入框样式
  1587.             Object.assign(input.style, {
  1588.                 width: '100%',
  1589.                 fontSize: '14px',
  1590.                 fontWeight: '500',
  1591.                 padding: '2px 6px',
  1592.                 boxSizing: 'border-box',
  1593.                 border: '1px solid rgba(116, 180, 255, 0.5)',
  1594.                 borderRadius: '3px',
  1595.                 outline: 'none',
  1596.                 background: 'rgba(0, 0, 0, 0.2)',
  1597.                 color: '#fff',
  1598.                 transition: 'all 0.15s ease',
  1599.                 boxShadow: '0 0 0 1px rgba(116, 180, 255, 0.3)'
  1600.             });
  1601.  
  1602.             // 替换标题内容为输入框
  1603.             titleElement.innerHTML = '';
  1604.             titleElement.appendChild(input);
  1605.             input.focus();
  1606.             input.select();
  1607.  
  1608.             // 添加输入框聚焦样式
  1609.             input.addEventListener('focus', () => {
  1610.                 input.style.background = 'rgba(20, 20, 20, 0.4)';
  1611.                 input.style.boxShadow = '0 0 0 2px rgba(116, 180, 255, 0.4)';
  1612.             });
  1613.  
  1614.             // 确认修改：输入框失焦或按下 Enter 键时更新标题
  1615.             const confirmChange = () => {
  1616.                 const newTitle = input.value.trim() || '高亮工具';
  1617.                 settings.sidebarDescription = newTitle;
  1618.                 titleElement.textContent = newTitle;
  1619.                 saveSettings();
  1620.             };
  1621.  
  1622.             input.addEventListener('blur', confirmChange);
  1623.             input.addEventListener('keydown', (event) => {
  1624.                 if (event.key === 'Enter') {
  1625.                     input.blur();
  1626.                 } else if (event.key === 'Escape') {
  1627.                     // 按ESC键取消编辑
  1628.                     titleElement.textContent = currentTitle;
  1629.                     input.blur();
  1630.                 }
  1631.             });
  1632.         });
  1633.  
  1634.         // 关闭按钮事件
  1635.         const closeButton = sidebar.querySelector(`.${STYLE_PREFIX}sidebar-close`);
  1636.         closeButton.addEventListener('click', () => {
  1637.             sidebar.style.right = `-${parseInt(sidebar.style.width)}px`;
  1638.  
  1639.             // 侧边栏关闭时，如果设置允许显示浮动按钮且当前页面未启用，则恢复显示浮动按钮
  1640.             if (settings.showFloatingButton && isHighlightEnabled) {
  1641.                 floatingButton.style.display = 'flex';
  1642.             }
  1643.         });
  1644.  
  1645.         // 浮动按钮点击后切换侧边栏的显示和隐藏
  1646.         floatingButton.addEventListener('click', () => {
  1647.             if (sidebar.style.right === '0px') {
  1648.                 sidebar.style.right = `-${parseInt(sidebar.style.width)}px`;
  1649.                 // 如果设置允许显示浮动按钮且当前页面已启用，则显示浮动按钮
  1650.                 if (settings.showFloatingButton && isHighlightEnabled) {  // 正确的变量
  1651.                     floatingButton.style.display = 'flex';
  1652.                 }
  1653.             } else {
  1654.                 sidebar.style.right = '0px';
  1655.                 // 当侧边栏显示时，隐藏浮动按钮
  1656.                 floatingButton.style.display = 'none';
  1657.                 // 刷新高亮列表
  1658.                 if (updateSidebarHighlights) {
  1659.                     updateSidebarHighlights();
  1660.                 }
  1661.             }
  1662.         });
  1663.  
  1664.         // 初始设置宽度
  1665.         if (settings.sidebarWidth) {
  1666.             sidebar.style.width = `${settings.sidebarWidth}px`;
  1667.             sidebar.style.right = `-${settings.sidebarWidth}px`; // 确保初始位置与实际宽度匹配
  1668.         } else {
  1669.             sidebar.style.right = '-300px'; // 默认宽度的对应位置
  1670.         }
  1671.  
  1672.         // 渲染高亮列表面板
  1673.         function renderHighlightsList() {
  1674.             const highlightsListContainer = sidebar.querySelector(`.${STYLE_PREFIX}highlights-list`);
  1675.             if (!highlightsListContainer) return;
  1676.  
  1677.             // 清空容器
  1678.             highlightsListContainer.innerHTML = '';
  1679.             Object.assign(highlightsListContainer.style, {
  1680.                 height: 'calc(100vh - 120px)', // 调整合适高度，减去顶栏和标签栏高度
  1681.                 overflow: 'hidden',
  1682.                 display: 'flex',    // 添加flex布局
  1683.                 flexDirection: 'column', // 确保子元素垂直排列
  1684.                 paddingBottom: '0',  // 确保底部无padding
  1685.                 width: '100%', // 确保宽度不超过父容器
  1686.                 position: 'relative', // 为绝对定位的子元素提供定位上下文
  1687.                 boxSizing: 'border-box', // 确保内边距不会增加元素实际宽度
  1688.             });
  1689.  
  1690.             // 创建高亮列表
  1691.             const listContainer = document.createElement('div');
  1692.             listContainer.className = `${STYLE_PREFIX}highlights-items`;
  1693.             Object.assign(listContainer.style, {
  1694.                 display: 'flex',
  1695.                 flexDirection: 'column',
  1696.                 gap: '8px',
  1697.                 height: 'calc(100% - 12px)',
  1698.                 overflow: 'auto',
  1699.                 paddingRight: '8px',
  1700.                 paddingBottom: '4px'
  1701.             });
  1702.  
  1703.             // 自定义滚动条样式
  1704.             const styleEl = document.createElement('style');
  1705.             styleEl.textContent = `
  1706.                 .${STYLE_PREFIX}highlights-items::-webkit-scrollbar {
  1707.                     width: 5px; /* 更细的滚动条 */
  1708.                 }
  1709.                 .${STYLE_PREFIX}highlights-items::-webkit-scrollbar-track {
  1710.                     background: rgba(255, 255, 255, 0.03); /* 更微妙的轨道 */
  1711.                     border-radius: 3px;
  1712.                 }
  1713.                 .${STYLE_PREFIX}highlights-items::-webkit-scrollbar-thumb {
  1714.                     background: rgba(255, 255, 255, 0.15); /* 更微妙的滑块 */
  1715.                     border-radius: 3px;
  1716.                 }
  1717.                 .${STYLE_PREFIX}highlights-items::-webkit-scrollbar-thumb:hover {
  1718.                     background: rgba(255, 255, 255, 0.25);
  1719.                 }
  1720.             `;
  1721.             document.head.appendChild(styleEl);
  1722.  
  1723.             // 排序高亮，按时间倒序
  1724.             const sortedHighlights = [...highlights].sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
  1725.  
  1726.             if (sortedHighlights.length === 0) {
  1727.                 // 显示空状态
  1728.                 const emptyState = document.createElement('div');
  1729.                 Object.assign(emptyState.style, {
  1730.                     display: 'flex',
  1731.                     flexDirection: 'column',
  1732.                     alignItems: 'center',
  1733.                     justifyContent: 'center',
  1734.                     padding: '60px 20px',
  1735.                     textAlign: 'center',
  1736.                     color: '#999',
  1737.                     fontSize: '13px'
  1738.                 });
  1739.  
  1740.                 // 使用SVG图标作为空状态图标
  1741.                 emptyState.innerHTML = `
  1742.                     <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.15)"
  1743.                         stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  1744.                         <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
  1745.                     </svg>
  1746.                     <p style="margin-top:16px; font-size:13px !important;">暂无高亮内容<br>选中文本并点击颜色进行高亮</p>
  1747.                 `;
  1748.                 listContainer.appendChild(emptyState);
  1749.             } else {
  1750.                 // 渲染所有高亮项目
  1751.                 sortedHighlights.forEach((highlight, index) => {
  1752.                     const highlightItem = createHighlightItem(highlight, index);
  1753.                     listContainer.appendChild(highlightItem);
  1754.                 });
  1755.             }
  1756.  
  1757.             highlightsListContainer.appendChild(listContainer);
  1758.  
  1759.             // 创建底部固定按钮栏
  1760.             const bottomActionBar = document.createElement('div');
  1761.             bottomActionBar.className = `${STYLE_PREFIX}highlights-bottom-actions`;
  1762.             Object.assign(bottomActionBar.style, {
  1763.                 display: 'flex',
  1764.                 position: 'absolute',
  1765.                 bottom: '0',
  1766.                 left: '0',
  1767.                 right: '0',
  1768.                 padding: '0',
  1769.                 zIndex: '1',
  1770.                 gap: '10px',
  1771.                 boxSizing: 'border-box',
  1772.                 background: 'transparent',
  1773.             });
  1774.  
  1775.             // 创建刷新按钮
  1776.             const refreshBtn = document.createElement('button');
  1777.             refreshBtn.textContent = '刷新列表';
  1778.             Object.assign(refreshBtn.style, {
  1779.                 flex: '1',
  1780.                 background: 'rgba(59, 165, 216, 0.12)',
  1781.                 border: '1px solid rgba(59, 165, 216, 0.08)',
  1782.                 borderRadius: '4px',
  1783.                 padding: '8px 12px',
  1784.                 color: '#3BA5D8',
  1785.                 fontSize: '13px',
  1786.                 fontWeight: '500',
  1787.                 cursor: 'pointer',
  1788.                 transition: 'all 0.2s ease'
  1789.             });
  1790.  
  1791.             // 添加悬停效果
  1792.             refreshBtn.addEventListener('mouseenter', () => {
  1793.                 refreshBtn.style.background = 'rgba(59, 165, 216, 0.2)';
  1794.             });
  1795.             refreshBtn.addEventListener('mouseleave', () => {
  1796.                 refreshBtn.style.background = 'rgba(59, 165, 216, 0.12)';
  1797.             });
  1798.  
  1799.             refreshBtn.addEventListener('click', () => {
  1800.                 // 刷新高亮列表
  1801.                 loadHighlights();
  1802.                 applyHighlights();
  1803.                 renderHighlightsList();
  1804.             });
  1805.  
  1806.             // 创建清除按钮
  1807.             const clearBtn = document.createElement('button');
  1808.             clearBtn.textContent = '清除全部';
  1809.             Object.assign(clearBtn.style, {
  1810.                 flex: '1',
  1811.                 background: 'rgba(255, 82, 82, 0.12)',
  1812.                 border: '1px solid rgba(255, 82, 82, 0.08)',
  1813.                 color: '#ff6b6b',
  1814.                 borderRadius: '4px',
  1815.                 padding: '8px 12px',
  1816.                 fontSize: '13px',
  1817.                 fontWeight: '500',
  1818.                 cursor: 'pointer',
  1819.                 transition: 'all 0.2s ease'
  1820.             });
  1821.  
  1822.             // 添加悬停效果
  1823.             clearBtn.addEventListener('mouseenter', () => {
  1824.                 clearBtn.style.background = 'rgba(255, 82, 82, 0.2)';
  1825.             });
  1826.             clearBtn.addEventListener('mouseleave', () => {
  1827.                 clearBtn.style.background = 'rgba(255, 82, 82, 0.12)';
  1828.             });
  1829.  
  1830.             clearBtn.addEventListener('click', () => {
  1831.                 if (highlights.length === 0) return;
  1832.  
  1833.                 // 确认删除
  1834.                 if (confirm('确定要删除所有高亮吗？此操作不可撤销。')) {
  1835.                     // 移除DOM中的高亮元素
  1836.                     document.querySelectorAll(`.${STYLE_PREFIX}highlight-marked`).forEach(el => {
  1837.                         const textNode = document.createTextNode(el.textContent);
  1838.                         el.parentNode.replaceChild(textNode, el);
  1839.                     });
  1840.  
  1841.                     // 清空高亮数组
  1842.                     highlights = [];
  1843.                     saveHighlights();
  1844.                     renderHighlightsList();
  1845.                 }
  1846.             });
  1847.  
  1848.             bottomActionBar.appendChild(refreshBtn);
  1849.             bottomActionBar.appendChild(clearBtn);
  1850.             highlightsListContainer.appendChild(bottomActionBar);
  1851.         }
  1852.  
  1853.         updateSidebarHighlights = renderHighlightsList;
  1854.  
  1855.         // 创建单个高亮项目
  1856.         function createHighlightItem(highlight, index) {
  1857.             const item = document.createElement('div');
  1858.             item.className = `${STYLE_PREFIX}highlight-item`;
  1859.             item.dataset.highlightId = highlight.id;
  1860.  
  1861.             Object.assign(item.style, {
  1862.                 backgroundColor: 'rgba(42, 46, 54, 0.4)',
  1863.                 borderRadius: '4px',
  1864.                 padding: '12px 14px',
  1865.                 position: 'relative',
  1866.                 transition: 'all 0.15s ease',
  1867.                 border: '1px solid rgba(255, 255, 255, 0.03)',
  1868.                 margin: '0 0 8px 0',
  1869.             });
  1870.  
  1871.             // 颜色指示器
  1872.             const colorIndicator = document.createElement('div');
  1873.             Object.assign(colorIndicator.style, {
  1874.                 position: 'absolute',
  1875.                 top: '0',
  1876.                 left: '0',
  1877.                 width: '3px',
  1878.                 height: '100%',
  1879.                 backgroundColor: highlight.color,
  1880.                 borderTopLeftRadius: '12px',
  1881.                 borderBottomLeftRadius: '12px'
  1882.             });
  1883.  
  1884.             // 高亮内容
  1885.             const content = document.createElement('div');
  1886.             Object.assign(content.style, {
  1887.                 paddingLeft: '4px',
  1888.                 color: '#E8E9EB',
  1889.                 fontSize: '14px',
  1890.                 lineHeight: '1.5',
  1891.                 marginBottom: '8px',
  1892.                 wordBreak: 'break-word',
  1893.                 display: '-webkit-box',
  1894.                 WebkitBoxOrient: 'vertical',
  1895.                 WebkitLineClamp: '2',
  1896.                 overflow: 'hidden',
  1897.                 textOverflow: 'ellipsis'
  1898.             });
  1899.  
  1900.             // 处理高亮文本，避免XSS
  1901.             const textNode = document.createTextNode(highlight.text);
  1902.             content.appendChild(textNode);
  1903.  
  1904.             // 底部信息栏
  1905.             const infoBar = document.createElement('div');
  1906.             Object.assign(infoBar.style, {
  1907.                 display: 'flex',
  1908.                 justifyContent: 'space-between',
  1909.                 alignItems: 'center',
  1910.                 fontSize: '12px',
  1911.                 marginTop: '6px',
  1912.                 paddingLeft: '3px'  // 与内容区域左边距统一
  1913.             });
  1914.  
  1915.             // 时间信息
  1916.             const timeInfo = document.createElement('div');
  1917.             Object.assign(timeInfo.style, {
  1918.                 color: '#999',
  1919.                 fontSize: '12px'
  1920.             });
  1921.  
  1922.             // 格式化时间
  1923.             const date = new Date(highlight.timestamp);
  1924.             const formattedDate = `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
  1925.             timeInfo.textContent = formattedDate;
  1926.  
  1927.             // 操作按钮容器
  1928.             const actionButtons = document.createElement('div');
  1929.             Object.assign(actionButtons.style, {
  1930.                 display: 'flex',
  1931.                 gap: '10px'
  1932.             });
  1933.  
  1934.             // 跳转按钮
  1935.             const jumpButton = document.createElement('div');
  1936.             Object.assign(jumpButton.style, {
  1937.                 position: 'relative',
  1938.                 background: 'none',
  1939.                 border: 'none',
  1940.                 padding: '3px',
  1941.                 cursor: 'pointer',
  1942.                 color: '#74b4ff',
  1943.                 display: 'flex',
  1944.                 alignItems: 'center',
  1945.                 fontSize: '12px',
  1946.                 transition: 'color 0.15s ease'
  1947.             });
  1948.             jumpButton.className = `${STYLE_PREFIX}tooltip-container`;
  1949.             jumpButton.innerHTML = `
  1950.     <div class="${STYLE_PREFIX}tooltip">跳转到此高亮</div>
  1951.     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
  1952.         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  1953.         <path d="M15 3h6v6M14 10l6.16-6.16M9 21H3v-6M10 14l-6.16 6.16"></path>
  1954.     </svg>
  1955. `;
  1956.  
  1957.             jumpButton.addEventListener('mouseenter', () => {
  1958.                 jumpButton.style.color = '#a0cfff';
  1959.                 jumpButton.querySelector(`.${STYLE_PREFIX}tooltip`).style.opacity = '1';
  1960.             });
  1961.  
  1962.             jumpButton.addEventListener('mouseleave', () => {
  1963.                 jumpButton.style.color = '#74b4ff';
  1964.                 jumpButton.querySelector(`.${STYLE_PREFIX}tooltip`).style.opacity = '0';
  1965.             });
  1966.  
  1967.             // 删除按钮
  1968.             const deleteButton = document.createElement('div');
  1969.             Object.assign(deleteButton.style, {
  1970.                 position: 'relative',
  1971.                 background: 'none',
  1972.                 border: 'none',
  1973.                 padding: '3px',
  1974.                 cursor: 'pointer',
  1975.                 color: 'rgba(190, 60, 60, 0.8)',
  1976.                 display: 'flex',
  1977.                 alignItems: 'center',
  1978.                 fontSize: '12px',
  1979.                 transition: 'color 0.15s ease'
  1980.             });
  1981.             deleteButton.className = `${STYLE_PREFIX}tooltip-container`;
  1982.             deleteButton.innerHTML = `
  1983.                 <div class="${STYLE_PREFIX}tooltip">删除此高亮</div>
  1984.                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
  1985.                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  1986.                     <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path>
  1987.                 </svg>
  1988.             `;
  1989.  
  1990.             deleteButton.addEventListener('mouseenter', () => {
  1991.                 deleteButton.style.color = 'rgba(255, 80, 80, 0.95)';
  1992.                 deleteButton.querySelector(`.${STYLE_PREFIX}tooltip`).style.opacity = '1';
  1993.             });
  1994.  
  1995.             deleteButton.addEventListener('mouseleave', () => {
  1996.                 deleteButton.style.color = 'rgba(190, 60, 60, 0.8)';
  1997.                 deleteButton.querySelector(`.${STYLE_PREFIX}tooltip`).style.opacity = '0';
  1998.             });
  1999.  
  2000.             actionButtons.appendChild(jumpButton);
  2001.             actionButtons.appendChild(deleteButton);
  2002.  
  2003.             infoBar.appendChild(timeInfo);
  2004.             infoBar.appendChild(actionButtons);
  2005.  
  2006.             // 添加项目悬停效果
  2007.             item.addEventListener('mouseenter', () => {
  2008.                 item.style.backgroundColor = 'rgba(59, 165, 216, 0.1)';
  2009.                 item.style.borderColor = 'rgba(59, 165, 216, 0.15)';
  2010.             });
  2011.             item.addEventListener('mouseleave', () => {
  2012.                 item.style.backgroundColor = 'rgba(42, 46, 54, 0.4)';
  2013.                 item.style.borderColor = 'rgba(255, 255, 255, 0.03)';
  2014.             });
  2015.  
  2016.  
  2017.             item.appendChild(colorIndicator);
  2018.             item.appendChild(content);
  2019.             item.appendChild(infoBar);
  2020.  
  2021.             return item;
  2022.         }
  2023.  
  2024.         // 滚动到指定高亮
  2025.         function scrollToHighlight(highlightId) {
  2026.             const highlightElement = document.querySelector(`.${STYLE_PREFIX}highlight-marked[data-highlight-id="${highlightId}"]`);
  2027.             if (highlightElement) {
  2028.                 // 平滑滚动到元素
  2029.                 highlightElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
  2030.  
  2031.                 // 添加闪烁效果，并设置临时样式使其更加明显
  2032.                 highlightElement.classList.add(`${STYLE_PREFIX}highlight-flash`);
  2033.  
  2034.                 // 保存原有的样式以便恢复
  2035.                 const originalTransition = highlightElement.style.transition;
  2036.  
  2037.                 // 添加过渡效果使视觉反馈更平滑
  2038.                 highlightElement.style.transition = 'all 0.3s ease';
  2039.  
  2040.                 setTimeout(() => {
  2041.                     highlightElement.classList.remove(`${STYLE_PREFIX}highlight-flash`);
  2042.                     highlightElement.style.transition = originalTransition;
  2043.                 }, 2500);
  2044.             }
  2045.         }
  2046.  
  2047.         // 初始渲染高亮列表
  2048.         renderHighlightsList();
  2049.  
  2050.         // 渲染启用管理面板内容
  2051.         function renderEnabledPanel() {
  2052.             const container = sidebar.querySelector(`.${STYLE_PREFIX}disabled-container`);
  2053.             if (!container) return;
  2054.  
  2055.             // 清空容器
  2056.             container.innerHTML = '';
  2057.  
  2058.             // 给容器本身设置明确的颜色
  2059.             Object.assign(container.style, {
  2060.                 color: '#f0f0f0'  // 确保所有文本默认为浅色
  2061.             });
  2062.  
  2063.             // 添加当前页面管理区域
  2064.             const currentPageSection = document.createElement('div');
  2065.             currentPageSection.className = `${STYLE_PREFIX}disabled-section`;
  2066.             Object.assign(currentPageSection.style, {
  2067.                 marginBottom: '20px',
  2068.                 color: '#f0f0f0'  // 明确设置文本颜色
  2069.             });
  2070.  
  2071.             const currentPageTitle = document.createElement('div');
  2072.             currentPageTitle.className = `${STYLE_PREFIX}disabled-title`;
  2073.             currentPageTitle.innerHTML = `<span>当前页面</span>`;
  2074.             Object.assign(currentPageTitle.style, {
  2075.                 fontSize: '13px',
  2076.                 fontWeight: '600',
  2077.                 color: '#eee',  // 确保标题颜色为浅色
  2078.                 marginBottom: '10px',
  2079.                 display: 'flex',
  2080.                 alignItems: 'center',
  2081.                 gap: '8px'
  2082.             });
  2083.  
  2084.             // 当前页面状态
  2085.             const currentStatus = document.createElement('div');
  2086.             currentStatus.className = `${STYLE_PREFIX}current-status`;
  2087.             currentStatus.innerHTML = renderCurrentPageStatus();
  2088.  
  2089.             currentPageSection.appendChild(currentPageTitle);
  2090.             currentPageSection.appendChild(currentStatus);
  2091.             container.appendChild(currentPageSection);
  2092.  
  2093.             // 启用域名列表区域
  2094.             const domainsSection = document.createElement('div');
  2095.             domainsSection.className = `${STYLE_PREFIX}disabled-section`;
  2096.             Object.assign(domainsSection.style, {
  2097.                 marginBottom: '20px'
  2098.             });
  2099.  
  2100.             const domainsTitle = document.createElement('div');
  2101.             domainsTitle.className = `${STYLE_PREFIX}disabled-title`;
  2102.             domainsTitle.innerHTML = `<span>启用域名列表</span>`;
  2103.             Object.assign(domainsTitle.style, {
  2104.                 fontSize: '13px',
  2105.                 fontWeight: '600',
  2106.                 color: '#eee',
  2107.                 marginBottom: '10px',
  2108.                 display: 'flex',
  2109.                 alignItems: 'center',
  2110.                 gap: '8px'
  2111.             });
  2112.  
  2113.             const domainsList = document.createElement('div');
  2114.             domainsList.className = `${STYLE_PREFIX}domains-list`;
  2115.             domainsList.innerHTML = renderEnabledDomains();
  2116.  
  2117.             // 添加域名表单
  2118.             const addDomainForm = document.createElement('div');
  2119.             addDomainForm.className = `${STYLE_PREFIX}add-disabled-form`;
  2120.             Object.assign(addDomainForm.style, {
  2121.                 display: 'flex',
  2122.                 marginTop: '12px',
  2123.                 gap: '0'
  2124.             });
  2125.  
  2126.             const domainInput = document.createElement('input');
  2127.             domainInput.className = `${STYLE_PREFIX}add-disabled-input`;
  2128.             domainInput.id = 'add-domain-input';
  2129.             domainInput.placeholder = '输入域名...';
  2130.             Object.assign(domainInput.style, {
  2131.                 flex: '1',
  2132.                 backgroundColor: 'rgba(255, 255, 255, 0.07)',
  2133.                 border: '1px solid rgba(255, 255, 255, 0.1)',
  2134.                 borderRadius: '4px 0 0 4px',
  2135.                 padding: '8px 12px',
  2136.                 fontSize: '13px',
  2137.                 color: '#fff',
  2138.                 outline: 'none'
  2139.             });
  2140.  
  2141.             const addDomainBtn = document.createElement('button');
  2142.             addDomainBtn.className = `${STYLE_PREFIX}add-disabled-button`;
  2143.             addDomainBtn.id = 'add-domain-btn';
  2144.             addDomainBtn.textContent = '添加';
  2145.             Object.assign(addDomainBtn.style, {
  2146.                 backgroundColor: 'rgba(190, 60, 60, 0.8)',
  2147.                 color: '#f5e0e0',
  2148.                 border: 'none',
  2149.                 borderRadius: '0 4px 4px 0',
  2150.                 padding: '8px 16px',
  2151.                 fontSize: '13px',
  2152.                 fontWeight: '500',
  2153.                 cursor: 'pointer',
  2154.                 transition: 'all 0.2s ease'
  2155.             });
  2156.  
  2157.             addDomainForm.appendChild(domainInput);
  2158.             addDomainForm.appendChild(addDomainBtn);
  2159.  
  2160.             domainsSection.appendChild(domainsTitle);
  2161.             domainsSection.appendChild(domainsList);
  2162.             domainsSection.appendChild(addDomainForm);
  2163.             container.appendChild(domainsSection);
  2164.  
  2165.             // 启用URL列表区域
  2166.             const urlsSection = document.createElement('div');
  2167.             urlsSection.className = `${STYLE_PREFIX}disabled-section`;
  2168.  
  2169.             const urlsTitle = document.createElement('div');
  2170.             urlsTitle.className = `${STYLE_PREFIX}disabled-title`;
  2171.             urlsTitle.innerHTML = `<span>启用网址列表</span>`;
  2172.             Object.assign(urlsTitle.style, {
  2173.                 fontSize: '13px',
  2174.                 fontWeight: '600',
  2175.                 color: '#eee',
  2176.                 marginBottom: '10px',
  2177.                 display: 'flex',
  2178.                 alignItems: 'center',
  2179.                 gap: '8px'
  2180.             });
  2181.  
  2182.             const urlsList = document.createElement('div');
  2183.             urlsList.className = `${STYLE_PREFIX}urls-list`;
  2184.             urlsList.innerHTML = renderEnabledUrls();
  2185.  
  2186.             // 添加URL表单
  2187.             const addUrlForm = document.createElement('div');
  2188.             addUrlForm.className = `${STYLE_PREFIX}add-disabled-form`;
  2189.             Object.assign(addUrlForm.style, {
  2190.                 display: 'flex',
  2191.                 marginTop: '12px',
  2192.                 gap: '0'
  2193.             });
  2194.  
  2195.             const urlInput = document.createElement('input');
  2196.             urlInput.className = `${STYLE_PREFIX}add-disabled-input`;
  2197.             urlInput.id = 'add-url-input';
  2198.             urlInput.placeholder = '输入网址...';
  2199.             Object.assign(urlInput.style, {
  2200.                 flex: '1',
  2201.                 backgroundColor: 'rgba(255, 255, 255, 0.07)',
  2202.                 border: '1px solid rgba(255, 255, 255, 0.1)',
  2203.                 borderRadius: '4px 0 0 4px',
  2204.                 padding: '8px 12px',
  2205.                 fontSize: '13px',
  2206.                 color: '#fff',
  2207.                 outline: 'none'
  2208.             });
  2209.  
  2210.             const addUrlBtn = document.createElement('button');
  2211.             addUrlBtn.className = `${STYLE_PREFIX}add-disabled-button`;
  2212.             addUrlBtn.id = 'add-url-btn';
  2213.             addUrlBtn.textContent = '添加';
  2214.             Object.assign(addUrlBtn.style, {
  2215.                 backgroundColor: 'rgba(190, 60, 60, 0.8)',
  2216.                 color: '#f5e0e0',
  2217.                 border: 'none',
  2218.                 borderRadius: '0 4px 4px 0',
  2219.                 padding: '8px 16px',
  2220.                 fontSize: '13px',
  2221.                 fontWeight: '500',
  2222.                 cursor: 'pointer',
  2223.                 transition: 'all 0.2s ease'
  2224.             });
  2225.  
  2226.             addUrlForm.appendChild(urlInput);
  2227.             addUrlForm.appendChild(addUrlBtn);
  2228.  
  2229.             urlsSection.appendChild(urlsTitle);
  2230.             urlsSection.appendChild(urlsList);
  2231.             urlsSection.appendChild(addUrlForm);
  2232.             container.appendChild(urlsSection);
  2233.  
  2234.             // 绑定事件
  2235.             bindDisabledPanelEvents();
  2236.         }
  2237.  
  2238.         // 渲染当前页面状态
  2239.         function renderCurrentPageStatus() {
  2240.             const isDomainEnabled = enabledList.domains.includes(currentDomain);
  2241.             const isUrlEnabled = enabledList.urls.includes(currentPageUrl);
  2242.  
  2243.             if (isDomainEnabled || isUrlEnabled) {
  2244.                 return `
  2245.                     <div class="${STYLE_PREFIX}disabled-item">
  2246.                         <div class="${STYLE_PREFIX}disabled-info">
  2247.                             <span>${isDomainEnabled ? `此域名 (${currentDomain}) 已启用高亮` : '此网址已启用高亮'}</span>
  2248.                         </div>
  2249.                         <span class="${STYLE_PREFIX}disabled-action" data-type="${isDomainEnabled ? 'domain' : 'url'}" data-value="${isDomainEnabled ? currentDomain : currentPageUrl}">
  2250.                             禁用
  2251.                         </span>
  2252.                     </div>
  2253.                 `;
  2254.             } else {
  2255.                 return `
  2256.                     <div class="${STYLE_PREFIX}current-page-actions">
  2257.                         <button class="${STYLE_PREFIX}disable-btn" id="enable-domain-btn">
  2258.                             启用此域名
  2259.                         </button>
  2260.                         <button class="${STYLE_PREFIX}disable-btn" id="enable-url-btn">
  2261.                             启用此网址
  2262.                         </button>
  2263.                     </div>
  2264.                 `;
  2265.             }
  2266.         }
  2267.  
  2268.         // 渲染启用域名列表
  2269.         function renderEnabledDomains() {
  2270.             if (enabledList.domains.length === 0) {
  2271.                 return `<div class="${STYLE_PREFIX}empty-list">没有启用的域名</div>`;
  2272.             }
  2273.  
  2274.             return enabledList.domains.map(domain => `
  2275.                 <div class="${STYLE_PREFIX}disabled-item">
  2276.                     <div class="${STYLE_PREFIX}disabled-info">
  2277.                         <span>${domain}</span>
  2278.                     </div>
  2279.                     <span class="${STYLE_PREFIX}disabled-action" data-type="domain" data-value="${domain}">
  2280.                         删除
  2281.                     </span>
  2282.                 </div>
  2283.             `).join('');
  2284.         }
  2285.  
  2286.         // 渲染启用URL列表
  2287.         function renderEnabledUrls() {
  2288.             if (enabledList.urls.length === 0) {
  2289.                 return `<div class="${STYLE_PREFIX}empty-list">没有启用的网址</div>`;
  2290.             }
  2291.  
  2292.             return enabledList.urls.map(url => {
  2293.                 // 为了美观，截断过长的URL
  2294.                 const displayUrl = url.length > 40 ? url.substring(0, 37) + '...' : url;
  2295.  
  2296.                 return `
  2297.                     <div class="${STYLE_PREFIX}disabled-item" title="${url}">
  2298.                         <div class="${STYLE_PREFIX}disabled-info">
  2299.                             <span>${displayUrl}</span>
  2300.                         </div>
  2301.                         <span class="${STYLE_PREFIX}disabled-action" data-type="url" data-value="${url}">
  2302.                             删除
  2303.                         </span>
  2304.                     </div>
  2305.                 `;
  2306.             }).join('');
  2307.         }
  2308.  
  2309.         // 绑定启用管理面板事件
  2310.         function bindDisabledPanelEvents() {
  2311.             // 启用当前域名按钮
  2312.             const enableDomainBtn = document.getElementById('enable-domain-btn');
  2313.             if (enableDomainBtn) {
  2314.                 enableDomainBtn.addEventListener('click', () => {
  2315.                     if (confirm('确定要启用域名 "' + currentDomain + '" 的高亮功能吗？')) {
  2316.                         enableDomain(currentDomain);
  2317.                         renderEnabledPanel();
  2318.                     }
  2319.                 });
  2320.             }
  2321.  
  2322.             // 启用当前网址按钮
  2323.             const enableUrlBtn = document.getElementById('enable-url-btn');
  2324.             if (enableUrlBtn) {
  2325.                 enableUrlBtn.addEventListener('click', () => {
  2326.                     if (confirm('确定要启用当前网址的高亮功能吗？')) {
  2327.                         enableUrl(currentPageUrl);
  2328.                         renderEnabledPanel();
  2329.                     }
  2330.                 });
  2331.             }
  2332.  
  2333.             // 添加样式
  2334.             const styleSheet = document.createElement('style');
  2335.             styleSheet.textContent = `
  2336.                 #${STYLE_PREFIX}sidebar,
  2337.                 #${STYLE_PREFIX}sidebar *,
  2338.                 .${STYLE_PREFIX}disabled-section,
  2339.                 .${STYLE_PREFIX}disabled-title,
  2340.                 .${STYLE_PREFIX}disabled-title span,
  2341.                 .${STYLE_PREFIX}disabled-item,
  2342.                 .${STYLE_PREFIX}disabled-info,
  2343.                 .${STYLE_PREFIX}disabled-info span,
  2344.                 .${STYLE_PREFIX}empty-list,
  2345.                 .${STYLE_PREFIX}sidebar-tab,
  2346.                 .${STYLE_PREFIX}highlight-item {
  2347.                     color: #E8E9EB !important;
  2348.                 }
  2349.                 .${STYLE_PREFIX}disabled-item {
  2350.                     display: flex;
  2351.                     justify-content: space-between;
  2352.                     align-items: center;
  2353.                     padding: 8px 12px;
  2354.                     background-color: rgba(42, 46, 54, 0.4);
  2355.                     border-radius: 4px;
  2356.                     margin-bottom: 6px;
  2357.                     transition: all 0.2s ease;
  2358.                     border: 1px solid rgba(255, 255, 255, 0.03);
  2359.                 }
  2360.             
  2361.                 .${STYLE_PREFIX}disabled-item:hover {
  2362.                     background-color: rgba(59, 165, 216, 0.1);
  2363.                     border-color: rgba(59, 165, 216, 0.15);
  2364.                 }
  2365.             
  2366.                 .${STYLE_PREFIX}disabled-info {
  2367.                     display: flex;
  2368.                     align-items: center;
  2369.                     gap: 8px;
  2370.                     font-size: 13px;
  2371.                     color: #E8E9EB;
  2372.                     flex: 1;
  2373.                     overflow: hidden;
  2374.                     text-overflow: ellipsis;
  2375.                     white-space: nowrap;
  2376.                 }
  2377.             
  2378.                 .${STYLE_PREFIX}disabled-action {
  2379.                     color: #3BA5D8 !important;
  2380.                     font-size: 12px;
  2381.                     cursor: pointer;
  2382.                     padding: 2px 6px;
  2383.                     border-radius: 3px;
  2384.                     transition: all 0.2s;
  2385.                     opacity: 0.85;
  2386.                 }
  2387.             
  2388.                 .${STYLE_PREFIX}disabled-action:hover {
  2389.                     background-color: rgba(59, 165, 216, 0.15);
  2390.                     opacity: 1;
  2391.                 }
  2392.             
  2393.                 .${STYLE_PREFIX}empty-list {
  2394.                     padding: 10px;
  2395.                     color: #ADADB8 !important;
  2396.                     font-style: italic;
  2397.                     font-size: 13px;
  2398.                     text-align: center;
  2399.                     background-color: rgba(42, 46, 54, 0.2);
  2400.                     border-radius: 4px;
  2401.                 }
  2402.             
  2403.                 .${STYLE_PREFIX}current-page-actions {
  2404.                     display: flex;
  2405.                     gap: 10px;
  2406.                 }
  2407.             
  2408.                 .${STYLE_PREFIX}disable-btn {
  2409.                     flex: 1;
  2410.                     background: rgba(59, 165, 216, 0.12);
  2411.                     border: none;
  2412.                     border-radius: 4px;
  2413.                     padding: 8px 12px;
  2414.                     color: #3BA5D8;
  2415.                     font-size: 13px;
  2416.                     font-weight: 500;
  2417.                     cursor: pointer;
  2418.                     transition: all 0.2s ease;
  2419.                 }
  2420.             
  2421.                 .${STYLE_PREFIX}disable-btn:hover {
  2422.                     background-color: rgba(59, 165, 216, 0.2);
  2423.                 }
  2424.             
  2425.                 .${STYLE_PREFIX}add-disabled-input:focus {
  2426.                     border-color: #3BA5D8;
  2427.                     background-color: rgba(255, 255, 255, 0.1);
  2428.                 }
  2429.             
  2430.                 .${STYLE_PREFIX}add-disabled-button:hover {
  2431.                     background-color: #3BA5D8;
  2432.                 }
  2433.             `;
  2434.             document.head.appendChild(styleSheet);
  2435.  
  2436.             // 删除按钮事件
  2437.             document.querySelectorAll(`.${STYLE_PREFIX}disabled-action`).forEach(btn => {
  2438.                 btn.addEventListener('click', (e) => {
  2439.                     const type = e.target.dataset.type;
  2440.                     const value = e.target.dataset.value;
  2441.  
  2442.                     if (e.target.textContent.trim() === '删除') {
  2443.                         if (type === 'domain') {
  2444.                             enabledList.domains = enabledList.domains.filter(d => d !== value);
  2445.                         } else if (type === 'url') {
  2446.                             enabledList.urls = enabledList.urls.filter(u => u !== value);
  2447.                         }
  2448.                         saveEnabledList();
  2449.                         renderEnabledPanel();
  2450.                     } else if (e.target.textContent.trim() === '启用') {
  2451.                         if (type === 'domain') {
  2452.                             enableDomain(value);
  2453.                         } else if (type === 'url') {
  2454.                             enableUrl(value);
  2455.                         }
  2456.                         renderEnabledPanel();
  2457.                     } else if (e.target.textContent.trim() === '禁用') {
  2458.                         // 添加对禁用按钮的处理
  2459.                         if (type === 'domain') {
  2460.                             disableDomain(value);
  2461.                         } else if (type === 'url') {
  2462.                             disableUrl(value);
  2463.                         }
  2464.                         saveEnabledList();
  2465.                         renderEnabledPanel();
  2466.                     }
  2467.                 });
  2468.             });
  2469.  
  2470.             // 添加域名按钮
  2471.             const addDomainBtn = document.getElementById('add-domain-btn');
  2472.             if (addDomainBtn) {
  2473.                 Object.assign(addDomainBtn.style, {
  2474.                     backgroundColor: 'rgba(59, 165, 216, 0.8)',
  2475.                     color: '#f0f8ff',
  2476.                     border: 'none',
  2477.                     borderRadius: '0 4px 4px 0',
  2478.                     padding: '8px 16px',
  2479.                     fontSize: '13px',
  2480.                     fontWeight: '500',
  2481.                     cursor: 'pointer',
  2482.                     transition: 'all 0.2s ease'
  2483.                 });
  2484.                 addDomainBtn.addEventListener('click', () => {
  2485.                     const input = document.getElementById('add-domain-input');
  2486.                     const domain = input.value.trim();
  2487.  
  2488.                     if (domain) {
  2489.                         if (!enabledList.domains.includes(domain)) {
  2490.                             enabledList.domains.push(domain);
  2491.                             saveEnabledList();
  2492.                             input.value = '';
  2493.                             renderEnabledPanel();
  2494.                         } else {
  2495.                             alert('该域名已在启用列表中');
  2496.                         }
  2497.                     }
  2498.                 });
  2499.             }
  2500.  
  2501.             // 添加URL按钮
  2502.             const addUrlBtn = document.getElementById('add-url-btn');
  2503.             if (addUrlBtn) {
  2504.                 Object.assign(addUrlBtn.style, {
  2505.                     backgroundColor: 'rgba(59, 165, 216, 0.8)',
  2506.                     color: '#f0f8ff',
  2507.                 });
  2508.                 addUrlBtn.addEventListener('click', () => {
  2509.                     const input = document.getElementById('add-url-input');
  2510.                     const url = input.value.trim();
  2511.  
  2512.                     if (url) {
  2513.                         if (!enabledList.urls.includes(url)) {
  2514.                             enabledList.urls.push(url);
  2515.                             saveEnabledList();
  2516.                             input.value = '';
  2517.                             renderEnabledPanel();
  2518.                         } else {
  2519.                             alert('该网址已在启用列表中');
  2520.                         }
  2521.                     }
  2522.                 });
  2523.             }
  2524.  
  2525.             // 输入框回车事件
  2526.             const domainInput = document.getElementById('add-domain-input');
  2527.             if (domainInput) {
  2528.                 domainInput.addEventListener('keydown', (e) => {
  2529.                     if (e.key === 'Enter') {
  2530.                         document.getElementById('add-domain-btn').click();
  2531.                     }
  2532.                 });
  2533.             }
  2534.  
  2535.             const urlInput = document.getElementById('add-url-input');
  2536.             if (urlInput) {
  2537.                 urlInput.addEventListener('keydown', (e) => {
  2538.                     if (e.key === 'Enter') {
  2539.                         document.getElementById('add-url-btn').click();
  2540.                     }
  2541.                 });
  2542.             }
  2543.         }
  2544.  
  2545.         // 初始渲染启用管理面板
  2546.         renderEnabledPanel();
  2547.     }
  2548.  
  2549.     function init() {
  2550.         loadHighlights();
  2551.         registerEvents();
  2552.         if (document.readyState === 'complete') {
  2553.             setTimeout(() => {
  2554.                 applyHighlights();
  2555.                 observeDomChanges();
  2556.             }, 500);
  2557.         } else {
  2558.             window.addEventListener('load', () => {
  2559.                 setTimeout(() => {
  2560.                     applyHighlights();
  2561.                     observeDomChanges();
  2562.                 }, 500);
  2563.             });
  2564.         }
  2565.         // 注册(不可用)油猴菜单命令
  2566.         GM_registerMenuCommand('打开侧边栏', () => {
  2567.             toggleSidebar(true);
  2568.         });
  2569.         GM_registerMenuCommand('切换浮动按钮显示/隐藏', toggleFloatingButton);
  2570.         GM_registerMenuCommand('启用当前域名高亮', () => {
  2571.             if (enabledList.domains.includes(currentDomain)) {
  2572.                 alert(`当前域名(${currentDomain})已启用高亮功能`);
  2573.             } else {
  2574.                 if (confirm(`确定要启用当前域名(${currentDomain})的高亮功能吗?`)) {
  2575.                     enableDomain(currentDomain);
  2576.                 }
  2577.             }
  2578.         });
  2579.         GM_registerMenuCommand('启用当前网址高亮', () => {
  2580.             if (enabledList.urls.includes(currentPageUrl)) {
  2581.                 alert(`当前网址已启用高亮功能`);
  2582.             } else {
  2583.                 if (confirm(`确定要启用当前网址的高亮功能吗?`)) {
  2584.                     enableUrl(currentPageUrl);
  2585.                 }
  2586.             }
  2587.         });
  2588.     }
  2589.  
  2590.     init();
  2591.     createFloatingButtonAndSidebar();
  2592. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址