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
localStoragefor 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.
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! 🙂
[…] Great work by Robert Nyman! Spread the word! […]
Nice work Robert! This actually was one of the things I was waiting for to happen one day 🙂
Bramus!,
Thank you, hope you like it! 🙂
My options menu (drop down) doesn't show any description to the check boxes and radio buttons. Win XP german. 🙁
The contents of the panel at the bottom of the web browser is unreadable. light grey letters on grey background. 🙁
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.
Found the culprit: Optional backgrounds. It's a pitty I will have to choose: My preferred background OR the Validator. 🙁
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.
Options – Private – Backgrounds – load designs
(hope my translation from German meets the original Menu Items)
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.
> 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.
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!
Fritz,
Thank you for the reports!
Nick,
Thanks, good tip!
Great work. I was looking for it for quite a while.
[…] Google chrome html validator plugin […]
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.
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/)?
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.
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!
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.
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
ML,
It’s a good idea, and I might change add that in a future version.
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.
watta,
Yes, it’s been updated. All the other things you can do are under options.
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,
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.
This is really useful, thank you! Helping a lot with a University assignment that focuses completely on validation.