Question

我正在使用AngularJs1.6开发Chrome扩展程序。我想通过扩展名给定元素的查询选择器突出显示网页上的元素。

实施例。在下面的第一张图片中，我想将鼠标悬停在“组件/类名称”表中的 BUTTON.info-popover-button.btn.btn-link 上，并触发API调用以执行相同的操作第二张照片。

Answer 1

您可以使用Element.getBoundingClientRect()来获取维度，然后在其上移动position: fixed元素：

let overlay = document.querySelector('#mouseover_overlay');
document.addEventListener('mouseover', e => {
  
  let elem = e.target;
  let rect = elem.getBoundingClientRect();
  overlay.style.top = rect.top +'px';
  overlay.style.left = rect.left +'px';
  overlay.style.width = rect.width +'px';
  overlay.style.height = rect.height +'px';
});

#mouseover_overlay {
  position: fixed;
  z-index: 999999999999999;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  background: rgba(0, 100, 255, 0.3);
  pointer-events: none;
  transition: 0.2s; /* Just for fun */
}

<!-- Example DOM taken from https://justintaddei.github.io/WebAudioAPI/ -->

<html>
<body>
    <h1>WebAudio API Experiments</h1>
    <label for="filter">Filter</label>
    <select id="filter">
        <option value="none">None</option>
        <option value="lowpass">Lowpass</option>
        <option value="highpass">Highpass</option>
        <option value="lowshelf">Lowshelf</option>
        <option value="highshelf">Highshelf</option>
        <option value="bandpass">Bandpass</option>
    </select>

    <label for="filterF">Filter Frequency (<input type="number">Hz)</label>
    <input type="range" id="filterF" min="0" max="20000" step="1">

    <label for="track">Audio source (or drag & drop file to play)</label>
    <select id="track">
        <option value="audio13.mp3">Magic Man (Heart)</option>
        <option value="audio12.mp3">Heart Of Glass (Blondie)</option>
        <option value="audio.mp3">Hungry Like The Wolf (Duran Duran)</option>
     </select>

    <button onclick="pause();">
        play/pause graphics
    </button>

    <button id="record">Record audio</button>
    <button id="delete">Delete recording</button>

    <div id="mouseover_overlay"></div>
</body>

</html>

通过chrome扩展名将鼠标悬停在检查器中的元素上时突出显示网页元素

1 个答案: