Code Self Study Forum

X-Ray Firefox Extension Replacement

There used to be an interesting Firefox extensions called X-Ray. It isn’t around any more, but there is an archived screenshot here:

x-ray-screenshot

The old extension supported these X/HTML tags: h1, h2, h3, h4, h5, h6, p, ol, ul, li, dt, dd, font, div, span, blockquote, pre, a, b, i, strong, em.

I just saw a blog post that reminded me of it, and it describes a CSS-only technique to get a similar effect:
https://secretgeek.github.io/html_wysiwyg/html.html

It might be an interesting exercise to build a Firefox extension that work like the old X-Ray extension but is able to display every kind of tag, even custom tags. It should be possible to recreate the old extension using just CSS, but supporting custom tags might require JavaScript.