30+ Useful Chrome Extensions for Web Designers
I love Google Chrome. Its simplicity, speed and performance are undoubtedly top-notch. But sometimes, being too simple can also be a problem, especially for us web designers who rely heavily on add-ons. I walked away from Chrome back in 2008 just because it had no addon .
But now things have changed at the Chrome side as there are so many Chrome Extensions being created every day that are similar in function to Firefox add-ons. From video creators to productivity enthusiasts, there’s an extension for everything and everyone.
So, I dug into those extensions and through my personal experience picked up 40 extensions that can be very helpful for web designers to share with you guys. Take a look at the following list to gear your up Chrome and boost your productivity.
10 Must-have Chrome Security Extensions
From managing tabs to increasing productivity, Chrome has a whole bunch of handy extensions to empower the user.... Read more
Having a headache finding the right color scheme from an image? Chrome palette solves your problem efficiently by creating up to 64 color palettes from a website’s image for your design or inspiration needs.
No more guessing and tiring program switching, Font Editor allows you to modify and observe font settings like size, line height, and variant lively.
Change Fonts on Any Websites with This Chrome Extension
Ever wanted to see how a different font might look on a website? Using the Font Swap extension,... Read more
Google Font Previewer
As specified in its name, this extension allows you to preview fonts from Google Font Directory with text styling options which are size, style, weight, and shadows. If you want to use a particular font, you can copy and paste the link and the CSS code provided in the extension to your website’s code.
A must-have extension for web designer and developers, Web Developer aims to provide every piece of information you need from an existing website. The extension is also armed with useful tools like color picker, window resizer, validator, etc.
Stylebot grants you the ability to style any website directly without touching CSS code, which saves a lot of typing work. The best feature of this extension is probably its ability to generate CSS code for your use every time you make a change to the website.
Tired of pushing ‘Inspect Element’ every time you want to know what CSS style is applied to a certain element? CSS Viewer helps you by displaying essential information such as font, color, and positioning of the element.
BuiltWith Technology Profiler
The coolest part of this extension is that it lists out every implemented web technology such as frameworks and web standard with very detailed information.
IE Tab Multi
An extension similar to the original Internet Explorer, IE Tab Multi is your Internet Explorer within Chrome which supports tons of IE’s default features like multi-tabbing.
With Window Resizer, you can test your website’s screen resolution compatibility with a standard or user-defined screen resolutions.
One of the best validator extension that can validate HTML code of online or localhost web page in either auto or manual mode. You can also choose to show the validation result in the web page or view it in a completely new tab.
With various themes and font options, Sight highlights the source code of the website into a more visually comfortable form.
Being bugged by PHP errors but don’t know what and where it is? PHP Console assists you by displaying errors, exceptions and debugging messages in notification form.
jQuery API Search
Stay Focused acts as your virtual supervisor that blocks time-wasting websites for a specified time, and advises you when you try to unblock or decrease the blocking time for the site. It’s also armed with crucial features like nuclear option and challenge mode which kills your time wasting desire in a merciless manner.
With PopChrom, you can define your own shortcuts for text phrases, such as ‘ty’ for ‘thank you’. The activation key is needed to transform the abbreviation into the defined text phrases, so choose a key combination that does not clash with other shortcut keys.
With an easy-to-setup account, you can use this task manager to jot down and edit every task you need to complete. The best part of this extension is your tasks are stored online so you can access the task record anywhere with this extension installed.
Chrome Page Extended
Nobody loves to click more to access a certain page, Chrome Page Extended is your fastest shortcut to access all necessary Chrome page like Extensions.
With AppJump, you can organize and quickly launch Chrome applications from the browser toolbar.
Bookmark Bar Switcher
Too many bookmarks and you cannot organize them efficiently? Boorkmark Bar Switcher allows you to create a brand new bookmark bar and switch between them easily.
Save your windows sessions and restore them later on any computer with TabCloud, which saves you a lot of time spent in re-opening different websites from a different part of the bookmark folder.
Developed by search engine giant Google, Similar Pages searches the web for similar web content that you are reading and may be interested in knowing more about.
A totally awesome screenshot extension that captures any part of the website and annotates it with rectangles, circles, arrows, lines, and text. You can then export the screenshot in PNG file format to your computer or web.
Clip to Evernote
Official extension by Evernote to save anything that you may find interesting on the web and then upload it to Evernote. The extension also supports the feature to search and synchronize your saved note.
Use Diigo to highlight, annotate or post sticky notes privately or publicly to a web page so you can view it on anytime you reach to the web page.
Think Thinkery as your online brain, then save your link address and text selection into it for viewing later.
CSS Feature Toggles
You can use this extension to turn off and then turn back on some CSS features. It’s a handy extension to test your site when certain CSS features are not available.
An extension that will format JSON data output of a URL into proper formatting and color highlighting. It makes it a lot easier to read and debug JSON right from Chrome.
A utility extension that can identify Accessibility violations on your website as well as provide recommendations on how to solve it.
Read Also: Designer’s Guide to the Basics of Web Accessibility Design
This extension offers the browser native design mode, among other things, which will allow you to edit a site text, padding, and color directly on the screen.
Finding color inspiration is now easier. This extension will add curated color compositions from TrendyPalettes.com right in the browser tab.
Use this extension to inspect CSS on a website more conveniently. As you hover over the website, it’ll display things like font-family, colors, text-align, and the box-model on the floating box as shown below.
This makes Github so much better to use. This extension improves awkward spacing, and layouts and adds some conveniences when using Github.
This extension makes your Github viewing 100% cooler by turning the contribution tiles into 3D.
As Chrome extensions and applications continue to grow and evolve wildly, it’s possible that more and more Firefox lover will embrace Google Chrome as their default web browser. With that being said, will you turn your face to Google Chrome with its current number of extensions and applications? What’s the extension, application or feature that will motivate you to move to Google Chrome?
Also, do share to us if you have nice extension in your Chrome, there’s always a space for great tool!