Monday, 22 April, 2019 UTC
Summary
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. 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.
Read Also: 10 Must-have Chrome Security Extensions
Chrome Palette
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.
Font Editor
No more guessing and tiring program switching, Font Editor allows you to modify and observe font settings like size, line height, and variant lively.
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.
Web Developer
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
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.
CSSViewer
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.
Window Resizer
With Window Resizer, you can test your website’s screen resolution compatibility with a standard or user-defined screen resolutions.
HTML Validator
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.
Sight
With various themes and font options, Sight highlights the source code of the website into a more visually comfortable form.
PHP Console
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
While jQuery has proven itself to be the leading Javascript library that improves user experience, jQuery API Search allows you to search through jQuery API from Chrome Omnibox. Just type ‘jq’ followed by a space in omnibox, then you are on the go.
Stay Focused
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.
PopChrom
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.
Todoist
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.
AppJump
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.
TabCloud
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.
Similar Pages
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.
Awesome Screenshot
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.
Diigo
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.
Thinkery
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.
JSON Formatter
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.
User JavaScript and CSS
This extension allows you to write a customize JavaScript and CSS code from Chrome and apply to websites or specific URLs. You can also load popular libraries like jQuery, or others by specifying their URLs.
Axe
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
VisBug
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.
PalletesTab
Finding color inspiration is now easier. This extension will add curated color compositions from TrendyPalettes.com right in the browser tab.
CSS Peeps
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.
Designer Ruler
A ruler on the browser. You can add multiple rulers with different colors, change unit or rotate it around. It’s particularly handy to measure distance and elements on a website in the traditional way.
Refined Github
This makes Github so much better to use. This extension improves awkward spacing, and layouts and adds some conveniences when using Github.
Isometric Contributions
This extension makes your Github viewing 100% cooler by turning the contribution tiles into 3D.
Reflection
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!
The post 30+ Useful Chrome Extensions for Web Designers appeared first on Hongkiat.