20 Useful Google Chrome Extensions for Web Designers

Extensions are small software programs that can modify and enhance the functionality of the Chrome browser.

You write them using web technologies such as HTML, JavaScript, and CSS.
Extensions bundle all their files into a single file that the user downloads and installs. This bundling means that, unlike ordinary web apps, extensions don’t need to depend on content from the web.
Today we decided to pick up20 most useful extensions which are extremely helpful for web designers and share with you friends.

Color

Colour Tweaker

Quit trying to guess hex codes when tweaking/editing colors in Inspector, and get them spot on first-time with this extension’s live-updating palette, perfect for picking the ideal color!

ColorPicker 0.9

This extension is ‘mainly meant for experienced web developers’ who need to:
– pick colors on any web page, either pixel exact or within an area
– quickly see color changes on their website without the need of external
applications or to search for the right spot in style sheets or code…
– check for WCAG 2 compatibility, or just to
– collect colors from sites to quickly set up a color palette

Palette for Chrome

Create a color palette from any image. Just right-click on the image and select the ‘Palette for Chrome’ option. Do you want to create a color palette that matches an image from your website? Or maybe you just want to grab some colors for inspiration? Then this is the extension for you!

Typography

Google Font Previewer for Chrome

Lets you choose a font from the Google Font API directory, and apply that font to the entire page or a specified CSS selector to see how it looks. Useful when you’re designing a website and want to quickly find a font that will look good. If you always use the same fonts, you can star them for quick access.

Font Editor

Use this extension to test different fonts, font sizes and much more on any website.
Click on the *F* to minimize.

Development

Firebug Lite for Google Chrome

Firebug Lite is not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elements with your mouse, and live editing CSS properties.

CSSViewer

CSSViewer shows the css parameters of any element in a web page, to enable/disable it simply click the toolbar icon and then hover any element on you want to inspect in the page.

BuiltWith Technology Profiler

BuiltWith is a web site profiler tool. Upon looking up a page, BuiltWith returns all the technologies it can find on the page. BuiltWith’s goal is to help developers, researchers and designers find out what technologies pages are using which may help them to decide what technologies to implement themselves.

Window Resizer

Resize browser window to emulate various screen resolutions.

HTML Validator

HTML Validator is an extension to validate the HTML code of the current web page. Have it run automatically, click the icon for a menu or press any of the keyboard shortcuts (see below) to validate the current web page.

PHP Console

Here is Lagger – flexible open-source PHP library for errors/exceptions/debugs handling in PHP.

Productivity

Popchrom

Save time and effort with Popchrom by creating your own shortcuts for text phrases! Whether it’s a simple email signature or…

Ananke Timer

Ananke Timer is a simple task timer extension.
– Supports multiple timers.
– Supports pausing of timers.
– Customizable timer names.
– Link a timer with with the current tab URL. Great for tracking time against web based bug-tracking software, or just keeping track of how much time you spend on every-day web-based tasks.

Chrome Toolbox

This extension brings your most frequently used productivity features into Chrome:
– Magnify any image on a web page, set it as your wallpaper, and view it in its original size
– Drag any video on a web page (Flash and HTML5 video) out of the page in its own stand-alone window; closing the window puts it back to the original page, both with play state reservation.

AppJump App Launcher and Organizer

With AppJump you can put Apps and Extensions into Groups to allow easy management. You can also display specific groups of Apps in the launcher and start them right on your browser toolbar.

Resourcing

Google Similar Pages beta

Enjoying the page you’re looking at and interested in other similar pages? Trying to find more pages about a topic you’re researching, but having a hard time coming up with the right query on Google? Google Similar Pages can help!

Awesome Screenshot

Capture the whole page or any portion, annotate it with rectangles, circles, arrows, lines and text, blur sensitive info, one-click.

Microstock Photo Power Search

The Microstock Photo Power Search Tool makes searching multiple libraries for the best microstock stock photos easier than ever.

myNotes

myNotes helps you to easily take notes and bookmark your web surfing experience. myNotes allows you to copy text from a webpage and create a note with this information at the same time. In addition, myNotes automatically bookmarks the URL notes source, so that you can quickly and easily go back to the original webpage source. myNotes eliminates the steps of creating a list of bookmarks, saving additional mouse clicks and avoiding long lists of bookmarks that are often difficult to find later.