HTML Validator extension for Google Chrome

Validating HTML is very important to ensure maximum web browser and operating system compatibility, and making sure it is ready for CSS and JavaScript code to interact with it. Therefore, I have created an HTML Validator for Google Chrome.

Background

Being an avid Firefox user myself, I have had tremendous use and inspiration from the two excellent Firefox extensions HTML Validator and Web Developer Toolbar when it comes to validate HTML. With that in mind, when I have developed my Google Chrome HTML Validator extension, I wanted to add the options to support automatic or manual HTML validation, for both local, i.e. non-publicly available, and public content. Therefore, the validation types supported are:

  • Inline validation
  • Validate URL at the W3C Validator
  • Send local HTML to W3C Validator

What is very right with the Google Chrome extension model

Just as a side-note, and after having developed a number of Firefox extensions before, there are a few good things about developing Google Chrome that is quite nice:

  • Only HTML, CSS and JavaScript skills needed – no other language.
  • Swift development – no web browser restart necessary, but an extension reload however.
  • Using localStorage for saving preferences.
  • The Google Chrome Extensions gallery. What is outstanding for developers is that I can update my extension whenever I want to, and it is public direct. No review queues, unnecessary wait etc – the control is in the hands of the developer.

Google Chrome extension

HTML Validator in Google Chrome resides as an icon next to the address field, and when it it is autorun/run inline, it displays a green badge with the number 0 if there are no validation errors, or a red badge with a count of the number of validation errors.

A picture of the Google Chrome toolbar with the HTML validator badge

If you click the HTML Validator icon, it will pop-up a panel at the bottom of the web browser, displaying information about the validation errors.

A picture of the pop-up panel displaying more information about HTML validation errors

Settings

A picture of the menu with HTML Validator actions and settings

Clicking the icon will also display a menu with validation options and various settings to customize it according to your specific needs. You can choose:

  • Whether it should autorun or not
  • Default validation type: inline or direct send to the W3C Validator
  • Decide how/when the pop-up panel at the bottom of the web browser should be shown
  • What should happen when you click the icon
  • If you want to use a timeout or not for the inline validation. At times, the W3C Validator might be slow to respond.
  • If you want a loading indicator or not to be shown

Keyboard shortcuts

Being a keyboard shortcut freak myself, there are three general options for the HTML Validator extension:

Windows/Linux

  • Press Ctrl + Shift + V to validate a page
  • Press Ctrl + Shift + A to validate a local page

Mac OS X

  • Press Cmd + Shift + V to validate a page
  • Press Cmd + Shift + A to validate a local page

On all operating systems, you can also press Esc to hide the list of validation errors in the pop-up panel.

Discussion and bug reports

And discussions, requests or bug reports are welcome in the HTML Validator discussion group.

Download/Install HTML Validator

So, if you are a Google Chrome user, what are you waiting for! Install the HTML Validator for Google Chrome now! :-)

Posted in Developing,HTML5/HTML/XHTML,Technology,Web browsers |

28 Comments

  • [...] Great work by Robert Nyman! Spread the word! [...]

  • Bramus! says:

    Nice work Robert! This actually was one of the things I was waiting for to happen one day :-)

  • Robert Nyman says:

    Bramus!,

    Thank you, hope you like it! :-)

  • Fritz says:

    My options menu (drop down) doesn't show any description to the check boxes and radio buttons. Win XP german. :-(

  • Fritz says:

    The contents of the panel at the bottom of the web browser is unreadable. light grey letters on grey background. :-(

  • Robert Nyman says:

    Fritz,

    Hmm, interesting. As of right now it is not localized, so all texts are in English no matter the web browser language. Try uninstall and reinstall and see if it helps.

    Regarding the colors, I understand the the issue, but the text color is close to black and the grey is very light, so my hope is that it is sufficient contrast.

  • Fritz says:

    Found the culprit: Optional backgrounds. It's a pitty I will have to choose: My preferred background OR the Validator. :-(

  • Robert Nyman says:

    Fritz,

    I see. How do you achieve optional backgrounds? Through an extension or some other setting? Because something that changes the background to a certain color should also, naturally, change the foreground color to match it, in my book.

  • Fritz says:

    Options – Private – Backgrounds – load designs

    (hope my translation from German meets the original Menu Items)

  • Robert Nyman says:

    Fritz,

    I see. But then I believe it is the the design's responsibility to alter the foreground color accordingly – not sure I can address something that overrides the background color.

  • Fritz says:

    > I believe it is the the design’s responsibility …

    I agree. I switched to a Google design, and everything works as it should.

    Thanks for your patience.

  • Nick Hand says:

    Also check out stayvalid.com for those of you that are big on keeping your sites valid… helps by scanning the entire site, not just a single URL, then emails you the results, and can also scan nightly for you and email you the results of that as well each night!

  • Robert Nyman says:

    Fritz,

    Thank you for the reports!

    Nick,

    Thanks, good tip!

  • Great work. I was looking for it for quite a while.

  • Vincent says:

    The information panel does not want to display on websites that are using https as the protocol (it also does not auto-validate, even if the option is checked). The icon shows errors, but I cannot get the information panel to come up.

  • Robert Nyman says:

    Vincent,

    As of now, it doesn't support https since it's all based on sending the information off to another source, which often isn't a good idea for https.

  • Would you mind creating offline validator like the one for firefox (http://users.skynet.be/mgueury/mozilla/)?

  • Robert Nyman says:

    Mario,

    I’d love to, but the problem with that is that there’s no way right now to implement support for validating HTML5, which is vital to me and a lot of other people – especially since it is, and will become, the de facto version of HTML5 in the future.

  • Blake says:

    I love the plugin, but it doesn’t seem to work on secured websites or pages that have been dynamically generated from a POST request. I develop a lot of Intranet systems, and I’d ideally like the plugin to send the source code to W3C for validation, not the URL of the page since the site isn’t accessible to the outside world. Also, if there has been a recent POST request to generate the current page, I’d like to be able to send that source code, as well. If you “view source” in Google Chrome on such a page, it will render the page as if you did not send the POST data with the request.

    Hopefully, that made some sense! Keep up the great work, and thanks for the plugin!

  • Robert Nyman says:

    Blake,

    Thanks!
    Yes, for URL validation it has to be publicly accessible. However, for your need there is also an option in the menu, Validate Local HTML, which will load the page in another tab and then post the rendered source code to W3C for validation.

  • ML says:

    Very nice extension. I could only suggest one improvement:

    some companies (including mine :) ) have local installations of w3c validator engine to check local test sites. Would be nice if I could specify non-default url to such validation engine in extension config.

    For example: http://localhost/w3c-validation-engine/check instead of: http://validator.w3.org/check

  • Robert Nyman says:

    ML,

    It’s a good idea, and I might change add that in a future version.

  • watta says:

    this is a great addon, but for me there is only 3 options in the dropdown menu: validate inline, validate w3c and validate local page. and there is also no popup panel on the bottom.

  • Robert Nyman says:

    watta,

    Yes, it’s been updated. All the other things you can do are under options.

  • Robert says:

    Hi Robert,
    I am developing HTML pages on localhost. I am using Google Chrome 18. I just installed the extension in the hope that it will validate the pages locally. But when I click the “Validate Inline” or “Validate local HTML” options, nothing happens. It simply does not respond. If I click on W3C Validator, it does take me to official W3C website, I see an error stating that the URL scheme is not supported.

    That said, I would like to know if your extension can validate pages on localhost (both HTML & PHP) on Chrome 18. I am unable to use the extension as of now because of this odd behavior. So I am hoping you would get a chance to look into this when you get some time. I am leaving my email, so please feel free to send me a message if you want any more details.

    Thanks in advance.

  • Robert Nyman says:

    Robert,

    Sorry for a late reply. I believe W3C changed their validator support recently for third party apps, so now you can only validate public URL through their interface, and thus, the extension.

  • David Bain says:

    This is really useful, thank you! Helping a lot with a University assignment that focuses completely on validation.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>