1

I'm developing a chrome extension using AngularJs1.6. I want to highlight an element on the webpage through the extension given element's query selector.

Ex. in the first picture below, I want to hover over BUTTON.info-popover-button.btn.btn-link in the Components/Class Names table, and trigger an API call to do the same thing in the second picture.

enter image description here from question:http://stackoverflow.com/questions/14152116/inspect-element-rulers-in-firefox

led
  • 1,544
  • 5
  • 17
  • 23
  • 1
    At least several solutions exist according to google search: [highlight element like inspector](https://www.google.com/#q=stackoverflow+highlight+element+like+inspector) – wOxxOm Mar 02 '17 at 19:49
  • 1
    Hmm, now looking at the added picture, I think I understand the goal. But there's no API to invoke the built-in highlighter so you'll have to use a content script that does the highlighting e.g. by listening to messages from your devtools page code. – wOxxOm Mar 03 '17 at 14:48
  • 1
    Ok, let me try, i will post back solution if I can do it, thanks a lot for quick reply. – led Mar 03 '17 at 14:52

1 Answers1

7

You can use Element.getBoundingClientRect() to get the dimentions and then move a position: fixed element over it:

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>
Justin Taddei
  • 2,142
  • 1
  • 16
  • 30
  • 2
    This shows the a box around the element I'm currently hovering within my extension page, but it won't trigger any chrome inspector API's to call the actual DOM from the webpage I'm using the extension for. I tried tweaking this function, it's a good starting point, but I need help searching for this specific API/method...to show this box in the webpage instead of my extension page. thanks! – led Mar 03 '17 at 14:34