base on this edge & chrome extension code ,manifest v3, content.js "class LinkSelector {
  constructor() {
    this.isSelecting = false;
    this.startX = 0;
    this.startY = 0;
    this.selectedLinks = new Set();
    this.selectionBox = null;
    this.counter = null;
    this.scrollInterval = null;
    this.initialScrollY = 0;
    this.lastMouseX = 0;
    this.lastMouseY = 0;
    this.activeModifierKey = false;
    this.settings = {
      modifierKey: 'Control',
      mouseButton: 0,
      outlineColor: '#ffff00',
      linkColor: '#0000ff',
      borderSize: 4
    };
    this.init();
  }

  async init() {
    await this.loadSettings();
    this.createElements();
    this.attachEventListeners();
    this.updateStyles();
    console.log('LinkSelector initialized');
  }

  createElements() {
    this.selectionBox = document.createElement('div');
    this.selectionBox.className = 'selection-box';
    this.selectionBox.style.display = 'none';
    this.selectionBox.style.position = 'absolute';
    this.selectionBox.style.border = `${this.settings.borderSize}px solid ${this.settings.outlineColor}`;
    this.selectionBox.style.backgroundColor = 'transparent';
    this.selectionBox.style.pointerEvents = 'none';
    this.selectionBox.style.zIndex = '10000';

    this.counter = document.createElement('div');
    this.counter.className = 'selection-counter';
    this.counter.style.display = 'none';
    this.counter.style.position = 'fixed';
    this.counter.style.backgroundColor = 'white';
    this.counter.style.padding = '2px 8px';
    this.counter.style.borderRadius = '4px';
    this.counter.style.zIndex = '10001';

    document.body.appendChild(this.selectionBox);
    document.body.appendChild(this.counter);
  }

  attachEventListeners() {
    document.addEventListener('keydown', (e) => {
      if (e.key === this.settings.modifierKey) {
        this.activeModifierKey = true;
      }
    });

    document.addEventListener('keyup', (e) => {
      if (e.key === this.settings.modifierKey) {
        this.activeModifierKey = false;
        if (this.isSelecting) {
          this.cancelSelection();
        }
      }
    });

    document.addEventListener('mousedown', (e) => this.handleMouseDown(e));
    document.addEventListener('mousemove', (e) => this.handleMouseMove(e));
    document.addEventListener('mouseup', (e) => this.handleMouseUp(e));

    document.addEventListener('visibilitychange', () => {
      if (document.hidden && this.isSelecting) {
        this.cancelSelection();
      }
    });
  }

  cancelSelection() {
    this.isSelecting = false;
    this.selectedLinks.clear();
    this.selectionBox.style.display = 'none';
    this.counter.style.display = 'none';
    if (this.scrollInterval) {
      clearInterval(this.scrollInterval);
      this.scrollInterval = null;
    }
    document.querySelectorAll('.link-highlight').forEach(el => {
      el.classList.remove('link-highlight');
    });
  }

  handleMouseDown(e) {
    if (this.activeModifierKey && e.button === this.settings.mouseButton) {
      console.log('Selection started');
      this.isSelecting = true;
      this.startX = e.pageX;
      this.startY = e.pageY;
      this.initialScrollY = window.scrollY;
      this.lastMouseX = e.pageX;
      this.lastMouseY = e.pageY;
      
      this.selectionBox.style.display = 'block';
      this.counter.style.display = 'block';
      
      e.preventDefault();
    }
  }

  handleMouseMove(e) {
    if (!this.isSelecting || !this.activeModifierKey) {
      if (this.isSelecting) {
        this.cancelSelection();
      }
      return;
    }

    this.lastMouseX = e.pageX;
    this.lastMouseY = e.pageY;

    const currentScrollY = window.scrollY;
    const scrollDiff = currentScrollY - this.initialScrollY;

    const rect = {
      left: Math.min(this.startX, e.pageX),
      top: Math.min(this.startY, e.pageY + scrollDiff),
      width: Math.abs(e.pageX - this.startX),
      height: Math.abs((e.pageY + scrollDiff) - this.startY)
    };

    this.selectionBox.style.left = `${rect.left}px`;
    this.selectionBox.style.top = `${rect.top}px`;
    this.selectionBox.style.width = `${rect.width}px`;
    this.selectionBox.style.height = `${rect.height}px`;

    this.highlightLinks(rect);

    const viewportRect = {
      left: rect.left - window.scrollX,
      top: rect.top - window.scrollY,
      width: rect.width,
      height: rect.height
    };

    this.counter.style.left = `${viewportRect.left + viewportRect.width - 50}px`;
    this.counter.style.top = `${viewportRect.top + viewportRect.height - 20}px`;
    this.counter.textContent = `${this.selectedLinks.size}`;

    this.handleAutoScroll(e);
  }

  handleAutoScroll(e) {
    const scrollThreshold = 50;
    const scrollSpeed = 10;
    const viewportHeight = window.innerHeight;

    if (this.scrollInterval) {
      clearInterval(this.scrollInterval);
      this.scrollInterval = null;
    }

    if (e.clientY > viewportHeight - scrollThreshold) {
      this.scrollInterval = setInterval(() => {
        window.scrollBy(0, scrollSpeed);
        this.handleMouseMove({
          pageX: this.lastMouseX,
          pageY: this.lastMouseY,
          clientY: this.lastMouseY - window.scrollY
        });
      }, 16);
    } else if (e.clientY < scrollThreshold) {
      this.scrollInterval = setInterval(() => {
        window.scrollBy(0, -scrollSpeed);
        this.handleMouseMove({
          pageX: this.lastMouseX,
          pageY: this.lastMouseY,
          clientY: this.lastMouseY - window.scrollY
        });
      }, 16);
    }
  }

  highlightLinks(rect) {
    const links = this.getSelectableElements();
    this.selectedLinks.clear();

    links.forEach(element => {
      const elementRect = element.getBoundingClientRect();
      const absoluteElementRect = {
        left: elementRect.left + window.scrollX,
        right: elementRect.right + window.scrollX,
        top: elementRect.top + window.scrollY,
        bottom: elementRect.bottom + window.scrollY
      };

      if (this.checkIntersection(rect, absoluteElementRect)) {
        const url = this.getElementUrl(element);
        if (url) {
          this.selectedLinks.add(url);
          element.classList.add('link-highlight');
        }
      } else {
        element.classList.remove('link-highlight');
      }
    });
  }

  getSelectableElements() {
    return [
      ...document.querySelectorAll('a'),
      ...document.querySelectorAll('.shopee-search-item-result__item'),
      ...document.querySelectorAll('.justify-between.flex-col.flex.flex-1.p-2')
    ];
  }

  checkIntersection(selectionRect, elementRect) {
    return !(
      elementRect.left > selectionRect.left + selectionRect.width ||
      elementRect.right < selectionRect.left ||
      elementRect.top > selectionRect.top + selectionRect.height ||
      elementRect.bottom < selectionRect.top
    );
  }

  getElementUrl(element) {
    if (element.href) return element.href;
    const link = element.querySelector('a');
    return link?.href || null;
  }

  handleMouseUp(e) {
    if (!this.isSelecting) return;

    if (this.activeModifierKey) {
      this.openSelectedLinks();
    }

    this.cleanup();
  }

  openSelectedLinks() {
    const uniqueUrls = new Set();
    this.selectedLinks.forEach(url => {
      if (this.isValidUrl(url)) {
        uniqueUrls.add(url);
      }
    });

    uniqueUrls.forEach(url => {
      window.open(url, '_blank');
    });
  }

  isValidUrl(url) {
    try {
      new URL(url);
      return true;
    } catch {
      return false;
    }
  }

  cleanup() {
    this.isSelecting = false;
    this.selectedLinks.clear();
    this.selectionBox.style.display = 'none';
    this.counter.style.display = 'none';
    
    if (this.scrollInterval) {
      clearInterval(this.scrollInterval);
      this.scrollInterval = null;
    }

    document.querySelectorAll('.link-highlight').forEach(el => {
      el.classList.remove('link-highlight');
    });
  }

  updateStyles() {
    const style = document.createElement('style');
    style.textContent = `
      .selection-box {
        position: absolute;
        border: ${this.settings.borderSize}px solid ${this.settings.outlineColor};
        background-color: rgba(255, 255, 0, 0.1);
        pointer-events: none;
        z-index: 10000;
      }

      .link-highlight {
        outline: ${this.settings.borderSize}px solid ${this.settings.linkColor} !important;
        outline-offset: 2px;
        transition: outline 0.1s ease;
      }

      .selection-counter {
        position: fixed;
        background-color: white;
        color: black;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: bold;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        z-index: 10001;
        pointer-events: none;
      }
    `;

    const existingStyle = document.getElementById('link-selector-styles');
    if (existingStyle) {
      existingStyle.remove();
    }

    style.id = 'link-selector-styles';
    document.head.appendChild(style);
  }

  async loadSettings() {
    try {
      const result = await chrome.storage.sync.get('settings');
      if (result.settings) {
        this.settings = { ...this.settings, ...result.settings };
      }
    } catch (error) {
      console.error('Failed to load settings:', error);
    }
  }

  updateSettings(newSettings) {
    this.settings = { ...this.settings, ...newSettings };
    this.updateStyles();
    console.log('Settings updated:', this.settings);
  }
}

// Initialize the extension with debug logging
try {
  console.log('Initializing LinkSelector...');
  const linkSelector = new LinkSelector();

  // Add window resize handler
  window.addEventListener('resize', () => {
    if (linkSelector.isSelecting) {
      const rect = {
        left: Math.min(linkSelector.startX, linkSelector.lastMouseX),
        top: Math.min(linkSelector.startY, linkSelector.lastMouseY + (window.scrollY - linkSelector.initialScrollY)),
        width: Math.abs(linkSelector.lastMouseX - linkSelector.startX),
        height: Math.abs((linkSelector.lastMouseY + (window.scrollY - linkSelector.initialScrollY)) - linkSelector.startY)
      };
      
      linkSelector.selectionBox.style.left = `${rect.left}px`;
      linkSelector.selectionBox.style.top = `${rect.top}px`;
      linkSelector.selectionBox.style.width = `${rect.width}px`;
      linkSelector.selectionBox.style.height = `${rect.height}px`;
      linkSelector.highlightLinks(rect);
    }
  });

  // Listen for settings updates
  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === 'settingsUpdated') {
      console.log('Received settings update:', message.settings);
      linkSelector.updateSettings(message.settings);
    }
  });

  console.log('LinkSelector initialized successfully');
} catch (error) {
  console.error('Failed to initialize LinkSelector:', error);
}" , popup.js "document.addEventListener('DOMContentLoaded', async () => {
    // Load saved settings
    const result = await chrome.storage.sync.get('settings');
    const settings = result.settings || {
        modifierKey: 'Control',
        mouseButton: 0,
        outlineColor: '#ffff00',
        linkColor: '#0000ff',
        borderSize: 4
    };

    // Initialize form values
    document.getElementById('modifierKey').value = settings.modifierKey;
    document.getElementById('mouseButton').value = settings.mouseButton.toString();
    document.getElementById('outlineColor').value = settings.outlineColor;
    document.getElementById('linkColor').value = settings.linkColor;
    document.getElementById('borderSize').value = settings.borderSize;

    // Save settings handler
    document.getElementById('saveSettings').addEventListener('click', async () => {
        const newSettings = {
            modifierKey: document.getElementById('modifierKey').value,
            mouseButton: parseInt(document.getElementById('mouseButton').value),
            outlineColor: document.getElementById('outlineColor').value,
            linkColor: document.getElementById('linkColor').value,
            borderSize: parseInt(document.getElementById('borderSize').value)
        };

        console.log('Saving settings:', newSettings);

        try {
            await chrome.storage.sync.set({ settings: newSettings });

            // Update active tab
            const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
            if (tab) {
                chrome.tabs.sendMessage(tab.id, { 
                    type: 'settingsUpdated', 
                    settings: newSettings 
                });
            }

            // Show save confirmation
            const saveButton = document.getElementById('saveSettings');
            const originalText = saveButton.textContent;
            saveButton.textContent = 'Saved!';
            saveButton.style.backgroundColor = '#45a049';
            setTimeout(() => {
                saveButton.textContent = originalText;
                saveButton.style.backgroundColor = '#4CAF50';
            }, 1000);

        } catch (error) {
            console.error('Error saving settings:', error);
            alert('Failed to save settings. Please try again.');
        }
    });
});" , styles.css ".selection-box {
  position: absolute;
  background: transparent;
  pointer-events: none;
  z-index: 10000;
  box-sizing: border-box;
}

.link-highlight {
  transition: outline 0.1s ease;
}

.selection-counter {
  position: absolute;
  background: white;
  color: black;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 10001;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  user-select: none;
}

/* Popup Styles */
.popup-container {
  width: 300px;
  padding: 16px;
}

.setting-row {
  margin-bottom: 16px;
}

.setting-row label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}

.setting-row input,
.setting-row select {
  width: 100%;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

body {
  position: relative;
}

.selection-box {
  position: fixed !important;
  pointer-events: none !important;
}

.selection-counter {
  position: fixed !important;
  pointer-events: none !important;
}

.link-highlight {
  position: relative;
  z-index: 1;
}" ,popup.html "<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body {
            width: 300px;
            padding: 16px;
        }
        .setting-row {
            margin-bottom: 16px;
        }
        .setting-row label {
            display: block;
            margin-bottom: 4px;
            font-weight: 500;
        }
        .setting-row input,
        .setting-row select {
            width: 100%;
            padding: 6px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .save-button {
            width: 100%;
            padding: 8px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .save-button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="popup-container">
        <div class="setting-row">
            <label for="modifierKey">Modifier Key</label>
            <select id="modifierKey">
                <option value="Control">Ctrl</option>
                <option value="Alt">Alt</option>
                <option value="Shift">Shift</option>
            </select>
        </div>

        <div class="setting-row">
            <label for="mouseButton">Mouse Button</label>
            <select id="mouseButton">
                <option value="0">Left</option>
                <option value="1">Middle</option>
                <option value="2">Right</option>
            </select>
        </div>

        <div class="setting-row">
            <label for="outlineColor">Selection Color</label>
            <input type="color" id="outlineColor" value="#ffff00">
        </div>

        <div class="setting-row">
            <label for="linkColor">Highlight Color</label>
            <input type="color" id="linkColor" value="#0000ff">
        </div>

        <div class="setting-row">
            <label for="borderSize">Border Size (px)</label>
            <input type="number" id="borderSize" min="1" max="10" value="4">
        </div>

        <button id="saveSettings" class="save-button">Save Settings</button>
    </div>
    <script src="popup.js"></script>
</body>
</html>" , fix problem with when hold ctrl + hold left mouse click to drag in some site highlights link is not showing and in some case selection (drag) is not showing and lot of time both not showing ,and when drag down the selection area is move with screen not fixed at start of drag and draw down ,explain first and wait for confirm.