通过 chrome 扩展将鼠标悬停在检查器中的元素上时突出显示网页元素
led*_*led 0 javascript web-inspector google-chrome-extension angularjs
我正在使用 AngularJs1.6 开发 chrome 扩展。我想通过给定元素的查询选择器的扩展突出显示网页上的一个元素。
前任。在下面的第一张图片中，我想将鼠标悬停在 Components/Class Names 表中的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>- 这显示了我当前在扩展程序页面中悬停的元素周围的框，但它不会触发任何 chrome 检查器 API 从我使用扩展程序的网页调用实际 DOM。我尝试调整此功能，这是一个很好的起点，但我需要帮助搜索此特定 API/方法...以在网页中显示此框而不是我的扩展程序页面。谢谢！ (2认同)