We can’t change history, but we can change the future.
Be nice to each other.
@robertnyman

HTML Validator extension for Google Chrome

Published on Wednesday, April 7, 2010

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.

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.

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.

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.

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!

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.

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.

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!

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.

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.

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.