New Firefox Extension: X-Ray
January 6th, 2006
One of my New Year’s resolutions was to create an “interesting script, plugin, extension, or widget.” I didn’t think I’d write a Firefox Extension only six days into 2006, but after writing about using the CSS :before and :after pseudo elements to create CSS Curly Quotes, it got me thinking about other uses for that technique. I thought that wrapping the elements on a page with the actual tags from the sourcecode might be a good tool for learning and debugging, but wasn’t sure how to go about creating an extension. Fortunately, I found a great tutorial at roachfiend.com and with a little trial and error, I’ve finished my first extension.
The X-Ray Firefox Extension let’s you see the tags on a page without viewing the sourcecode.
Install X-Ray Extension for Firefox
One installed the X-Ray command is available by right-clicking as well as in the Tools menu. When applied to a page it can help you see how the document was constructed without having to go back and forth between the sourcecode and the page in your browser. Is that list made of li dd or p elements? Is that an h3 tag or just some bolded text? X-Ray shows you what’s beneath the surface of the page.
While I create webpages all the time, there’s something about writing a piece of code you have to install that’s very satisfying. Even better was finding that it was actually something I’d find helpful myself.
For version 0.5 the current list of supported tags is: h1, h2, h3, h4, h5, h6, p, ol, ul, li, dt, dd, font, div, span, blockquote, pre, a, b, i, strong, em. If some other people find this extension useful, I’ll probably add support for more tags, and possibly experiment with adding some other enhancements as well.
Update
By request from the nice folk at digg.com here’s a screenshot of the extension in use:
Donations to The X-Ray Tip Jar are greatly appreciated.
Congratulations! I admire your commitment to you New Year’s Resolutions. The best thing to do is get them done right away, before you lose all the momentum from the holidays, right?
Now, what you have to do is work on an application that will automatically put your blog posts at the top of every Weblog Search Site (like Technorati) and you’re in business
Thanks for the great extension! I’m already using it obsessively!
Experiment do. I have no wise words to leave you with, just a pat on the back! This is one the most creative yet practical apps I’ve seen recently. Keep it up up up!
Cheers Mate,
Congradulations on the quick completion of your new years resolution. The extension is a nice addition to firefox, it would be nice if there was a screenshot of it being used on this webpage so people knew what they were installing before they did. People love screenshots.
Nice, but buggy.
Installed, restarted, used on this page. Right click is broken, the context menu jumps around (apparently near the top of the container that was clicked.) Try right-clicking on some comments near the bottom of the page.
Thanks very much everyone! I’ve added a screenshot so people can see what the extension looks like in use. If you haven’t gotten them already, you should also check out the Top 5 Firefox Extensions for Web Designers—these are all essential downloads.
Nand—I haven’t run into any issues like that. The code for the right-click is straight out of the roachfiend.com tutorial.
Nice. But um. how do you disable it? I can’t un x-ray….
Un X-raying is easy. Just reload the page.
just refresh the webpage and its un x-rayed
This is cool. Now please post it on the official Firefox extensions site so I can download it; until then we don’t know who the heck you are.
The idea is nice but I find little practical use.
If this extension tells me the attribute value pair associated with a tag – nothing will beat it.
It’s admittedly not anywhere near as complex as some other extensions like Aardvark or the Web Developer Toolkit. I’d say it’s probably more useful to people getting started with web design and development—rather than seasoned professionals.
Mmmm. Seasoning.
Wow, really nice extension. Good job.
That’s very clever. You might consider adding a toolbar button (toggle) to future versions.
Nicely done!
Stuart,
I went through my other installed extensions, and it seems to be caused by the SessionSaver. Weird.
Apologies for replying to myself, but I noticed the problem doesn’t occure on other sites, even with SessionSaver enabled.
Rightclicking on this site seems weird in any case, as the frame surrounding the comments starts to highlight when you right click on the content. The context menu also seems to lag somewhat on this page.
No idea what’s causing this. Your extension works great on any other page however, so thanks!
Cool! I want it on all the time! Perhaps an option for that should be added?
Another thing I’m noticing: When highlighting text and using the right-click context menu, XRay takes over the position of “Copy.”
That made me fill the page with HTML markup instead of copying the text I wanted to
The extension also doesn’t work on GMail pages for me. All the HTML of the GUI is missed as it’s not referenced in the webpage source.
Works great on simple pages, but not so great on framed sites. Any ideas?
Thanks for the great extension!
Ray
Main problem with this thing is that it completely obliterates any existing :before and :after elements.
This is great and extremely useful; thanks so much! Also, congrats on finishing your resolution so early in the year.
Hey, nice extension. Thanks for sharing it.
One feature request: it would be outstanding to be able to do the parallel of “view selected source”, in other words just X-Ray the markup within or nearby what I’ve selected on the page.
For my uses, targeting a region as I suggest would do wonders for the “signal to noise” ratio.
Happy 2006!
“The X-Ray Firefox Extension let’s you see the tags on a page without viewing the sourcecode.”
Nitpick: It’s lets, not “let’s”
I’m terrible with ’s and words with double letters!
This is awesome.
One thing: the tag text is black, so it doesn’t show up on black backgrounds. Perhaps some way to make it white?
Very cool! If your interested in expanding features with it, it would be cool if we could select what tags it displays.
Nice idea. Great choice of name :). Make sure you submit it to update.mozilla.org
Nifty! Suggestion: style the inserted tags so they are less obtrusive. As an example, check out the similar idea I had a few years ago for an HTML rich text editor (http://www.tallent.us/blog/commentview.aspx?guid=8ff88e06-d406-42ed-8098-dfdb9b9d680d)
Lovely, can’t wait for more tags to be added.
Nice work.
really great extension, keep on!
Take a look at Opera’s “Author mode”, in which you can have many different settings which allow you to see tags among other useful debuging stuff.
awesome. thanks for providing such a great tool.
It doesn’t seem to work on pages that have frames. Otherwise, neat idea. I look forward to the updates.
Coooooool…. Thx for your great job. It’s very useful to me. Don’t forget to improve. We’ll waiting
great extension, thanks!
2 ideas for future versions:
1. be able to turn it off as well as on (instead of having to reload the whole page)
2. be able to select just one item on a page and see its source.
I agree with the other comment about having a way to show the id tags and such. That would be very helpful.
Nice, but could you make it so it shows attributes as well? Many authors use divs and spans for much of their page, and those are only defined by their “class” attribute.
The extention sets on my ex.. window and says it will be active after I restart fox but to does not. I then try to uninstall and it says it will uninstall when I restart fox, it does not! I now have it displayed in the extention window but it is not active.
If this did work – the best new tags would be showing tables..
I arrived here from del.icio.us
X-Ray is a great plugin that cures one of my pet peeves.
I blogged about it on http://thewebdesignblog.com
You’re a damn genius. This is one of these things you need without realising it. I’m looking forward to future versions which I’m sure will rock even more.
This is an excellent extension, especially when considering it’s your first! Well done. I look forward to more work on this, and any other extensions you may feel like creating.
I haven’t used this a lot yet, but so far, I have no problems with it. It did what was expected.
Thank you.
Apologies if this has already been mentioned in the comments, but you have to refresh the page to turn it off. Other than that, this is a fantastic extension, good job!
Thanks for the extension – it is a nice addition to the tool bag. I poked around the xpi file and added support to my copy. I’m not sure if it was left out on purpose or not – the mod seems to be working fine.
Ack, the HTML got stripped in my comment above (as I should have expected). I was trying to say that I added support for the DL tag to my copy of the install file. Thanks!
It would be cool if you could define a list of the tags you wish to be X-Rayd… for example, I would have added TABLE, TR and TD recently, because I just had to try and decipher a mess of tables. The extension would have been very helpful!
Other than that, this extension is very well done – beautifully simple and powerful at the same time. Thanks
Firefox just flashed me that X-Ray is not compatible with today’s 1.5.0.1 release. Is that temporary or fatal?
My FireFox just upgraded itself to 1.5.0.1 and I see the same message Sheila did. Of the other extensions I use only Aardvark extension (by another author) is also affected. I do not yet know how many others may be affected.
Is there anything we can do to help?
I’ll update my Firefox today and see what I can do.
I’ve had quite a few people email to say X-Ray doesn’t work after upgrading Firefox. I just had my system auto-upgrade to Firefox 1.5.0.1—and my copy of X-Ray is still working.
Very strange.
I’ll try another computer and see if there’s any difference.
I am also having the same problem W.Peckham descibes. I did notice that aardvark has a new update available. Great work on X-Ray, I use it all the time.
Thank You.
Mark
Any news on the update for X-Ray to work with the latest version of Firefox? I just found the extension and I’m looking to use it but it won’t install…then I saw this update, so hopefully the update will be out soon so I can join in on the fun. Thanks a million
A clever extension—nice idea.
If you’re looking to add a feature, what about displaying the CSS class name?
You could probably abuse the abbr tag to make the class name appear when you hover over the xray inserted tags.
Thanks for a useful little util.
Also, I’d suggest making the link tags appear outside the linked text they surround.
ya i tried downloading the plugin on firefox on the latest updated version and its not working…u comin out with an updated extension soon?
Version 0.7 is now available
Bloody. Freaking. Awesome.
I’d install this if it wasn’t playing right into the hand of the evil Captain Context-Menu Bloat and his ever-swelling ranks of Context-Menu Menu-Item Minions.
Great plugin! I will add it to my favorite Firefox plugins list!
I love it, except that it messes up the page layout. I would love an option that shows all the markup in a tooltip. But I guess that’s getting close to the functionality in Aardvark.
This extension is P H A T
Thx man.
Awesome extension – really useful.
This could get annoying sometimes but i still like it ¯ _ /¯¯
hey Great, I am glad to find this Plugin. Just Tried. Work Great. Thanks a lot
Hey great move….thanks a lot
Good works …........thats help people…...great thks
a very great tool, i love it.
Thank you for two great plug-ins. I appreciate this and professor x.
thanx for the great extention
That’s really helpful for finding the tags. I took much time before using this extension.
Thanks
I’ll post about it in my blog
Http://raizaM.BlogSpot.com
I don’t usually agree with new year resolutions but I really like your idea. Good Luck
!!
Great!
Nice site actually. Gone to my favourites. Thanks for creation.
Awesome job thank you much
missing one feature only
copy and paste tags )))
This is my favourite plugin together with web developer toolbar.
Super work, great that people are still willing to contribute…
My Firefox was also just updated and everything seems to be still ok with X-ray…
Again she immediately bucked wrestling vixxxens and wiped it was, well. He groaned loudly as.
Tell me. They became sucking horse dick delirious at her jack – - – - -.
ok, muchas gracias por la extencion
We were immagini sesso hard almond shaped withvery dark brown pupils.
thnx for the article
great plugin, great article Thnx
Cool, thanks for the great extension…
Dude.. that’s awesome! I do web development as a full-time job, and soon I’ll probably be close to starting my own business with it if I can. This tool will save me a TON of time chasing down those rogue tags! Sir, I congratulate you on an awesome add-on!
a great extension
I love it
Thanks
Best Regards from Germany
Thanks for the plugin, this will definitely save me some debugging time.
Thanks for this Plugin.
Nice extension and thanks for the link to roachfiend. The tutorial / help there really helps when trying to create extensions for myself. I’ll definitely be adding this to my StumbleUpon.
Good job. This is actually a very creative and useful tool. I think that there are going to be quite a lot of my friends who will be happy with this – so I’ll be sending them a link of your site. I like the little logo as well (I know that’s just something aside, but I do.) It’s a great idea. The screenshot looks neat as well.
great work! i lov it.
very nice tool thanks!
Two great plugins, good work. thanks