☰

Browser Implants + True CSS Hover v5.32

Browser Implants injected below QuickBuy; full hover popups; collapsible/expandable panel; state save; scroll and zoom stable; polished style matching QuickBuy/AutoBank

当前为 2025-04-28 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Browser Implants + True CSS Hover v5.32
  3. // @namespace    Zega
  4. // @version      5.32
  5. // @description  Browser Implants injected below QuickBuy; full hover popups; collapsible/expandable panel; state save; scroll and zoom stable; polished style matching QuickBuy/AutoBank
  6. // @match        https://fairview.deadfrontier.com/onlinezombiemmo/index.php*
  7. // @grant        none
  8. // @run-at       document-start
  9. // ==/UserScript==
  10.      
  11.     (function() {
  12.       'use strict';
  13.      
  14.       let _autoBankQueued = false, _autoBankDone = false;
  15.       let _qbQueued = false, _qbDone = false;
  16.      
  17.       function _onAutoBank() {
  18.         if (_autoBankDone) return;
  19.         _autoBankQueued = true;
  20.         if (typeof fillAutoBankSlot === 'function') fillAutoBankSlot();
  21.       }
  22.       function _onQuickBuy() {
  23.         if (_qbDone) return;
  24.         _qbQueued = true;
  25.         if (typeof fillQuickBuySlot === 'function') fillQuickBuySlot();
  26.       }
  27.      
  28.       Object.defineProperty(window, 'BrowserImplant_AutoBank', {
  29.         configurable: true,
  30.         enumerable: true,
  31.         set(val) {
  32.           if (val) _onAutoBank();
  33.           Object.defineProperty(window, 'BrowserImplant_AutoBank', {
  34.             value: val,
  35.             writable: true,
  36.             configurable: true,
  37.             enumerable: true
  38.           });
  39.         },
  40.         get() { return false; }
  41.       });
  42.      
  43.       Object.defineProperty(window, 'BrowserImplant_QuickBuy', {
  44.         configurable: true,
  45.         enumerable: true,
  46.         set(val) {
  47.           if (val) _onQuickBuy();
  48.           Object.defineProperty(window, 'BrowserImplant_QuickBuy', {
  49.             value: val,
  50.             writable: true,
  51.             configurable: true,
  52.             enumerable: true
  53.           });
  54.         },
  55.         get() { return false; }
  56.       });
  57.      
  58.       window.addEventListener('load', initWhenReady);
  59.      
  60.       function initWhenReady() {
  61.         const tryAttach = setInterval(() => {
  62.           const rightTd = document.querySelector('td.design2010[style*="right_margin.jpg"]');
  63.           const quickBuyFieldset = rightTd?.querySelector('fieldset');
  64.           if (rightTd && quickBuyFieldset) {
  65.             clearInterval(tryAttach);
  66.             attachImplants(rightTd);
  67.           }
  68.         }, 100);
  69.       }
  70.      
  71.       function attachImplants(rightTd) {
  72.         rightTd.style.position = 'relative';
  73.      
  74.         const panel = document.createElement('div');
  75.         panel.id = 'browser-implant-panel';
  76.         panel.innerHTML = `
  77.           <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;">
  78.             <strong style="color:#ffd700;">Browser Implants</strong>
  79.             <button id="collapse-browser-implant" style="background:none;border:none;color:#ffd700;font-size:16px;cursor:pointer;">[–]</button>
  80.           </div>
  81.           <div class="implant-grid" id="implant-grid-container">
  82.             ${Array(8).fill(0).map((_,i)=>`
  83.               <div class="slot" data-slot="${i}">
  84.                 <img class="implant-icon" style="display:none;" />
  85.                 <div class="hover-popup">
  86.                   <img class="hover-img" src="" />
  87.                   <div class="hover-name"></div>
  88.                   <div class="hover-stat"></div>
  89.                 </div>
  90.               </div>
  91.             `).join('')}
  92.           </div>
  93.         `;
  94.         Object.assign(panel.style, {
  95.           position: 'absolute',
  96.           top: '660px',
  97.           left: '10px',
  98.           width: '420px',
  99.           background: 'rgba(0,0,0,0.35)',
  100.           padding: '8px 12px',
  101.           border: '1px solid #666',
  102.           borderRadius: '8px',
  103.           boxShadow: '0 4px 12px rgba(0,0,0,0.6)',
  104.           textAlign: 'center',
  105.           zIndex: '10000'
  106.         });
  107.      
  108.         rightTd.appendChild(panel);
  109.      
  110.         const slots = panel.querySelectorAll('.slot');
  111.         const grid = document.getElementById('implant-grid-container');
  112.         const collapseBtn = document.getElementById('collapse-browser-implant');
  113.      
  114.         // Restore collapse state
  115.         if (localStorage.getItem('browserImplantCollapsed') === 'true') {
  116.           grid.style.display = 'none';
  117.           collapseBtn.textContent = '[+]';
  118.         }
  119.      
  120.         collapseBtn.addEventListener('click', () => {
  121.           if (grid.style.display === 'none') {
  122.             grid.style.display = 'grid';
  123.             collapseBtn.textContent = '[–]';
  124.             localStorage.setItem('browserImplantCollapsed', 'false');
  125.           } else {
  126.             grid.style.display = 'none';
  127.             collapseBtn.textContent = '[+]';
  128.             localStorage.setItem('browserImplantCollapsed', 'true');
  129.           }
  130.         });
  131.      
  132.         let next = 0;
  133.      
  134.         function fill(slot, url, name, stat) {
  135.           const img = slot.querySelector('img.implant-icon');
  136.           const pop = slot.querySelector('.hover-popup');
  137.           img.src = url;
  138.           img.style.display = 'block';
  139.           img.style.width = '100%';
  140.           img.style.height = '100%';
  141.           img.style.objectFit = 'contain';
  142.           pop.querySelector('.hover-img').src = url;
  143.           pop.querySelector('.hover-name').textContent = name;
  144.           pop.querySelector('.hover-stat').textContent = stat;
  145.         }
  146.      
  147.         fill(slots[next++], 'https://files.catbox.moe/y2n5ij.png', 'Browser Implant', 'Gain Efficiency In Outpost +20%');
  148.      
  149.         if (window.BrowserImplant_MarketHover) {
  150.           fill(slots[next++], 'https://files.catbox.moe/kqee23.png', 'Market Hover Implant', 'Quick Access to Trade Values +15%');
  151.         }
  152.      
  153.         window.fillAutoBankSlot = () => {
  154.           if (_autoBankDone || next >= slots.length) return;
  155.           fill(slots[next++], 'https://files.catbox.moe/ry7yd2.png', 'Auto Bank Implant', 'Instant bank link—deposits & withdrawals +60% speed!');
  156.           _autoBankDone = true;
  157.         };
  158.         if (_autoBankQueued) window.fillAutoBankSlot();
  159.      
  160.         window.fillQuickBuySlot = () => {
  161.           if (_qbDone || next >= slots.length) return;
  162.           fill(slots[next++], 'https://files.catbox.moe/urko7b.png', 'QuickBuy Implant', 'Quickly buy your survival items. 70% Barter Speed!');
  163.           _qbDone = true;
  164.         };
  165.         if (_qbQueued) window.fillQuickBuySlot();
  166.       }
  167.      
  168.       const css = `
  169.         #browser-implant-panel .implant-grid {
  170.           display: grid;
  171.           grid-template-columns: repeat(4, 36px);
  172.           grid-template-rows: repeat(2, 36px);
  173.           gap: 4px;
  174.           justify-content: center;
  175.         }
  176.         #browser-implant-panel .slot {
  177.           width: 36px;
  178.           height: 36px;
  179.           background: rgba(255,255,255,0.05);
  180.           border: 1px solid #888;
  181.           border-radius: 4px;
  182.           position: relative;
  183.         }
  184.         #browser-implant-panel .slot img.implant-icon {
  185.           position: absolute;
  186.           top: 0; left: 0;
  187.           width: 100%; height: 100%;
  188.           object-fit: contain;
  189.           cursor: default;
  190.           display: none;
  191.         }
  192.         #browser-implant-panel .hover-popup {
  193.           display: none;
  194.           position: absolute;
  195.           bottom: -18px;
  196.           left: 50%;
  197.           transform: translateX(-50%);
  198.           background: rgba(0,0,0,0.85);
  199.           padding: 6px;
  200.           border: 1px solid #555;
  201.           border-radius: 6px;
  202.           flex-direction: column;
  203.           align-items: center;
  204.           z-index: 1000;
  205.           opacity: 0;
  206.           transition: opacity .2s;
  207.           width: 130px;
  208.         }
  209.         #browser-implant-panel .hover-popup .hover-img {
  210.           width: 50px;
  211.           height: 50px;
  212.           margin-bottom: 4px;
  213.           object-fit: contain;
  214.         }
  215.         #browser-implant-panel .hover-name,
  216.         #browser-implant-panel .hover-stat {
  217.           color: gold;
  218.           font-size: 12px;
  219.           margin: 1px 0;
  220.           line-height: 1.1;
  221.           text-align: center;
  222.         }
  223.         #browser-implant-panel .slot:hover .hover-popup {
  224.           display: flex;
  225.           opacity: 1;
  226.         }
  227.         #browser-implant-panel .slot:not(:has(img.implant-icon[style*="display: block"])) .hover-popup {
  228.           display: none!important;
  229.           opacity: 0!important;
  230.         }
  231.       `;
  232.       const style = document.createElement('style');
  233.       style.textContent = css;
  234.       document.head.appendChild(style);
  235.      
  236.     })();