8 Must-Have Chrome Browser Extensions for Agency Designers

Google’s continuous development of the Chrome browser has brought it a long way over the years, made especially useful due to a massive collection of browser extensions. These allow you to extend the functions and features of Chrome far beyond what comes with the original app.

Google Chrome Web Store is filled with thousands of extensions, including games, office suites, password managers, to-do list apps, and much more. The best part is they are all free to use. But, are there any useful extensions for designers?

While Firefox has Firebug, Chrome also has its own collection of amazing extensions made for web designers. Here are a few of the best Chrome extensions that will help make your web design work much easier.

WhatFont

You’ve stumbled upon a beautiful website design with a gorgeous font that you’ve never seen before, and you want to use it in your next design. But how are you going to find which font it is?

Well, if it’s in the webpage itself, you can inspect the element and search through the page source code and try to find the font name. But this can be fiddly, and take some digging — the WhatFont extension can help.

This Chrome extension allows you to identify the fonts on a web page by simply hovering your mouse over the page element. Not only that, the tool will also tell you whether the font is from Typekit or Google Fonts.

Eye Dropper

Creating the perfect color palette for a website design project is not an easy job. You spend hours browsing through beautiful website designs looking for inspiration, and then either dive into the page source code (or take a screenshot and open it in Photoshop) to find the Hex and RGB codes for colors used.

You don’t have to go through all that trouble anymore. The Eye Dropper tool will make this job a piece of cake. Just as its name suggests, Eye Dropper is a popular Chrome extension that lets you pick the colors from web pages to create your own color palettes, and choose colors that have been picked by the professionals.

CSSViewer

When you see a beautiful element on a web page, the first thing you might want to do is inspect the element to figure out what kind of CSS and HTML the page uses. This method is messy though, and finding specific CSS code in the standard browser inspector can be fiddly.

CSSViewer does this exact same job, only much smoother and clearer. This extension details the CSS code for a web element in a beautifully categorized interface with sections for the fonts, colors, and other styles. All you have to do is install the extension and hover your mouse over an element.

Resolution Test

This is a useful browser extension that you can use to test your website design at different screen resolutions. Usually, you have to use web services or different devices to do this, but with this extension, you can run tests from inside the Chrome browser window.

For designers who are targeting both new and old devices and screen types, this tool will prove useful for testing web pages at low and high screen resolutions.

Edge: The Web Ruler

This useful Chrome extension will allow you to measure all kinds of elements in a web page — whether it’s a button, an image, or even font size — with ease. The Web Ruler allows you to measure objects in pixels, inches, and centimeters as well, so you can check whether your design is showing up as intended.

Awesome Screenshot

There are many screenshot capturing extensions available for Chrome, but Awesome Screenshot is one of the best tools for designers. It comes with plenty of great features that prove invaluable.

While most other screenshot capturing tools only capture full-page screenshots of a web page, Awesome Screenshot not only captures the screenshot, but also allows you to edit, annotate, and even save your screenshots online to access from different devices or share with your colleagues.

The extension also includes several other useful features like capturing selected parts of a web page, delayed captures, capturing only the visible part of a web page, and more.

Image Downloader

Tired of opening images on a web page in new tabs, and right-clicking every time to save images one-by-one? Install this extension and you’ll be able to download all the images on a web page in bulk.

With the Image Downloader extension, you can view all the images contained on a web page, see the links to those images, filter the images by width, height, and URL, and download them all at once without having to save images one by one.

Stylebot

Want to instantly redesign a popular website, like Twitter.com, to see what it looks like with different fonts, colors, or backgrounds? Then this extension is just for you.

Stylebot is an interesting Chrome extension that web designers will fall in love with. Using this tool, you can quickly experiment with web pages by applying different styles and manipulating the web pages with custom CSS. All while instantly previewing the changes right on your browser.

This extension also has a small community where you can preview and install styles created by other Stylebot users. It’s a fun tool to play with and run simple tests on your own web pages (or improve the design of a site you visit regularly!)

Conclusion

We’d definitely recommend you explore and experiment with these Chrome extensions. But think twice before going ahead and installing everything in one go — the most important thing is that your browser stays fast, snappy, and clean of too much junk!

If you know of any other great Chrome extensions that are useful to designers, feel free to share them through the comments section.