Navigation

25+ Must-have Chrome extensions for web designers and developers

Design, Resources, Web Development | Aug 31, 2011

For many web designers and developers, Firefox is unsurpassable. For others, Firefox eats Chrome’s dust.

For the past two years, since Google Chrome’s release, there’s been a raging debate on which browser is superior. Mozilla’s open source product has stood the test of time and Firefox has quickly become the most used browser, having surpassed Microsoft’s Internet Explorer.

Don’t feel sorry for Google Chrome, however. Even in its infancy, Chrome has already reached second most popular, having already surpassed Internet Explorer and with a high chance of surpassing Firefox.

Although Firefox is more robust (primarily due to its popularity), Chrome is lightning fast and, with new extensions added daily, an exciting option for the serious web designer.

And here you are to find tools that make Chrome useful to you as a designer or a developer. Fortunately, Chrome has a burgeoning collection of extensions that will make the transition from Firefox a lot easier.

 

1. AppJump App Launcher and Organizer

After you finish downloading all the extensions in this list, you’ll definitely need an organizer. AppJump is a Chrome extension that allows you to locate and launch your applications and other extensions quickly from a drop down menu on your toolbar. One cool feature of AppJump is the ability to organize apps and extensions into different groups. For example, you can easily separate your work extensions from your personal, for more effective time management.

 

2. Awesome Screenshot

Awesome Screenshot lives up to its name. This awesome extension allows you to take snapshots of the whole or partial page. After taking a screenshot, you can circle or underline relevant parts, blur out irrelevant parts and make comments. You have the option to save to local or upload and receive an image link for sharing.

 

3. Aviary Screen Capture

After waxing poetic about Awesome Screenshot above, you may wonder why two screen capture extensions are added on this list. One downside to Awesome Screenshot is that it requires access to all the data on your computer and your browsing history. For those users who feel that is an invasion of privacy, Aviary is a perfectly capable option.

 

4. Chrome Sniffer

Chrome Sniffer allows you to check the framework of any website. It locates and displays any known Content Management System (CMS) or Javascript library on a website. This extension is great for those mind-blowing websites that leave you wondering, “How is that humanly possible?” Currently, Chrome Sniffer can detect over 100 frameworks.

 

5. Cloud Save

There’s a huge shift from operating locally to working in the cloud. As designers and developers, you are accustomed to working on the internet, but do you also save important files online? If your excuse is that it’s not so convenient, you may want to take a serious look at Cloud Save. Cloud Save allows you to save files from any website to supported cloud services. Save to Amazon Cloud Drive, Dropbox and Flickr.

 

6. Code Cola

Code Cola is an extension that allows users to edit individual pages inside of a website. The extension allows you to click on an area within a web page and edit the CSS automatically.

 

7. Corporate Ipsum

Corporate Ipsum is a fun alternative to the standard Lorem Ipsum text filler. With this extension, you can populate your website with “corporate” speak and buzz words. An example of Corporate Ipsum is, “Competently target enterprise-wide data with multifunctional ideas.” This extension is based on the popular Mac widget of the same name.

 

8. Diigo Bookmark, Archive, Highlight and Sticky Note

Diigo is short for Digest of Internet Information Groups and Other stuff. It is an online research tool that allows users to manage information. Highlight webpages in multiple colors, make sticky notes, exchange pages across your social network and create groups to share your research.

 

9. Drag2up

Drag2up is an easy to use file attachment system. Instead of clicking through various windows, simply drag the file you’d like to attach from your computer onto the input field. Alternately, you can upload files to various hosting sites, including Flickr, ImageShack, Twitpic, and Box.net. This extension is easily one of the must-have downloads.

 

10. Eye Dropper

Every now and then, you come across the perfect shade of green that you must incorporate into your web design. The Eye Dropper extension allows you to locate the exact shade. It also keeps track of your colors history.

 

11. Firebug Lite

Firebug is one of the great tools that makes it difficult to transition from Firefox and leave it behind. Fortunately, Chrome has an extension called Firebug Lite that offers a similar function. Firebug Lite works along side Chrome Development Tools to enable developers to inspect and edit HTML and DOM elements. It also allows you to debug with ease. Firebug Lite is actually a JavaScript file that acts like the original Firebug once inserted into a web page.

 

12. Greplin

Greplin is an extension that allows you to search within your private data. Use this extension to locate a piece of information you post on various social websites, including Twitter, Facebook or even Gmail. It indexes your data for easy searching. Instead of dredging through your history, you can easily call up data with Greplin.

 

13. HTML Instant

HTML Instant is a real time HTML. It  features a split screen. As you type your code on left side of the split screen, you see the results automatically on the right side. HTML Instant not only works with HTML, but it also supports CSS and JavaScript. You can also upload images from your Image Shack, Photobucket, or a random website that’s hosting an image. This HTML editor is very user friendly, for the novice designer.

 

14. IE Tab

The IE Tab extension allows you to view a webpage from a simulated Internet Explorer, while still using your Chrome browser. Internet Explorer is still the preferred browser of most internet users. And there are still some sites that work best or even exclusively with Internet Explorer. This tab allows you to use Internet Explorer without sacrificing your dignity. First things first, IE Tab only works on Windows. This is because it uses Window’s built in rendering engine for Internet Explorer. For that reason, Mac users are out of luck on this one.

 

15. Image Properties Context Menu

Image Properties Context Menu is a useful Chrome extension that provides information on all things related to a selected image. Users can find both the location and the source of an image. It also shows the image’s dimensions and file size. It’s a simple but effective extension that is somehow not included in the Chrome browser.

 

16. MeasureIt!

MeasureIt is a ruler that you use to find the dimensions of any element on a web page. Simply click on the extension and drag out the ruler to find the dimensions quickly and easily.

 

17. Microstock Photo Power Search Tool

What separates a good web designer from a great web designer is knowing where to go for stock images. Any designer knows that finding the right image is one of the most time consuming parts of design, especially if you have several go-to resources. This extension allows you to search microstock on 5 of the top stock agencies, including Dreamstime, Fotolia, and Shutterstock.

 

18. Palette for Chrome

The Palette for Chrome extension is instantly useful. Right click on any image you’d like to use. This extension creates a 16, 24, or 32 color palette. Alternatively, you can also create a custom palette. Use this extension to incorporate and convey the colors from your favorite image into your web design.

 

19. Pendule

The powerful Pendule extension combines several of the extensions found in this list. Pendule allows you to view and alter Javascript and CSS. You can also view information about specific images or hide them altogether. It’s a robust developer tool that includes a color picker, an HTML and CSS validator and a link checker.

 

20. PlainClothes

PlainClothes is a fun and useful extension that allows you to see the bare bones of a website. Sometimes it’s easier to see mistakes in a design or analyze why it works so well when it goes black and white. PlainClothes allows you to strip down an webpage to one text color, one background color and one link color. Links are underlined, text is your default and suddenly, you’re in 1998 again. Actually, PlainClothes works very well for adding accessibility to your web design.

 

21. Resolution Test

Change the size of your browser to test your website in various resolutions. Resolution Test comes with preset resolution sizes, but you can also view in your own specified resolution.

 

22. Search by Image

Search by Image is one of my favorite Chrome extensions. This extension allows you to find a specific image on different websites. With Search by Image, you also have the option to find similar images. Simply right-click on the image of interest and select “search Google with this image.” You will find pages that include matching images or are visually similar.

 

23. Session Manager

The Session Manager extension saves all of your currently opened tabs for later perusal. This extension is extremely useful if you, like most, find yourself opening the same pages over and over again. Group and save related tabs in Session Manager. For example, bundle all of your social networking sites together so that you can quickly access them without having to individually open each site. And close them just as quickly, with assurance that your tabs are saved.

 

24. TabJump

Similar in scope to Session Manager, TabJump goes a step beyond. Not only does it manage your tabs, this extension can also lock tabs, preventing you from closing an important tab accidentally. If you do close a tab by mistake, TabJump will allow you to re-open it, but keep in mind that extensions cannot restore history.

 

25. TooManyTabs

Because there can never be enough extensions to address browser tab management, TooManyTabs is another must-have. This extension shows a thumbnail of all of the tabs you have open. This comes in handy when you’re operating with so many tabs that you can no longer read the tab titles. Having a visual aid helps you sort through your workspace effectively.

 

26. Web Developer

Web Developer is another comprehensive developer tool. It is by the same developer who wrote the wildly popular Firefox extension. With this extension, users can view and edit CSS, display image file sizes and clear session cookies.

 

27. WhatFont

For most web designers, fonts are kind of a big deal. Have you ever happened upon a random website and found the perfect font, only to search endless code for answers? If you like things simple, install this font finding extension. Simply hover over a text and find the font in use. Not only will this extension tell you the name of the font, it also gives font size and color.


Jacqueline Thomas is an award-winning writer and web design consultant. Find her on her website and follow her on Twitter.

Do you have any favorite extensions that didn’t make this list? Please share it with us in the comments.

Share this post
Comments (no login required)
  • Donna Fontenot

    Please reconsider recommending Awesome Screenshot. Part of its “awesomeness” included dropping some malware into it in the form of sneaky affiliate links being added to everyone’s google results.  You can see the unveiling of the discovery at www.seroundtable.com/google-amazon-treatment-13881.html

    • http://awesomewallpapers.wordpress.com/ Ben

      The developers of the extension released an update that removed the affiliate results from the extension.

    • http://websiteideas101.com/ WebsiteIdeas101

      Thanks for your suggestion. Some affiliate adverts are really annoying me. 

  • http://enlightr.com Craig Thomas

    Nice list – never heard of AppJump and PlainClothes, which I will be trying out. Bit of a shameful plug, but I always had an issue as a web developer to know the IP of the current website I’m working on (useful for knowing which server to login to). So I made a simply extension to show me the current website’s IP in the bottom right: https://chrome.google.com/webstore/detail/ghbmhlgniedlklkpimlibbaoomlpacmk?hl=en&hc=search&hcp=ext - Might be helpful for other web developers too as all other IP extensions for Chrome just don’t cut it.

  • http://homegrownclone.com/ roto

    Awesome resource, but, uh…where’s the google +1 button on this site?

  • http://twitter.com/chipcopeland Chip Copeland

    I think Google’s Screen Capture is also a simple and easy to use extension for capturing images

    • http://superdit.com aditia

      agree with you it simpler than any other chrome screen grabber 

    • http://superdit.com aditia

      agree with you it simpler than any other chrome screen grabber 

  • http://twitter.com/jasonmulligan Jason Mulligan

    Great list! Just curious why you have Firebug light when Chrome has more comprehensive developer tools available (ctrl-shift-i).

    • http://twitter.com/michaelstrelan michaelstrelan

      Or F12 works these days too. But yes, Firebug Lite shouldn’t be on a list of “must-have” chrome extensions. Firefox is the only browser now that doesn’t have good built in dev tools.

  • Samueljesse

    Great resources, thanks

  • http://twitter.com/shivabeach Shiva

    I am an admitted Firefox user.  But unfortunately while Firefox is an excellent browser it puts out upgrades to quickly for many of its plug-in makers to respond to.  I now have webpages that will not display some images in Firefox, I find that it has slowed down due to the plug-ins I have used, and I am finding conflicts between plug-ins as people very quickly try to keep up with the Firefox updates.  I think they could do a far better job.  I am also using chrome on a regular basis and find it to be much cleaner and much easier to use.  I do have several of the above plug-ins and I’m certainly going to look into the rest of the ones that you mention

  • http://twitter.com/DaquanWright Daquan Wright

    I love this list, awesome! I’ve got a good number of those installed already.

    Just wondering, is the “Session Manager” available for Firefox?

  • Anonymous

    Some great things here that I didn’t know about, thanks for sharing

  • Arnold Camas

    html5 outliner

  • http://twitter.com/elohimito Dustin Ranem

    Wow, I just cut the size of my address bar in HALF! lol. Thanks for the recommendations!!

  • Ellis Benus
  • http://twitter.com/jasonjflaherty Jason Flaherty

    Nice list. HOLY SMOKES! The web is exploding… I can’t keep up with it. Chrome is a great browser, but I still dig on Firefox for development. Chrome really took my browser to  a new level with the sync option though…. 1 browser to use at home and work is just tooooo useful.

  • Anonymous

    Thanks, a few I hadn’t seen before. 

    *cloud Save* appears to have been deleted :( 

    • http://twitter.com/shivabeach Shiva

      There is a cloud save button app, I didnt try it but it appears to do the same as above

  • http://twitter.com/andreaskian Andreas Kian Krohn

    I use META SEO Inspector alot when testing a new site:
    https://chrome.google.com/webstore/detail/ibkclpciafdglkjkcibmohobjkcfkaef

  • Traveler

    Really? Must have? Really?

  • Traveler

    Really? Must have? Really?

  • Traveler

    Really? Must have? Really?

  • http://pulse.yahoo.com/_4J37TIUYC56QC4NAXTGQGKSDDM sam

    This is large collection for me after a Firefox to chrome a think web
    designer will surely like your web post as i too a web designer thank you for the great post
    http://www.desua.net/

  • http://pulse.yahoo.com/_4J37TIUYC56QC4NAXTGQGKSDDM sam

    This is large collection for me after a Firefox to chrome a think web
    designer will surely like your web post as i too a web designer thank you for the great post
    http://www.desua.net/

  • Sharath

    Nice one.

  • Sharath

    Nice one.

  • Sharath

    Nice one.

  • http://smallbig-blog.tumblr.com/ Tobi laniyan

    Nice thanks for posting this up very useful

    Tobi 

  • http://twitter.com/webgrafismo WEBGRAFISMO

    Anyone recommends a extension for FTP ?!

  • http://twitter.com/michaelstrelan michaelstrelan

    Problem with MeasureIt! is that it causes a bug with phpMyAdmin – you can’t switch database using the select list in the left sidebar while measure it is enabled.

  • Guest

    MeasureIt! dont work… 

  • Guest

    MeasureIt! dont work… 

  • http://detsadkazan.ru/ IngArt

    Huge selection!!!

  • http://detsadkazan.ru/ IngArt

    Huge selection!!!

  • http://detsadkazan.ru/ IngArt

    Huge selection!!!

  • http://detsadkazan.ru/ IngArt

    Excellent selection for Chrome.

  • Anonymous

    Why there is some extension when Web developper regroup some of them like resolution test, measure it, eye dropper and so on

  • http://twitter.com/SpidersDesign Daniel Chatfield

    Chrome has already surpassed internet explorer and firefox did ages ago – get your facts right

    • http://www.webdesignerdepot.com Walter

      Thanks for pointing that out. We’ve corrected this.

  • gui harrison

    I already have a lot of extensions and this list made me add FIVE more.

  • http://www.facebook.com/BootCamp4Me Lonnie Fluty

    Love resolution test (much easier than going to resizemybrowser.com) and whatfont… I have been using a few others but this is a great list!

    exactly the type of recommendations I come to this site for!

  • http://www.webndesign.com.br sweetgunner

    Loved the list :)

  • Anonymous

    Wow! That’s a lot of stuff, 2 screen capture extensions seems excessive. (Google do their own for Chrome which is also good)

    I don’t understand why you’d want Firebug lite when you get better, more powerful native tools included. That seems like a bit of a space filler!I only have a few installed

    Chrome Screengrab
    Umbraco Debug
    Bitly (hardly used though)

    Just added in MeasureIt and Colour Picker which were two of my favourite FF add ons. 

  • Anonymous

    Wow! That’s a lot of stuff, 2 screen capture extensions seems excessive. (Google do their own for Chrome which is also good)

    I don’t understand why you’d want Firebug lite when you get better, more powerful native tools included. That seems like a bit of a space filler!I only have a few installed

    Chrome Screengrab
    Umbraco Debug
    Bitly (hardly used though)

    Just added in MeasureIt and Colour Picker which were two of my favourite FF add ons. 

  • Anonymous

    Wow! That’s a lot of stuff, 2 screen capture extensions seems excessive. (Google do their own for Chrome which is also good)

    I don’t understand why you’d want Firebug lite when you get better, more powerful native tools included. That seems like a bit of a space filler!I only have a few installed

    Chrome Screengrab
    Umbraco Debug
    Bitly (hardly used though)

    Just added in MeasureIt and Colour Picker which were two of my favourite FF add ons.