Refactor proxy panel to include a new links tab with dynamic content loading and improved styling for better user interaction

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Yakit Chrome Endpoint",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "A Endpoint for Yakit MITM or more",
   "options_ui": {
     "page": "proxy/options.html",
@@ -26,7 +26,16 @@
     {
       "matches": ["<all_urls>","http://mitm/"],
       "run_at": "document_start",
-      "js": ["proxy/content.js"]
+      "js": [
+        "proxy/links_finder.js"
+      ]
+    },
+    {
+      "matches": ["<all_urls>","http://mitm/"],
+      "run_at": "document_end",
+      "js": [
+        "proxy/content.js"
+      ]
     }
   ],
   "permissions": [

public/proxy/links_finder.js

@@ -0,0 +1,213 @@
+// Links Finder Module
+class LinksFinder {
+    constructor() {
+        this.links = [];
+        this.lastUpdate = null;
+    }
+
+    // 获取页面所有链接
+    getAllLinks() {
+        const links = [];
+        const seen = new Set();
+
+        // 获取所有 a 标签
+        document.querySelectorAll('a').forEach(a => {
+            const href = a.href;
+            if (href && !seen.has(href) && href.startsWith('http')) {
+                seen.add(href);
+                links.push({
+                    type: 'anchor',
+                    url: href,
+                    text: a.textContent.trim() || href,
+                });
+            }
+        });
+
+        // 获取所有图片链接
+        document.querySelectorAll('img').forEach(img => {
+            const src = img.src;
+            if (src && !seen.has(src) && src.startsWith('http')) {
+                seen.add(src);
+                links.push({
+                    type: 'image',
+                    url: src,
+                    alt: img.alt || 'Image',
+                });
+            }
+        });
+
+        // 获取所有脚本链接
+        document.querySelectorAll('script').forEach(script => {
+            const src = script.src;
+            if (src && !seen.has(src) && src.startsWith('http')) {
+                seen.add(src);
+                links.push({
+                    type: 'script',
+                    url: src,
+                });
+            }
+        });
+
+        // 获取所有样式表链接
+        document.querySelectorAll('link[rel="stylesheet"]').forEach(link => {
+            const href = link.href;
+            if (href && !seen.has(href) && href.startsWith('http')) {
+                seen.add(href);
+                links.push({
+                    type: 'stylesheet',
+                    url: href,
+                });
+            }
+        });
+
+        this.links = links;
+        this.lastUpdate = new Date();
+        return links;
+    }
+
+    // 按类型过滤链接
+    filterLinksByType(type) {
+        return this.links.filter(link => link.type === type);
+    }
+
+    // 获取链接统计信息
+    getLinkStats() {
+        const stats = {
+            total: this.links.length,
+            byType: {}
+        };
+
+        this.links.forEach(link => {
+            if (!stats.byType[link.type]) {
+                stats.byType[link.type] = 0;
+            }
+            stats.byType[link.type]++;
+        });
+
+        return stats;
+    }
+
+    // 构建链接面板的 HTML
+    buildLinksPanel() {
+        const links = this.getAllLinks();
+        const stats = this.getLinkStats();
+
+        let html = `
+            <div class="links-stats">
+                <div class="stats-item">
+                    <span>🔗</span>
+                    <span>总链接: ${stats.total}</span>
+                </div>
+            </div>
+            <div class="links-filters">
+                <button class="filter-btn active" data-type="all">
+                    <span>🔍</span>
+                    <span>全部 (${stats.total})</span>
+                </button>
+                ${Object.entries(stats.byType).map(([type, count]) => `
+                    <button class="filter-btn" data-type="${type}">
+                        <span>${this._getTypeIcon(type)}</span>
+                        <span>${this._getTypeName(type)} (${count})</span>
+                    </button>
+                `).join('')}
+            </div>
+            <div class="links-list">
+                ${links.map(link => this._buildLinkItem(link)).join('')}
+            </div>
+        `;
+
+        return html;
+    }
+
+    // 获取链接类型图标
+    _getTypeIcon(type) {
+        const icons = {
+            anchor: '🔗',
+            image: '🖼️',
+            script: '📜',
+            stylesheet: '🎨'
+        };
+        return icons[type] || '🔗';
+    }
+
+    // 获取链接类型名称
+    _getTypeName(type) {
+        const names = {
+            anchor: '链接',
+            image: '图片',
+            script: '脚本',
+            stylesheet: '样式'
+        };
+        return names[type] || type;
+    }
+
+    // 构建单个链接项的 HTML
+    _buildLinkItem(link) {
+        return `
+            <div class="link-item" data-type="${link.type}">
+                <div class="link-icon">${this._getTypeIcon(link.type)}</div>
+                <div class="link-content">
+                    <div class="link-url" title="${link.url}">${link.url}</div>
+                    ${link.text ? `<div class="link-text" title="${link.text}">${link.text}</div>` : ''}
+                    ${link.alt ? `<div class="link-alt" title="${link.alt}">${link.alt}</div>` : ''}
+                </div>
+                <button class="copy-btn" data-url="${link.url}" title="复制链接">📋</button>
+            </div>
+        `;
+    }
+
+    // 绑定事件处理
+    bindEvents(container) {
+        // 过滤按钮点击事件
+        container.querySelectorAll('.filter-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const type = btn.dataset.type;
+                console.log('Filter clicked:', type);
+                
+                // 更新按钮状态
+                container.querySelectorAll('.filter-btn').forEach(b => {
+                    b.classList.remove('active');
+                });
+                btn.classList.add('active');
+
+                // 过滤链接显示
+                container.querySelectorAll('.link-item').forEach(item => {
+                    if (type === 'all' || item.dataset.type === type) {
+                        item.removeAttribute('data-hidden');
+                    } else {
+                        item.setAttribute('data-hidden', 'true');
+                    }
+                });
+            });
+        });
+
+        // 复制按钮点击事件
+        container.querySelectorAll('.copy-btn').forEach(btn => {
+            btn.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                const url = btn.dataset.url;
+                try {
+                    await navigator.clipboard.writeText(url);
+                    const originalText = btn.textContent;
+                    btn.textContent = '✓';
+                    btn.style.setProperty('color', '#52c41a', 'important');
+                    setTimeout(() => {
+                        btn.textContent = originalText;
+                        btn.style.removeProperty('color');
+                    }, 1000);
+                } catch (err) {
+                    console.error('Failed to copy:', err);
+                    btn.textContent = '❌';
+                    setTimeout(() => {
+                        btn.textContent = '📋';
+                    }, 1000);
+                }
+            });
+        });
+    }
+}
+
+console.log("LinksFinder module loaded");
+// 导出模块
+window.LinksFinder = LinksFinder;