feat: 完善MeNav浏览器扩展API规范实现

src/script.js

@@ -8,24 +8,56 @@ window.MeNav = {
         return configData ? JSON.parse(configData.textContent) : null;
     },
 
-    // 更新DOM元素
+    // 获取元素的唯一标识符
-    updateElement: function(id, newData) {
+    _getElementId: function(element) {
-        const element = document.querySelector(`[data-menav-id="${id}"]`);
+        const type = element.getAttribute('data-type');
-        if (!element) return false;
+        if (type === 'nav-item') {
+            return element.getAttribute('data-id');
+        } else if (type === 'social-link') {
+            return element.getAttribute('data-url');
+        } else {
+            return element.getAttribute('data-name');
+        }
+    },
 
-        // 根据元素类型更新内容
+    // 根据类型和ID查找元素
-        const type = element.getAttribute('data-menav-type');
+    _findElement: function(type, id) {
+        let selector;
+        if (type === 'nav-item') {
+            selector = `[data-type="${type}"][data-id="${id}"]`;
+        } else if (type === 'social-link') {
+            selector = `[data-type="${type}"][data-url="${id}"]`;
+        } else {
+            selector = `[data-type="${type}"][data-name="${id}"]`;
+        }
+        return document.querySelector(selector);
+    },
+
+    // 更新DOM元素
+    updateElement: function(type, id, newData) {
+        const element = this._findElement(type, id);
+        if (!element) return false;
 
         if (type === 'site') {
             // 更新站点卡片
-            if (newData.url) element.href = newData.url;
+            if (newData.url) {
-            if (newData.name) element.querySelector('h3').textContent = newData.name;
+                element.href = newData.url;
-            if (newData.description) element.querySelector('p').textContent = newData.description;
+                element.setAttribute('data-url', newData.url);
+            }
+            if (newData.name) {
+                element.querySelector('h3').textContent = newData.name;
+                element.setAttribute('data-name', newData.name);
+            }
+            if (newData.description) {
+                element.querySelector('p').textContent = newData.description;
+                element.setAttribute('data-description', newData.description);
+            }
             if (newData.icon) {
                 const iconElement = element.querySelector('i');
                 if (iconElement) {
                     iconElement.className = newData.icon;
                 }
+                element.setAttribute('data-icon', newData.icon);
             }
             if (newData.title) element.title = newData.title;
 
@@ -47,6 +79,10 @@ window.MeNav = {
                     const iconClass = iconElement ? iconElement.className : '';
                     titleElement.innerHTML = `<i class="${newData.icon || iconClass}"></i> ${newData.name}`;
                 }
+                element.setAttribute('data-name', newData.name);
+            }
+            if (newData.icon) {
+                element.setAttribute('data-icon', newData.icon);
             }
 
             // 触发元素更新事件
@@ -56,6 +92,60 @@ window.MeNav = {
                 data: newData
             });
 
+            return true;
+        } else if (type === 'nav-item') {
+            // 更新导航项
+            if (newData.name) {
+                const textElement = element.querySelector('.nav-text');
+                if (textElement) {
+                    textElement.textContent = newData.name;
+                }
+                element.setAttribute('data-name', newData.name);
+            }
+            if (newData.icon) {
+                const iconElement = element.querySelector('i');
+                if (iconElement) {
+                    iconElement.className = newData.icon;
+                }
+                element.setAttribute('data-icon', newData.icon);
+            }
+
+            // 触发元素更新事件
+            this.events.emit('elementUpdated', {
+                id: id,
+                type: 'nav-item',
+                data: newData
+            });
+
+            return true;
+        } else if (type === 'social-link') {
+            // 更新社交链接
+            if (newData.url) {
+                element.href = newData.url;
+                element.setAttribute('data-url', newData.url);
+            }
+            if (newData.name) {
+                const textElement = element.querySelector('.nav-text');
+                if (textElement) {
+                    textElement.textContent = newData.name;
+                }
+                element.setAttribute('data-name', newData.name);
+            }
+            if (newData.icon) {
+                const iconElement = element.querySelector('i');
+                if (iconElement) {
+                    iconElement.className = newData.icon;
+                }
+                element.setAttribute('data-icon', newData.icon);
+            }
+
+            // 触发元素更新事件
+            this.events.emit('elementUpdated', {
+                id: id,
+                type: 'social-link',
+                data: newData
+            });
+
             return true;
         }
 
@@ -64,12 +154,15 @@ window.MeNav = {
 
     // 添加新元素
     addElement: function(type, parentId, data) {
-        const parent = document.querySelector(`[data-menav-id="${parentId}"]`);
+        let parent;
-        if (!parent) return null;
+        
+        if (type === 'site') {
+            // 查找父级分类
+            parent = document.querySelector(`[data-type="category"][data-name="${parentId}"]`);
+            if (!parent) return null;
 
-        if (type === 'site' && parent.getAttribute('data-menav-type') === 'category') {
             // 添加站点卡片到分类
-            const sitesGrid = parent.querySelector('.sites-grid');
+            const sitesGrid = parent.querySelector('[data-container="sites"]');
             if (!sitesGrid) return null;
 
             // 创建新的站点卡片
@@ -77,10 +170,13 @@ window.MeNav = {
             newSite.className = 'site-card';
             newSite.href = data.url || '#';
             newSite.title = data.name + (data.description ? ' - ' + data.description : '');
-            const elementId = `site-new-${Date.now()}`;
+            
-            newSite.setAttribute('data-menav-id', elementId);
+            // 设置数据属性
-            newSite.setAttribute('data-menav-type', 'site');
+            newSite.setAttribute('data-type', 'site');
-            newSite.setAttribute('data-menav-category', parent.id);
+            newSite.setAttribute('data-name', data.name || '未命名站点');
+            newSite.setAttribute('data-url', data.url || '');
+            newSite.setAttribute('data-icon', data.icon || 'fas fa-link');
+            newSite.setAttribute('data-description', data.description || '');
 
             // 添加内容
             newSite.innerHTML = `
@@ -100,26 +196,65 @@ window.MeNav = {
 
             // 触发元素添加事件
             this.events.emit('elementAdded', {
-                id: elementId,
+                id: data.name,
                 type: 'site',
                 parentId: parentId,
                 data: data
             });
 
-            return elementId;
+            return data.name;
+        } else if (type === 'category') {
+            // 查找父级页面容器
+            parent = document.querySelector(`[data-container="categories"]`);
+            if (!parent) return null;
+
+            // 创建新的分类
+            const newCategory = document.createElement('section');
+            newCategory.className = 'category';
+            
+            // 设置数据属性
+            newCategory.setAttribute('data-type', 'category');
+            newCategory.setAttribute('data-name', data.name || '未命名分类');
+            newCategory.setAttribute('data-icon', data.icon || 'fas fa-folder');
+            newCategory.setAttribute('data-container', 'categories');
+
+            // 添加内容
+            newCategory.innerHTML = `
+                <h2 data-editable="category-name"><i class="${data.icon || 'fas fa-folder'}"></i> ${data.name || '未命名分类'}</h2>
+                <div class="sites-grid" data-container="sites">
+                    <p class="empty-sites">暂无网站</p>
+                </div>
+            `;
+
+            // 添加到DOM
+            parent.appendChild(newCategory);
+
+            // 触发元素添加事件
+            this.events.emit('elementAdded', {
+                id: data.name,
+                type: 'category',
+                data: data
+            });
+
+            return data.name;
         }
 
         return null;
     },
 
     // 删除元素
-    removeElement: function(id) {
+    removeElement: function(type, id) {
-        const element = document.querySelector(`[data-menav-id="${id}"]`);
+        const element = this._findElement(type, id);
         if (!element) return false;
 
-        // 获取元素类型和分类（如果是站点卡片）
+        // 获取父级容器（如果是站点卡片）
-        const type = element.getAttribute('data-menav-type');
+        let parentId = null;
-        const category = element.getAttribute('data-menav-category');
+        if (type === 'site') {
+            const categoryElement = element.closest('[data-type="category"]');
+            if (categoryElement) {
+                parentId = categoryElement.getAttribute('data-name');
+            }
+        }
 
         // 删除元素
         element.remove();
@@ -128,7 +263,7 @@ window.MeNav = {
         this.events.emit('elementRemoved', {
             id: id,
             type: type,
-            category: category
+            parentId: parentId
         });
 
         return true;
@@ -136,10 +271,11 @@ window.MeNav = {
 
     // 获取所有元素
     getAllElements: function(type) {
-        return Array.from(document.querySelectorAll(`[data-menav-type="${type}"]`)).map(el => {
+        return Array.from(document.querySelectorAll(`[data-type="${type}"]`)).map(el => {
+            const id = this._getElementId(el);
             return {
-                id: el.getAttribute('data-menav-id'),
+                id: id,
-                type: el.getAttribute('data-menav-type'),
+                type: type,
                 element: el
             };
         });

templates/components/category.hbs

@@ -1,6 +1,6 @@
-<section class="category" id="{{name}}" data-menav-id="category-{{@index}}" data-menav-type="category">
+<section class="category" id="{{name}}" data-type="category" data-name="{{name}}" data-icon="{{icon}}" data-container="categories">
-    <h2><i class="{{icon}}"></i> {{name}}</h2>
+    <h2 data-editable="category-name"><i class="{{icon}}"></i> {{name}}</h2>
-    <div class="sites-grid" data-menav-category="{{name}}">
+    <div class="sites-grid" data-container="sites">
         {{#if sites.length}}
             {{#each sites}}
                 {{> site-card}}

templates/components/navigation.hbs

@@ -1,10 +1,11 @@
+<div data-container="nav-items">
 {{#each this}}
 <div class="nav-item-wrapper">
-    <a href="#" class="nav-item{{#if isActive}} active{{/if}}{{#if active}} active{{/if}}" data-page="{{id}}">
+    <a href="#" class="nav-item{{#if isActive}} active{{/if}}{{#if active}} active{{/if}}" data-page="{{id}}" data-type="nav-item" data-id="{{id}}" data-name="{{name}}" data-icon="{{icon}}">
         <div class="icon-container">
             <i class="{{icon}}"></i>
         </div>
-        <span class="nav-text">{{name}}</span>
+        <span class="nav-text" data-editable="nav-item-name">{{name}}</span>
         {{#if submenu}}<i class="fas fa-chevron-down submenu-toggle"></i>{{/if}}
     </a>
     {{#if submenu}}
@@ -19,3 +20,4 @@
     {{/if}}
 </div>
 {{/each}} 
+</div> 

templates/components/search-results.hbs

@@ -1,11 +1,11 @@
 <!-- 搜索结果组件 -->
 <div class="welcome-section">
-    <h2>搜索结果</h2>
+    <h2 data-editable="page-title">搜索结果</h2>
-    <p class="subtitle">在所有页面中找到的匹配项</p>
+    <p class="subtitle" data-editable="page-subtitle">在所有页面中找到的匹配项</p>
 </div>
 {{#each navigation}}
-<section class="category search-section" data-section="{{id}}" style="display: none;">
+<section class="category search-section" data-section="{{id}}" data-type="category" data-name="{{name}}" data-icon="{{icon}}" style="display: none;">
-    <h2><i class="{{icon}}"></i> {{name}}匹配项</h2>
+    <h2 data-editable="category-name"><i class="{{icon}}"></i> {{name}}匹配项</h2>
-    <div class="sites-grid"></div>
+    <div class="sites-grid" data-container="sites"></div>
 </section>
 {{/each}} 

templates/components/site-card.hbs

@@ -2,9 +2,11 @@
 <a href="{{url}}" class="site-card{{#if style}} site-card-{{style}}{{/if}}"
    title="{{name}} - {{#if description}}{{description}}{{else}}{{url}}{{/if}}"
    {{#if external}}target="_blank" rel="noopener"{{/if}}
-   data-menav-id="site-{{@index}}"
+   data-type="site"
-   data-menav-type="site"
+   data-name="{{name}}"
-   data-menav-category="{{../name}}">
+   data-url="{{url}}"
+   data-icon="{{#if icon}}{{icon}}{{else}}fas fa-link{{/if}}"
+   data-description="{{#if description}}{{description}}{{else}}{{url}}{{/if}}">
     <i class="{{#if icon}}{{icon}}{{else}}fas fa-link{{/if}}"></i>
     <h3>{{#if name}}{{name}}{{else}}未命名站点{{/if}}</h3>
     <p>{{#if description}}{{description}}{{else}}{{url}}{{/if}}</p>

templates/components/social-links.hbs

@@ -1,11 +1,13 @@
 {{#if this}}
+<div data-container="social-links">
 {{#each this}}
-<a href="{{url}}" class="nav-item" target="_blank" rel="noopener">
+<a href="{{url}}" class="nav-item" target="_blank" rel="noopener" data-type="social-link" data-name="{{name}}" data-url="{{url}}" data-icon="{{icon}}">
     <div class="icon-container">
         <i class="{{icon}}"></i>
     </div>
-    <span class="nav-text">{{name}}</span>
+    <span class="nav-text" data-editable="social-link-name">{{name}}</span>
     <i class="fas fa-external-link-alt external-icon"></i>
 </a>
 {{/each}}
+</div>
 {{/if}} 

templates/layouts/default.hbs

@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="menav-version" content="{{_meta.version}}">
     <title>{{site.title}}</title>
     <link rel="icon" href="./favicon.ico" type="image/x-icon">
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
@@ -53,7 +54,7 @@
         <!-- 左侧导航 -->
         <nav class="sidebar">
             <div class="logo">
-                <h1>{{site.logo_text}}</h1>
+                <h1 data-editable="logo-text">{{site.logo_text}}</h1>
                 <button class="sidebar-toggle" aria-label="收起/展开侧边栏">
                     <i class="fas fa-chevron-left toggle-icon"></i>
                 </button>

templates/pages/articles.hbs

@@ -1,6 +1,6 @@
 <div class="welcome-section">
-    <h2>{{title}}</h2>
+    <h2 data-editable="page-title">{{title}}</h2>
-    <p class="subtitle">{{subtitle}}</p>
+    <p class="subtitle" data-editable="page-subtitle">{{subtitle}}</p>
 </div>
 {{#each categories}}
     {{> category}}

templates/pages/bookmarks.hbs

@@ -1,6 +1,6 @@
 <div class="welcome-section">
-    <h2>{{title}}</h2>
+    <h2 data-editable="page-title">{{title}}</h2>
-    <p class="subtitle">{{subtitle}}</p>
+    <p class="subtitle" data-editable="page-subtitle">{{subtitle}}</p>
 </div>
 {{#each categories}}
     {{> category}}

templates/pages/friends.hbs

@@ -1,6 +1,6 @@
 <div class="welcome-section">
-    <h2>{{title}}</h2>
+    <h2 data-editable="page-title">{{title}}</h2>
-    <p class="subtitle">{{subtitle}}</p>
+    <p class="subtitle" data-editable="page-subtitle">{{subtitle}}</p>
 </div>
 {{#each categories}}
     {{> category}}

templates/pages/home.hbs

@@ -1,7 +1,7 @@
 <div class="welcome-section">
-    <h2>{{profile.title}}</h2>
+    <h2 data-editable="profile-title">{{profile.title}}</h2>
-    <h3>{{profile.subtitle}}</h3>
+    <h3 data-editable="profile-subtitle">{{profile.subtitle}}</h3>
-    <p class="subtitle">{{profile.description}}</p>
+    <p class="subtitle" data-editable="profile-description">{{profile.description}}</p>
 </div>
 {{#each categories}}
     {{> category}}

templates/pages/page.hbs

@@ -1,7 +1,7 @@
 <div class="page" id="{{pageId}}">
     <div class="welcome-section">
-        <h2>{{title}}</h2>
+        <h2 data-editable="page-title">{{title}}</h2>
-        <p class="subtitle">{{subtitle}}</p>
+        <p class="subtitle" data-editable="page-subtitle">{{subtitle}}</p>
     </div>
     {{#each categories}}
         {{> category}}

templates/pages/projects.hbs

@@ -1,6 +1,6 @@
 <div class="welcome-section">
-    <h2>{{title}}</h2>
+    <h2 data-editable="page-title">{{title}}</h2>
-    <p class="subtitle">{{subtitle}}</p>
+    <p class="subtitle" data-editable="page-subtitle">{{subtitle}}</p>
 </div>
 {{#each categories}}
     {{> category}}

templates/pages/search-results.hbs

@@ -1,11 +1,11 @@
 <!-- 搜索结果页 -->
 <div class="welcome-section">
-    <h2>搜索结果</h2>
+    <h2 data-editable="page-title">搜索结果</h2>
-    <p class="subtitle">在所有页面中找到的匹配项</p>
+    <p class="subtitle" data-editable="page-subtitle">在所有页面中找到的匹配项</p>
 </div>
 {{#each navigation}}
-<section class="category search-section" data-section="{{id}}" style="display: none;">
+<section class="category search-section" data-section="{{id}}" data-type="category" data-name="{{name}}" data-icon="{{icon}}" style="display: none;">
-    <h2><i class="{{icon}}"></i> {{name}}匹配项</h2>
+    <h2 data-editable="category-name"><i class="{{icon}}"></i> {{name}}匹配项</h2>
-    <div class="sites-grid"></div>
+    <div class="sites-grid" data-container="sites"></div>
 </section>
 {{/each}}