我正在使用 AngularJs1.6 开发 Chrome 扩展。我想通过给定元素的查询选择器的扩展来突出显示网页上的元素。
例如。在下面的第一张图片中，我想将鼠标悬停在组件/类名称表中的 BUTTON.info-popover-button.btn.btn-link 上，并触发 API 调用以在第二张图片。
最佳答案
您可以使用 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>关于javascript - 通过 Chrome 扩展将鼠标悬停在检查器中的元素上时突出显示网页元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42564490/