Refactor proxy panel positioning to use setProperty with !important for consistent styling during drag operations

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Yakit Chrome Endpoint",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "A Endpoint for Yakit MITM or more",
   "options_ui": {
     "page": "proxy/options.html",

public/proxy/content.js

@@ -208,6 +208,8 @@ console.log("Content script starting...");
             // 创建容器
             const container = document.createElement("div");
             container.id = "yakit-proxy-panel";
+            // 添加高z-index确保在页面最上层
+            container.style.zIndex = "2147483647";
 
             // 创建 shadow DOM
             const shadow = container.attachShadow({mode: "open"});
@@ -215,36 +217,59 @@ console.log("Content script starting...");
             // 添加样式
             const style = document.createElement("style");
             style.textContent = `
+            /* 重置所有样式以避免宿主页面的CSS影响 */
+            .yak-proxy-root * {
+                all: initial;
+                box-sizing: border-box !important;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+                line-height: normal !important;
+                color: initial !important;
+                font-size: 14px !important;
+                text-align: left !important;
+                margin: 0 !important;
+                padding: 0 !important;
+                border: none !important;
+                outline: none !important;
+                text-decoration: none !important;
+                width: auto !important;
+                height: auto !important;
+                min-width: auto !important;
+                min-height: auto !important;
+                max-width: none !important;
+                max-height: none !important;
+                background: none !important;
+            }
+            
             .floating-panel {
-                position: fixed;
+                position: fixed !important;
-                top: 30%;
+                top: 30% !important;
-                right: 0;
+                right: 0 !important;
-                transform: translateY(-30%);
+                transform: translateY(-30%) !important;
-                background: white;
+                background: white !important;
-                z-index: 2147483647;
+                z-index: 2147483647 !important;
-                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+                width: 50px !important;
-                width: 50px;
+                height: 40px !important;
-                height: 40px;
+                overflow: hidden !important;
-                overflow: hidden;
                 transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                             height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-                            background-color 0.2s ease;
+                            background-color 0.2s ease !important;
+                box-sizing: border-box !important;
             }
 
             /* 吸附状态 */
             .floating-panel:not(.expanded):not(.dragging) {
-                border-radius: 50px 0 0 50px;
+                border-radius: 50px 0 0 50px !important;
-                box-shadow: -4px 0 20px rgba(0,0,0,0.15);
+                box-shadow: -4px 0 20px rgba(0,0,0,0.15) !important;
-                border: 1px solid #eee;
+                border: 1px solid #eee !important;
-                border-right: none;
+                border-right: none !important;
             }
 
             /* 拖动状态 */
             .floating-panel.dragging {
                 cursor: grabbing !important;
-                user-select: none;
+                user-select: none !important;
-                opacity: 0.95;
+                opacity: 0.95 !important;
-                transition: none;
+                transition: none !important;
             }
 
             .floating-panel.dragging * {
@@ -252,203 +277,219 @@ console.log("Content script starting...");
             }
 
             .floating-panel:active {
-                cursor: grabbing;
+                cursor: grabbing !important;
             }
 
             .floating-panel .panel-header {
-                cursor: grab;
+                cursor: grab !important;
             }
 
             .floating-panel .panel-header:active {
-                cursor: grabbing;
+                cursor: grabbing !important;
             }
 
             /* 吸附状态悬浮时 */
             .floating-panel:not(.expanded):hover {
-                width: 120px;
+                width: 120px !important;
-                background: #fff7e6;
+                background: #fff7e6 !important;
-                border-color: #ffd591;
+                border-color: #ffd591 !important;
             }
 
             /* 展开状态 - 立即应用圆角变化 */
             .floating-panel.expanded {
-                width: 180px;
+                width: 180px !important;
-                height: auto;
+                height: auto !important;
-                max-height: 400px;
+                max-height: 400px !important;
-                border-radius: 8px 0 0 8px;
+                border-radius: 8px 0 0 8px !important;
-                box-shadow: -2px 0 10px rgba(0,0,0,0.1);
+                box-shadow: -2px 0 10px rgba(0,0,0,0.1) !important;
-                border: 1px solid #eee;
+                border: 1px solid #eee !important;
-                border-right: none;
+                border-right: none !important;
                 /* 展开时立即应用新的圆角 */
                 transition: 
                     width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                     height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                     border-radius 0s,
-                    background-color 0.2s ease;
+                    background-color 0.2s ease !important;
             }
 
             .panel-header {
-                height: 40px;
+                height: 40px !important;
-                min-height: 40px;
+                min-height: 40px !important;
-                display: flex;
+                display: flex !important;
-                align-items: center;
+                align-items: center !important;
-                padding: 0 8px;
+                padding: 0 8px !important;
-                cursor: pointer;
+                cursor: pointer !important;
-                user-select: none;
+                user-select: none !important;
             }
 
             /* 吸附状态的头部 */
             .floating-panel:not(.expanded) .panel-header {
-                background: transparent;
+                background: transparent !important;
             }
 
             /* 展开状态的头部 */
             .floating-panel.expanded .panel-header {
-                background: #f8f9fa;
+                background: #f8f9fa !important;
-                border-bottom: 1px solid #eee;
+                border-bottom: 1px solid #eee !important;
             }
 
             .header-content {
-                display: flex;
+                display: flex !important;
-                align-items: center;
+                align-items: center !important;
-                flex: 1;
+                flex: 1 !important;
-                overflow: hidden;
+                overflow: hidden !important;
             }
 
             /* 优化图标大小过渡 */
             .yak-icon {
-                width: 36px;
+                width: 36px !important;
-                height: 36px;
+                height: 36px !important;
-                min-width: 36px;
+                min-width: 36px !important;
-                object-fit: contain;
+                object-fit: contain !important;
-                filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
+                filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)) !important;
-                transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+                transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
             }
 
             .floating-panel.expanded .yak-icon {
-                width: 24px;
+                width: 24px !important;
-                height: 24px;
+                height: 24px !important;
-                min-width: 24px;
+                min-width: 24px !important;
             }
 
             .active-proxy-info {
-                display: flex;
+                display: flex !important;
-                align-items: center;
+                align-items: center !important;
-                margin-left: 8px;
+                margin-left: 8px !important;
-                white-space: nowrap;
+                white-space: nowrap !important;
-                overflow: hidden;
+                overflow: hidden !important;
-                text-overflow: ellipsis;
+                text-overflow: ellipsis !important;
-                color: #ff6b00;
+                color: #ff6b00 !important;
-                font-size: 13px;
+                font-size: 13px !important;
-                font-weight: 500;
+                font-weight: 500 !important;
             }
 
             .active-proxy-info span:first-child {
-                margin-right: 6px;
+                margin-right: 6px !important;
-                filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
+                filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)) !important;
             }
 
             .panel-content {
-                display: none;
+                display: none !important;
-                background: white;
+                background: white !important;
-                overflow-y: auto;
+                overflow-y: auto !important;
-                max-height: 360px;
+                max-height: 360px !important;
-                opacity: 0;
+                opacity: 0 !important;
-                transition: opacity 0.2s ease;
+                transition: opacity 0.2s ease !important;
             }
 
             .floating-panel.expanded .panel-content {
-                display: block;
+                display: block !important;
-                opacity: 1;
+                opacity: 1 !important;
             }
 
             .panel-content::-webkit-scrollbar {
-                width: 4px;
+                width: 4px !important;
             }
 
             .panel-content::-webkit-scrollbar-track {
-                background: #f5f5f5;
+                background: #f5f5f5 !important;
             }
 
             .panel-content::-webkit-scrollbar-thumb {
-                background: #ddd;
+                background: #ddd !important;
-                border-radius: 4px;
+                border-radius: 4px !important;
             }
 
             .panel-content::-webkit-scrollbar-thumb:hover {
-                background: #ccc;
+                background: #ccc !important;
             }
 
             .proxy-item {
-                display: flex;
+                display: flex !important;
-                align-items: center;
+                align-items: center !important;
-                padding: 8px 12px;
+                padding: 8px 12px !important;
-                cursor: pointer;
+                cursor: pointer !important;
-                transition: all 0.2s;
+                transition: all 0.2s !important;
-                white-space: nowrap;
+                white-space: nowrap !important;
-                position: relative;
+                position: relative !important;
             }
 
             .proxy-item:hover {
-                background: #fff7e6;
+                background: #fff7e6 !important;
             }
 
             .proxy-item.active {
-                background: #fff7e6;
+                background: #fff7e6 !important;
-                color: #ff6b00;
+                color: #ff6b00 !important;
+            }
+
+            .proxy-item.active span {
+                color: #ff6b00 !important;
             }
 
             .proxy-item span:first-child {
-                margin-right: 8px;
+                margin-right: 8px !important;
-                font-size: 16px;
+                font-size: 16px !important;
-                filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
+                filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)) !important;
+            }
+
+            .proxy-item span {
+                color: #333 !important;
             }
 
             .proxy-status {
-                position: absolute;
+                position: absolute !important;
-                right: 12px;
+                right: 12px !important;
-                width: 6px;
+                width: 6px !important;
-                height: 6px;
+                height: 6px !important;
-                border-radius: 50%;
+                border-radius: 50% !important;
-                background: #52c41a;
+                background: #52c41a !important;
-                box-shadow: 0 0 4px rgba(82,196,26,0.3);
+                box-shadow: 0 0 4px rgba(82,196,26,0.3) !important;
             }
 
             .proxy-item.active .proxy-status {
-                background: #ff6b00;
+                background: #ff6b00 !important;
-                box-shadow: 0 0 4px rgba(255,107,0,0.3);
+                box-shadow: 0 0 4px rgba(255,107,0,0.3) !important;
             }
 
             .divider {
-                height: 1px;
+                height: 1px !important;
-                background: #f0f0f0;
+                background: #f0f0f0 !important;
-                margin: 4px 0;
+                margin: 4px 0 !important;
             }
 
             .action-button {
-                display: flex;
+                display: flex !important;
-                align-items: center;
+                align-items: center !important;
-                padding: 8px 12px;
+                padding: 8px 12px !important;
-                cursor: pointer;
+                cursor: pointer !important;
-                transition: all 0.2s;
+                transition: all 0.2s !important;
-                white-space: nowrap;
+                white-space: nowrap !important;
-                color: #666;
+                color: #666 !important;
             }
 
             .action-button:hover {
-                background: #fff7e6;
+                background: #fff7e6 !important;
-                color: #ff6b00;
+                color: #ff6b00 !important;
+            }
+
+            .action-button:hover span {
+                color: #ff6b00 !important;
             }
 
             .action-button span:first-child {
-                margin-right: 8px;
+                margin-right: 8px !important;
-                filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
+                filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)) !important;
+            }
+            
+            .action-button span {
+                color: #666 !important;
             }
         `;
 
             // 创建面板内容
             const panel = document.createElement("div");
-            panel.className = "floating-panel";
+            panel.className = "floating-panel yak-proxy-root";
             panel.innerHTML = `
             <div class="panel-header">
                 <div class="header-content">
@@ -819,8 +860,9 @@ console.log("Content script starting...");
                 const boundedTop = Math.max(0, Math.min(newTop, maxTop));
 
                 // 保持水平位置不变，只改变垂直位置
-                panel.style.top = `${boundedTop}px`;
+                // 使用setProperty方法添加!important标记确保样式生效
-                panel.style.transform = "translateY(0)"; // 移除默认的 translateY(-50%)
+                panel.style.setProperty('top', `${boundedTop}px`, 'important');
+                panel.style.setProperty('transform', 'translateY(0)', 'important'); // 移除默认的 translateY(-50%)
             };
 
             const onMouseDown = (e) => {
@@ -840,11 +882,11 @@ console.log("Content script starting...");
                 startTop = rect.top;
 
                 // 开始拖动时固定当前位置
-                panel.style.top = `${startTop}px`;
+                panel.style.setProperty('top', `${startTop}px`, 'important');
-                panel.style.transform = "translateY(0)";
+                panel.style.setProperty('transform', 'translateY(0)', 'important');
 
                 // 添加拖动时的视觉反馈
-                panel.style.transition = "none";
+                panel.style.setProperty('transition', 'none', 'important');
                 panel.classList.add("dragging");
 
                 // 防止文本选择
@@ -870,7 +912,7 @@ console.log("Content script starting...");
                 }
 
                 panel.classList.remove("dragging");
-                panel.style.transition = "";
+                panel.style.setProperty('transition', '', 'important');
 
                 // 保存位置
                 const top = panel.getBoundingClientRect().top;
@@ -888,8 +930,8 @@ console.log("Content script starting...");
             const savedPosition = localStorage.getItem("yakitProxyPanelPosition");
             if (savedPosition) {
                 const top = (parseFloat(savedPosition) / 100) * window.innerHeight;
-                panel.style.top = `${top}px`;
+                panel.style.setProperty('top', `${top}px`, 'important');
-                panel.style.transform = "translateY(0)";
+                panel.style.setProperty('transform', 'translateY(0)', 'important');
             }
         },