[removed] Let user select an HTML element like Firebug?

Question

I want to write a browser (Chrome/FF) extension that needs to select an element on a web page. I would like it to behave like Firebug\'s element inspector does. You click

Answer 1

One simple way to do it is to use an outline instead of a border:

.highlight { outline: 4px solid #07C; }

Just add and remove that class to any element you want to select/deselect (code below is not properly tested):

document.body.addEventListener("mouseover", function(e) {
    e.stopPropagation();
    e.target.addEventListener("mouseout", function (e) {
        e.target.className = e.target.className.replace(new RegExp(" highlight\\b", "g"), "");
    });
    e.target.className += " highlight";
});

Since you are using an outline, (which is supported by Chrome) instead of a border, elements will not jump around. I'm using something similar in my EasyReader Extension.

Answer 2

Also check this one out:

http://rockingcode.com/tutorial/element-dom-tree-jquery-plugin-firebug-like-functionality/

I found it pretty insightful.. and there's a demo here:

http://rockingcode.com/demos/elemtree/

Hope this helps.

Answer 3

HTML Element Picker (Vanilla JS)

Pick and highlight any HTML element on a page with only Vanilla JS! Tested in Chrome, FF, and Opera, doesn't work in IE.

How it works:

What you need is actually very simple. You can just create an empty div box with a background in JS and move it around to highlight on top of hovered elements. Here's the JS code:

const hoverBox = document.createElement("div");
console.log("hoverBox: ", hoverBox);
hoverBox.style.position = "absolute";
// change to whatever highlight color you want
hoverBox.style.background = "rgba(153, 235, 255, 0.5)";
// avoid blocking the hovered element and its surroundings
hoverBox.style.zIndex = "0";
document.body.appendChild(hoverBox);
let previousTarget;
document.addEventListener("mousemove", (e) => {
    let target = e.target;
    if (target === hoverBox) {
        // the truely hovered element behind the added hover box
        const hoveredElement = document.elementsFromPoint(e.clientX, e.clientY)[1];
        if (previousTarget === hoveredElement){
            // avoid repeated calculation and rendering
            return;
        } else{
            target = hoveredElement;
        }
    } else{
        previousTarget = target;
    }
    const targetOffset = target.getBoundingClientRect();
    const targetHeight = targetOffset.height;
    const targetWidth = targetOffset.width;
    // add a border around hover box
    const boxBorder = 5;
    hoverBox.style.width = targetWidth + boxBorder * 2 + "px";
    hoverBox.style.height = targetHeight + boxBorder * 2 + "px";
    // need scrollX and scrollY to account for scrolling
    hoverBox.style.top = targetOffset.top + window.scrollY - boxBorder + "px";
    hoverBox.style.left = targetOffset.left + window.scrollX - boxBorder + "px";
});

See Demo
I also made an npm package for the element picker with many more user configurations like background color, border width, transition, etc. Here's the GitHub page.

Answer 4

There was a similar question asked on Stackoverflow and it had lots of good answers: Does anyone know a DOM inspector javascript library or plugin?

For those who are looking for a quick and dirty solution:

http://userscripts.org/scripts/review/3006 is the easiest. Just put the code within <script></script> tags and you are good to go.

https://github.com/josscrowcroft/Simple-JavaScript-DOM-Inspector/blob/master/inspector.js is slightly better and still very easy to integrate in.

For a more sophisticated element inspector, you might want to check out the SelectorGadget as pointed by Udi. The inspector selection code is in http://www.selectorgadget.com/stable/lib/interface.js