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.1",
+  "version": "0.0.7",
   "description": "A Endpoint for Yakit MITM or more",
   "options_ui": {
     "page": "proxy/options.html",
@@ -24,9 +24,18 @@
   },
   "content_scripts": [
     {
-      "matches": ["http://mitm/"],
+      "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.js

@@ -290,6 +290,16 @@ async function checkAndSetInitialProxy() {
         // 确保默认配置存在
         await ProxySettings.setDefaultConfigs();
 
+        // 获取上次保存的代理配置
+        const lastProxy = await proxyStore.getCurrentProxy();
+        
+        if (lastProxy) {
+            // 如果有上次的配置，恢复它
+            console.log('Restoring last proxy configuration:', lastProxy);
+            await handleSetProxyConfig(lastProxy, () => {});
+            return;
+        }
+
         // 获取当前的代理设置
         const settings = await getProxySettings();
         console.log('Current proxy settings:', settings);
@@ -338,7 +348,7 @@ async function checkAndSetInitialProxy() {
             }
         }
 
-        // 如果没有检测到代理或已存在配置，则设置为系统代理
+        // 如果没有之前的配置也没有检测到代理，才设置为系统代理
         await handleSetProxyConfig({
             id: 'system',
             name: '[系统代理]',
@@ -346,9 +356,6 @@ async function checkAndSetInitialProxy() {
             enabled: true
         }, () => {});
 
-        // 设置认证监听
-        await ProxyAuth.setupAuthListener();
-
     } catch (error) {
         console.error('Error during initialization:', error);
     }
@@ -356,10 +363,10 @@ async function checkAndSetInitialProxy() {
 
 // 修改 setupProxyHandlers 函数
 export function setupProxyHandlers() {
-    // 设置代理错误处理和认证
+    // 设置代理错误处理
     ProxyAuth.setupErrorHandler();
+    // 设置认证监听
     ProxyAuth.setupAuthListener();
-
     // 设置代理请求监听器
     setupProxyRequestListener();
 

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; 

public/proxy/proxy-settings.js

@@ -43,9 +43,9 @@ export class ProxySettings {
             ]);
         }
         // 确保日志存储已初始化
-        const logs = await proxyStore.getLogs();  // 使用 getLogs 而不是 getProxyLogs
+        const logs = await proxyStore.getLogs();
         if (!logs || logs.length === 0) {
-            await proxyStore.clearLogs();  // 初始化日志存储
+            await proxyStore.clearLogs();
         }
     }
 } 

src/components/ProxySwitch/index.tsx

@@ -237,21 +237,25 @@ export const ProxySwitch: React.FC<ProxySwitchProps> = () => {
     const menuItems: MenuProps['items'] = [
         ...FIXED_MODES.map(mode => ({
             key: mode.key,
-            icon: <span className="menu-icon" style={{ color: mode.color }}>{mode.icon}</span>,
-            label: mode.name,
+            icon: <span className="menu-icon" style={{ 
+                color: currentMode === mode.key ? 'var(--yakit-primary)' : mode.color
+            }}>{mode.icon}</span>,
+            label: `${mode.name}${currentMode === mode.key ? '  ✅' : ''}`,
             className: `${currentMode === mode.key ? 'menu-item-selected' : ''} ${isLoading ? 'menu-item-loading' : ''}`,
             title: mode.name.replace(/[\[\]]/g, '')
         })),
         { type: 'divider' },
         ...customProxies.map(proxy => ({
             key: proxy.key,
-            icon: <span className="menu-icon" style={{ color: proxy.color }}>
+            icon: <span className="menu-icon" style={{ 
+                color: currentMode === proxy.key ? 'var(--yakit-primary)' : proxy.color
+            }}>
                 {proxy.config.proxyType === 'pac_script' ? '📜' : <GlobalOutlined />}
             </span>,
             label: <span style={{ 
                 color: currentMode === proxy.key ? 'var(--yakit-primary)' : 'inherit',
                 opacity: isLoading ? 0.7 : 1
-            }}>{proxy.name}</span>,
+            }}>{proxy.name}{currentMode === proxy.key ? '  ✅' : ''}</span>,
             className: `${currentMode === proxy.key ? 'menu-item-selected' : ''} ${isLoading ? 'menu-item-loading' : ''}`,
             title: proxy.config.scheme 
                 ? `${proxy.config.scheme.toUpperCase()} ${proxy.config.host}:${proxy.config.port}`

src/pages/OptionsPage/components/ProxySettings/index.tsx

@@ -107,7 +107,7 @@ export const ProxySettings: React.FC<ProxySettingsProps> = ({
                     // 处理固定代理服务器模式
                     const bypassList = values.bypassList
                         ? values.bypassList.split('\n').map(line => line.trim()).filter(line => line.length > 0)
-                        : ["localhost", "127.0.0.1"];
+                        : [""];
 
                     updatedConfig = {
                         id: editingConfig.id,