'Net Features : chrome extensions

Chrome Extensions for Hyper-Productive Developers

Michael Garrity — Thu, 21 Feb 2013 21:00:00 GMT

One of the fastest and easiest ways to increase productivity and efficiency as a Web developer is to collect an assortment of tools that can help simplify, automate and just generally lessen the burden that different tasks add to your to-do list.

Of course, this isn't news to anyone. What may be useful to know, however, is that the popular Google Chrome Web browser offers a plethora of extensions that could be used to make life easier for developers. If you already use Chrome (and if you work on the Web, you probably do), why not check out these 17 extensions that can help dramatically increase your productivity and, hopefully, get a few extra hours of sleep, as a result.

Eye Dropper
The open source Eye Dropper extension allows users to quickly pick out specific colors from a Web page, advanced color picker or "personal color history" to use in site design and development.

NoCoffee
As a "vision simulator" plugin, NoCoffee allows developers to see how their sites will look for users with a variety of potential vision issues, such as low acuity, low contrast sensitivity, color deficiencies, glare, ghosting, snow or a partial vision block, so that they can then go back and fix their sites to better accomodate these concerns.

jQuery-Injector
With this extension, users simply have to click on their toolbars to have jQuery "injected" directly into the current page that they are working on, and afterwards they can check for successful insertion by running a jQuery command on the page from their JavaScript consoles.

Wappalyzer
This browser extension will "uncover" the technologies used on a website, so that developers can figure out how certain aspects of a site were created. Wappalyzer comes with a list of applications that it detects, which includes content management systems, Web shops, servers, JavaScript frameworks, analytics tools and more.

Code Cola
Developers can easily visually edit a Web page's CSS style with the Code Cola extension. It even comes with a collection of handy patterns to further expediate the process.

ruul. Screen ruler
This is one of those "Why didn't I think of that?" tools that is useful for any and every type of desinger. It is a simple on-screen ruler that helps users line up and measure various aspects of a Web page, including type, line height, strokes and pretty much anything else.

Page Ruler
Sort of like ruul, Page Ruler is a Chrome extension that allows developers to draw a ruler directly on a page in order to discover an area's pixel dimensions and positioning, as well as other page elements.

JSONView
With this extension, developers can rapidly view and validate a page's JSON documents with increased efficiency.

Resolution Test
As the name implies, this extension helps developers test the pages they're working on in various screen resolutions so that they can make any necessary adjustments. It even comes with an option that allows them to define their own resolutions.

Web Developer
An extension with a name like "Web Developer" has to be good, right? This will add a button to the top of a user's toolbar in his or her Chrome browser that features various tools for Web developers, including color, resizing and image tools.

YSlow
This performance tool from Yahoo will make your Web pages faster by analyzing them, grading them on one of three predefined (or user-defined) sets of rules and then suggesting ways to improve their performance based on the results.

Ripple Emulator
Ripple Emulator provides users with a multi-platform HTML5 mobile environment emulator that allows them to test the performance of their websites across a variety of mobile devices, thus reducing the challenge of trying to design for the multitude of available mobile platforms after the initial Web-based site has been created.

Python Shell
The Python scripting language aims to emphasize code readability, making it a favorite among many Web developers. With this extension, they can test Python code or regular expressions; they can even use it as a calculator.

Microformats for Google Chrome
Now, developers can easily display microformats right on their Web pages thanks to this handy extension, which supports hCard, hCalender, hReview, hReview-aggregate, hRecipe and geo.

jQuery Debugger
Working with jQuery has never been easier than with this Chrome extension, which features a Selector Inspector panel that will, not surprisingly, inspect a page's jQuery selectors and watch their matching elements as they're displayed on any website. In short, this extension was designed to help users easily understand even the most complex selectors.

DevTools Autosave
This incredibly useful little extension will automatically save any changes in CSS and/or JavaScript that were made with Chrome DevTools, meaning you'll never have to worry about losing your work again!

960 Grid System Overlay
Technically, this is an "unoffical" tool, but it still rocks. This extension allows users to overlay a 960.gs guide over a Web page that is using the 960 Grid System by simplying right-clicking on the "960" icon in their browsers. They can even change the default colors of the overlay.

23 Must-Have Chrome Extensions for Web Professionals

Pete Prestipino — Fri, 12 Feb 2010 20:00:00 GMT

As I was running some analytics reports early this week, I checked in on the number of visitors with the Chrome browser. Much to my surprise, the percentage has nearly tripled year over year to nearly 10% of all unique visits. That's pretty impressive, and its relative success could in part be attributed to the activity in extensions, which provide users with more features and functionality to the browser (just like Firefox add-ons).

While you may not be a Chrome user today, perhaps the extensions below will help change your mind. Let's look at what we consider to be 23 must-have Chrome extensions for Web professionals.

Stay on Top of Internet Tools, Trends and Techniques:
Request a professional subscription to Website Magazine,
the most popular print publication on Web success.

Some Chrome Extensions for Web Designers

You might also want to check out how your site design appears for those using advertising blockers such as AdBlock or AdThwart. Checking a site for how it appears to users with extensions like FlashBlock (which automatically blocks flash content on web pages) is important as well.

It's not just the ads that users might be blocking. IE Tab by Blackfish Software displays web pages using IE in a tab and is another must-have extension. Great for web developers who want to test the IE rendering engine, users who visit sites with ActiveX controls, and those who want to use the explorer view for local files (i.e. file:// URLs). Another of my favorite design-related extensions for Chrome is Webpage Screenshot which lets you save JPG screenshots of a whole Web page. Another option is Aviary Screen Capture which lets users take a screenshot of a webpage and edit it directly within a browser with Aviary.com applications.

Social Sharing Extensions for Chrome

The Google Share Button enables Web professionals to share web pages to social networks, emails, etc. using the click-to-share button. Again, nothing really groundbreaking, but certainly useful. If the thought of having one Google product embedded in another Google product is too much for you, check out the virtually identical Shareaholic. While those are two excellent extensions, I still prefer this Ping.fm extension myself.

Should you keep your social sharing to a minimum, there are some extensions for individuals sites. The official Digg extension for Chrome shows the Digg count for any URL (displayed next to the address bar). Clicking the icon displays the title and comment count for the URL and provides a button to Digg it remotely. The Delicious for Google Chrome extension lets users keep, share and discover sites using the Delicious Web service. If you are only looking for a URL shortening service, consider the Bit.ly extension.

Perhaps the best of the social sharing extensions for Chrome is the Social Graph Analyzer, which lets you discover profile pages whose owner is simular to the page you are currently browsing.

And of course, no article would be complete without at least a few Twitter extensions worked in for good measure. Chromed Bird is an extension that allows you to follow timelines and interact with your Twitter account plus quite a few additional features including previewing. Another excellent and very powerful Twitter client to consider is Chrowety.

Chrome Extensions for Developers

Speed Tracr is another official Google extension for Chrome that helps web developers identify and fix performance problems in applications such as JavaScript parsing and execution, layout, CSS style, network resource loading, DOM Event handling and more. This is perhaps the best extension currently in the market for developers. Another exceptional extension for Chrome is Firebug Lite, a tool that allows for the editing, debugging and monitoring of CSS, HTML, and JavaScript live in any web page. This is an unsupported port of Firebug Lite for Chrome.

I am not really sure where to put this next extension but under the "developer" category is probably as good as anywhere. Proxy Switchy is an advanced proxy manager for Chrome that allows users to manage and switch between multiple proxy profiles.

Chrome Research and Writing Extensions

The Google Similar Pages extension could prove to be useful, as it shows pages similar to the one being visited. Couple that with the Zemanta extension for Chrome and access contextual suggestions, affiliate linking support, re-blogging support, and filtering of suggested images for copyright. Another extension that facilitates greater productivity in content development is the Evernote Web Clipper, which lets users save content they see while browsing the Web and access those clips in the cloud.

Editors Note: Another Chrome extension that we overlooked (and that is definitely worthy of a mention) is Surf Canyon. The extension automates the discovery of relevant information in search results on Google, Yahoo!, Bing and Craigslist.

SEO Extensions for Chrome
Chrome SEO is an extension that offers some good SEO tools and resources, including how many pages are indexed in current search engines, the number of back-links, current traffic and rankings, bookmarks, cached versions, domain details and a lot more. Chrome SEO has over 100,000 users, making it one of the most popular extensions in the market. Another extension to provide some useful information on search engine optimization is SEO by Sean Bannister, who also created the Chrome SEO extension. The SEO extension is really just a rewrite of David Naylor's SEO Playground tool, released as a Chrome extension.

Cool Productivity Extensions for Chrome
Mouse Stroke has to be the most brilliant of those featured in this article. The extension enables the use of mouse strokes as gestures in the browser. For example, designate a squiggly line to be the back button (or use the list of built-in strokes on the options page) on your browser. Another very strong contender among mouse gesture extensions is Smooth Gestures.

Do you have a favorite Chrome extension that we didn't cover? Or a Firefox add-on/extension that you'd like to see ported to Chrome? Share your comment below now!