6 Great Chrome Extensions for Web Designers

Google Chrome is one of the most popular internet browsers in the world thanks to its many functions, sleek interface, and of course its connection to the mighty search engine and their software and hardware. But many of Chrome’s best functions are trapped behind layers of steps complex enough to give Indiana Jones pause.

Many browser extensions save web designers and other professionals time by creating shortcuts to functions such as screenshots and element/source code viewing. Others introduce completely unique functionality, turning the browser into something more than just an interface for browsing the web.

Chrome extensions are particularly useful for website designers because we spend many hours working with internet browsers, and regularly test websites on all browsers (or at least the popular ones). When you spend eight or more hours a day working online, there are many mundane tasks which are unnecessarily time consuming. Extensions can make a five minute task take thirty seconds, or prevent the need for using extra software.

While there are many great extensions (also called plugins) for Chrome that can help designers with their daily work, here are six I find particularly useful.

ColorZilla

ColorZilla is probably the extension that saves me the most time, whether I’m working on web design or some other project that involves color. ColorZilla can grab the hex code from any visible element on the page, copying it to the clipboard with a single click. Without this extension, getting a hex code from an unknown color requires downloading or screenshotting the page, and then loading the image into a software which can extract the code.

That would be enough to make ColorZilla my personal favourite extension on this list, but the little monster introduces even more functionality to the browser. It also has a color picking palette and gradient generator built into it, and can analyze all the colors used on a page and provide them in an accessible format.

In other words, if you have trouble finding the right color combinations for your site or spend lots of time downloading images to get their hex codes, ColorZilla may be your new best friend.

FireShot

Fireshot is a magnificent extension for anyone who creates tutorials, reports, or design notes on pictures of their website. Rather than going through Chrome’s agonizing procedure for taking an ordinary screenshot, FireShot allows you to capture a selected area of the page, or the whole page, or just the currently visible area.

This is an incredibly handy tool for creating mockups of websites, or for getting an image that you can draw/write some notes on and pass to a coworker or employee. With just a couple of clicks you can capture whatever you want a picture of and then copy it to the clipboard or save it as a PNG, JPG or PDF.

The premium version of this extension introduces even more functionality, but everything listed above is available for free. If you regularly browse on Chrome for any kind of work, having FireShot or a comparable extension installed makes perfect sense.

Fonts Ninja

Fonts Ninja is a cool tool that is great for designers who draw inspiration from other websites. If you see a font you like, normally you’d have to inspect the element and/or check the source code to find out what it is, which can be a tedious and time consuming process. With Fonts Ninja, it takes only a couple of clicks to discover, experiment with, and download any font you find appealing.

If you’re not especially comfortable searching through source code or you spend a lot of time thinking about fonts, this is definitely an extension for you.

One of Fonts Ninja’s greatest features is the fact that it’s completely free; there aren’t any functions hidden behind a paywall, which is a frustrating truth of many extensions.

If the font you’re admiring isn’t free, Fonts Ninja provides a link to purchase it. It even provides a slick interface within the browser which you can use to experiment with fonts before deciding whether or not to get them. Overall, if you want to up your font game this extension will make your life much easier.

CSS Scan

CSS Scan is a powerful paid extension which describes itself as “inspect element on steroids”. Between that and the name you can probably guess what it does, but here’s a quick rundown of its best features, anyway.

When CSS scan is activated, hovering your mouse over any element on the active web page will display its Cascading Style Sheet data, and allow the code to be copied to the clipboard with a single click. This makes learning from code used on other websites much easier, and you may find other uses for this extension depending on your responsibilities.

Checkbot

Checkbot has many functions built into it, but from a bird’s eye view it’s easy to understand; this extension will test a website against long lists of SEO, Speed, and Security best practices. It looks for broken links, unoptimized code, easy access to restricted areas, and much more.

This extension will be useful whether you’re new to web design and working only on your own website, or if you’re an experienced designer with many client projects to manage. While the free version of this extension has some built-in limitations, the premium version can check up to 10,000 URLS per website and export PDF and CSV reports.

If you’re new to working with websites, this tool will help you find problems that may otherwise elude you, and help you embrace best practices. If you’re more experienced, it could help you scale your business by reducing the time required to find and fix problems.

For a full list of Checkbot functions, check the Chrome webstore page linked above or take a look at their website. Even if you just test out of the free version, you may find some easy-to-fix problems with a site you’re working on.

Block Yourself from Analytics

Block Analytics is a handy extension that stops Google Analytics, a popular site statistics tool, from including your own visits and navigation trends from the statistics of websites you’re working on. The is can be useful if you want to ensure that your website stats are those of your actual visitors, and not your own.

While there are other ways to accomplish the same thing (such as creating an IP filter in Google Analytics), there are many situations where a extension like Block Analytics is an easier solution. If your IP address changes regularly, or if you work from a variety of locations, or if you don’t have access to Analytics for all the sites you’re working on, Block Analytics can be exactly what you need.

It should be noted that this extension is not intended to mask your presence on all websites - the creator expressly says so in its description.

Closing Notes on Browser Extensions

Chrome is a powerful web browser, but some of its best functions are hidden behind a series of annoying steps or require deeper knowledge of web development. If you spend a lot of time working online and feel like too much of it is focused on repetitive, mundane tasks, you may want to look into adding a few browser extensions.

Between the half dozen or so extensions I use on a daily or weekly basis, I estimate they save me at least five or six hours a month. That’s enough time to knock out a small project, or spend a half day relaxing. But time isn’t the only benefit of these extensions; they also save a lot of frustration that can result from the more mundane aspects of web design work. The more you keep your mind clear, the more you can stay creative and design beautiful websites.

Do you use other useful Chrome extensions on a daily basis? Let me and other readers know in the comments below!