Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 03 2014


Creating Brackets Extensions

A little while ago I wrote about the recent updates to the Brackets editor. Brackets is an open source project focused on web standards and built with web technologies. It has a narrow focus and therefore may not have a particular feature you’ve come to depend upon. Luckily, Brackets ships with a powerful extension API that lets you add any number of new features. In this article, I’m going to discuss this API and demonstrate how you can build your own extensions.

It is crucial that you remember that Brackets is in active development. This article is being written in December of 2013. It is certainly possible that the code demonstrated below is now out of date. Keep that in mind and be sure to check the wiki for the latest updates to the extension API.

Getting Started

I’m going to assume you read my last article and are already familiar with the extension manager. This provides a simple, one click method of installing extensions. One of the best ways you can learn to write extensions is by looking at the work done by others (that’s how I learned). I’d recommend grabbing a few extensions (there’s almost 200 available now) and tearing apart their code. Don’t be afraid to break a few while you’re at it.

Brackets puts all installed extensions within one main folder. To find that folder, go to the Help menu and select “Show Extensions Folder“. For my OS X install, this was located at /Users/ray/Library/Application Support/Brackets/extensions/user. If you go up from that folder, you’ll notice a disabled folder as well. Brackets will make a valiant effort to load no matter what, but if you ever find yourself in a situation where Brackets has completely crapped the bed and simply will not work, consider moving potentially bad extensions into the disabled folder. Later on in the article, I’ll discuss how you can monitor and debug extensions to help prevent such problems in the first place.

Begin by going to your user folder and creating a new folder, helloworld1. Yes, even though it is completely lame, we’re going to build a HelloWorld extension. Don’t hate me, I like simple. Inside that folder create a new file called main.js. Listing one shows what the contents of this file should be. Note that in this article I’ll go through a couple of different iterations of the helloworld extension. Each one will be named with a progressively higher number. So our first example is from helloworld1, the next helloworld2, and so on. It would make sense for you to simply copy the code into one folder, helloworld, instead of copying each one by themselves. If you do, you’ll have multiple related extensions running at once and that can definitely confuse things.

Listing 1: helloworld1/main.js
define(function(require, exports, module) {

    function log(s) {
            console.log("[helloworld] "+s);

    log("Hello from HelloWorld.");

The first line defines our extension as a module that will be picked up by Brackets automatically on application load. The rest of the extension is a custom log message (you will see why in a second) and a call to that logger. Once you have this file saved, go back to Brackets, select the Debug menu, and hit Reload. (You can also use Command/Control+R to reload as well.)

Brackets will reload and … nothing else will happen. The extension we built didn’t actually do anything that we could see, but it did log to the console. But where is that console? Brackets provides an easy way to view the console. Simply go back to the Debug menu and select Show Developer Tools. This will open a new tab in Chrome with a familiar Dev Tools UI. In the screen shot below I’ve highlighted our log. Other extensions, and Brackets itself, will also log messages to this screen. By prefixing my log messages with [helloworld], I can make my own stuff a bit easier to find.

Brackets console messages

Note that the full Chrome console.api works here. You can do stuff like this to format your console messages:

function log(s) {
    console.log("%c[helloworld] "+s,"color:blue;font-size:large");

Go crazy, but try to remove these messages before you share your code with the rest of the world. In case you’re curious, you can’t use dev tools in another browser, like Firefox, at this time.

Integration Points

Now that you know the (very) basics, let’s talk about what Brackets extensions can do to the editor:

  • They can create keyboard shortcuts, allowing them to respond to custom keystrokes.
  • They can add to the top level menu.
  • They can add context menus (and to a specific area, like the file listing or the editor window).
  • They can create UI items. This can be a modal dialog or even a panel. (Currently the panel is locked to the bottom of the screen).
  • They can create a linting provider (essentially they can register themselves as a code checker for a file type).
  • They can create their own inline editors (a major feature of Brackets).
  • They can register as a documentation provider (for example, adding MDN support for docs).
  • They can integrate with Quick Find and Quick Open.
  • They can add custom code hints and syntax colors.
  • They can read the current file open in the editor as well as modify it. (They can also see the current selected text, if any.)

That describes how extensions can modify Brackets, but what can extensions actually do in terms of code? Keeping in mind that you’re writing extensions in pure web standards (HTML, JavaScript, and CSS), you actually have quite a bit of power. The only real limits relate to binary data. There is a File system API that gives you control over files but is limited to text data only. Luckily, you have a way out.

Any Brackets extension can integrate with Node.js. If you’ve got an existing Node.js package your extension can make calls to it and do, well, whatever Node.js can do, which is essentially anything.

Let’s update our extension to integrate with the editor a bit better. I’ll start by simply adding a menu item for the extension.

Listing 2: helloworld2/main.js
Based - in part - on the HelloWorld sample extension on the Brackets wiki:

define(function(require, exports, module) {

    var CommandManager = brackets.getModule("command/CommandManager"),
            Menus = brackets.getModule("command/Menus"),
            AppInit = brackets.getModule("utils/AppInit");
    function log(s) {
            console.log("[helloworld2] "+s);
    function handleHelloWorld() {
            alert("You ran me, thanks!");
    AppInit.appReady(function () {

            log("Hello from HelloWorld2.");

            var HELLOWORLD_EXECUTE = "helloworld.execute";

            CommandManager.register("Run HelloWorld", HELLOWORLD_EXECUTE, handleHelloWorld);

            var menu = Menus.getMenu(Menus.AppMenuBar.VIEW_MENU);



We’ve got a few changes here so let’s tackle them one by one. You’ll notice that the extension begins with three calls to brackets.getModule. All extensions have access to a brackets object that provides an API where we can load in core functionality from the editor. In this case the extension has loaded two libraries we’ll need for the menu (CommandManager and Menus) and one which will be used to help initialize the extension (AppInit).

Lets talk about AppInit. You can see that most of the extension is now loaded with a appReady callback. This callback is fired when Brackets has completed loading and is generally considered “best practice” for extensions to make use of.

Registering a menu item takes a few steps. I begin by defining a “command ID”, a unique identifier for the item I’ll be adding to the UI. The typical way to do this is with the format extensionname.someaction. In my case, I used helloworld.execute. I can then register this command along with the function (handleHelloWorld) that should be called when the command is fired.

The final step is to add this command to the menu. You can probably guess that my menu item will be added under the View menu based on this value: Menus.AppMenuBar.VIEW_MENU. How did I know that value? Simple, I saw other extensions do it. Seriously though, there is no specific list of items like this yet. Don’t forget that Brackets is open source. I can easily pop over to the GitHub repo and check it out. In this case, the file is Menus.js, located on Github. In there I can see where the various different core menus are defined:

  * Brackets Application Menu Constants
  * @enum {string}
var AppMenuBar = {
     FILE_MENU       : "file-menu",
     EDIT_MENU       : "edit-menu",
     VIEW_MENU       : "view-menu",
     NAVIGATE_MENU   : "navigate-menu",
     HELP_MENU       : "help-menu"

As a general rule of thumb, it makes sense to have at least a cursory understanding of what’s available in Brackets itself. Your extensions will, from time to time, make use of multiple different features so it’s definitely in your best interest to at least know the lay of the land.

After reloading Brackets, you’ll now see the menu item in the View menu. Exactly where it is may be a bit random as you may have other extensions installed.

View menu updated

You can actually be a bit more specific about your position. Again, this is where the source code will help you. The same file I linked to above also contains the addMenuItem definition.

Put Some Lipstick on That Pig

Now that you’ve seen a simple example of how an extension can integrate into Brackets, let’s look at how we update the UI. In the previous version of our code, an alert was used to send a message. While this works, it isn’t very pretty. Your code can access the Brackets editor just like any other DOM modification code. While you can do anything you want, there are a few standard ways extensions update the UI in Brackets. (As a warning, in general you do not want to touch the DOM of the main editor UI. You can, but with future updates, your code may break. Also, users may not be happy if your extension changes something core to Brackets.)

The first method we’ll look at uses modal dialogs. Brackets already uses this and has an API available for extensions to call. As a simple example, let’s just update the HelloWorld extension to use a modal instead.

Listing 3: helloworld3/main.js
Based - in part - on the HelloWorld sample extension on the Brackets wiki:

define(function(require, exports, module) {

    var CommandManager = brackets.getModule("command/CommandManager"),
        Menus = brackets.getModule("command/Menus"),
        Dialogs = brackets.getModule("widgets/Dialogs"),
        DefaultDialogs = brackets.getModule("widgets/DefaultDialogs"),
        AppInit = brackets.getModule("utils/AppInit");

    function log(s) {
            console.log("[helloworld3] "+s);

    function handleHelloWorld() {
        Dialogs.showModalDialog(DefaultDialogs.DIALOG_ID_INFO, "Hello World", "Same Important Message");

    AppInit.appReady(function () {

        log("Hello from HelloWorld3.");

        var HELLOWORLD_EXECUTE = "helloworld.execute";

        CommandManager.register("Run HelloWorld", HELLOWORLD_EXECUTE, handleHelloWorld);

        var menu = Menus.getMenu(Menus.AppMenuBar.VIEW_MENU);



Note the addition of two additional Brackets modules: Dialogs and DefaultDialogs. The next change is in handleHelloWorld. One of the methods in the Dialog library is the ability to show a dialog (no surprise there, I suppose). The method wants a class, a title, and a body, and that’s it. There’s more you can do with dialogs, but for now, this demonstrates the feature. Now when we run the command, we get a much prettier UI. (Along with default buttons and behaviours to handle closing the dialog.)

Dialog example

That’s one example, now lets look at another: creating a bottom panel. As with dialogs, we’ve got support from Brackets to make it easier. Let’s look at an example and then I’ll explain the changes.

Listing 4: helloworld4/main.js
Based - in part - on the HelloWorld sample extension on the Brackets wiki:

define(function(require, exports, module) {

    var CommandManager = brackets.getModule("command/CommandManager"),
    Menus = brackets.getModule("command/Menus"),
    PanelManager = brackets.getModule("view/PanelManager"),
    AppInit = brackets.getModule("utils/AppInit");

    var HELLOWORLD_EXECUTE = "helloworld.execute";
    var panel;

    function log(s) {
            console.log("[helloworld4] "+s);

    function handleHelloWorld() {
        if(panel.isVisible()) {
        } else {

    AppInit.appReady(function () {

            log("Hello from HelloWorld4.");

            CommandManager.register("Run HelloWorld", HELLOWORLD_EXECUTE, handleHelloWorld);

            var menu = Menus.getMenu(Menus.AppMenuBar.VIEW_MENU);

            panel = PanelManager.createBottomPanel(HELLOWORLD_EXECUTE, $("<div class='bottom-panel'>HTML for my panel</div>"),200);



Let’s focus on the changes. First, I dropped the Dialog modules as I’m no longer using them. Instead, we load up the PanelManager. Down in the appReady block I’ve defined a new panel using the PanelManager API method createBottomPanel. Like the menu command this takes in a unique ID so I just reuse HELLOWORLD_EXECUTE. The second argument is a jQuery-wrapped block of HTML (and in case you’re wondering, yes we can do this nicer), and finally, a minimum size. This sets up the panel but doesn’t actually execute it.

In the event handler, we have tied to the menu, we can ask the panel if it is visible and then either hide or show it. That part should be pretty trivial. For fun I’ve added in a bit more complexity. Notice that CommandManager lets us get a menu item and set a checked property. This may be unnecessary as the user can see the panel easily enough themselves, but adding the check just makes things a little bit more obvious. In the screen shot below you can see the panel in its visible state.

Panel example

Right away you may be wondering about the panel HTML. Is there a better way to provide the HTML? Anyway to style it? Yep, lets look at a more advanced version.

Listing 5: helloworld5/main.js
Based - in part - on the HelloWorld sample extension on the Brackets wiki:

define(function(require, exports, module) {
    var CommandManager = brackets.getModule("command/CommandManager"),
    Menus = brackets.getModule("command/Menus"),
    PanelManager = brackets.getModule("view/PanelManager"),
    ExtensionUtils          = brackets.getModule("utils/ExtensionUtils"),        
    AppInit = brackets.getModule("utils/AppInit");

    var HELLOWORLD_EXECUTE = "helloworld.execute";
    var panel;
    var panelHtml     = require("text!panel.html");

    function log(s) {
            console.log("[helloworld5] "+s);

    function handleHelloWorld() {
        if(panel.isVisible()) {
        } else {

    AppInit.appReady(function () {

        log("Hello from HelloWorld5.");
        ExtensionUtils.loadStyleSheet(module, "helloworld.css");
        CommandManager.register("Run HelloWorld", HELLOWORLD_EXECUTE, handleHelloWorld);

        var menu = Menus.getMenu(Menus.AppMenuBar.VIEW_MENU);

        panel = PanelManager.createBottomPanel(HELLOWORLD_EXECUTE, $(panelHtml),200);



As before, I’m going to focus on the changes. First note that I’ve included a variable called panelHtml that is loaded via require. This lets me define my HTML outside of my JavaScript code. (You can also use templating engines. Brackets ships with Mustache.) The HTML behind the panel is rather simple.

Listing 6: helloworld5/panel.html
<div class="bottom-panel helloworld-panel" id="helloworldPanel">
<h1>My Panel</h1>

My panel brings all the boys to the yard,<br/>
And they're like<br/>
It's better than yours,<br/>
Damn right it's better than yours,<br/>
I can teach you,<br/>
But I have to charge

Returning to main.js, I’ve demonstrated another feature, loadStyleSheet. This lets you load an extension specific style sheet. I created a file, helloworld.css, with some simple (but tasteful) CSS styles.

Listing 7: helloworld5/helloworld.css
.helloworld-panel h1 {
        color: red;

.helloworld-panel p {
        color: blue;
        font-weight: bold;

Note that I prefixed my styles with a unique name. This helps ensure my classes don’t conflict with anything built into Brackets. With these simple changes my panel now looks much better, and you can see why I’m known world wide for my superior design skills.

Epic CSS

Packaging and Sharing Your Kick Butt Extension

Of course, just creating the coolest Brackets extension isn’t quite enough. You probably (hopefully!) want to share it with others. One option is to just zip up the directory and put it on your website. Folks can download the zip, extract it, and copy it to their Brackets extensions folder.

But that’s not cool. You want to be cool, right? In order to share your extension and make it available via the Brackets Extension manager, you simply need to add a package.json file to your extension. If you’ve ever used Node.js, then this will seem familiar. Here is a sample one for our extension.

Listing 8: helloworld6/package.json
    "name": "camden.helloworld",
    "title": "HelloWorld",
    "description": "Adds HelloWorld support to Brackets.",
    "homepage": " real here",
    "version": "1.0.0",
    "author": "Raymond Camden <> (",
    "license": "MIT",
    "engines": {
        "brackets": "<=0.34.0"

Most of this is self-explanatory, but the real crucial portion is the engines block. Brackets updates itself pretty rapidly. If Brackets added a particular feature at some point that your extension relies on, you can add a simple conditional here to ensure folks don’t try to install your extension on an incompatible version. (You can find a full listing of the possible settings on the Wiki.)

Once you’ve done this, the next part is to upload it to the Brackets Registry. You will need to log in via your GitHub account, but once you’ve done that, you can then simply upload your zip. Your extension will then be available to anyone using Brackets. Even better, if you update your extension, the Extension Manager will actually be able to flag this to the user so they know an update is available.

What Else?

Hopefully, you’ve seen how easy it is to extend Brackets. There’s more we didn’t cover, like the Linting API and NodeJS integration, but this article should be more than enough to get you started. As a reminder, do not forget there is a large collection of extensions available for you to start playing with right now. Good luck!

April 17 2012


Extending the Web: Useful Google Chrome Extensions


At the end of 2011 Chrome surpassed Firefox as the second most popular browser in the world. One of the reasons it has grown in popularity could be because of its expansive Chrome Web Store. The store has thousands of applications that help extend the functionality of Chrome and make your browsing experience safer, quicker and more fun.

In today’s article we would like to share with you 30 fantastic Chrome extensions. We have purposely not included extensions that simply link to an online service and instead listed those that make Chrome more useful.


1. Offline Google Mail

An official extension from Google that lets you use Gmail offline. Emails can be read, responded to, searched and archived when offline and when a connection is available again everything will be synced. A great app if you use Gmail and find yourself without a connection frequently.

Offline Google Mail

2. Send from Gmail

Another great app for Gmail users is ‘Send from Gmail’. Once installed, anytime you click on an email link when browsing the web, a Gmail message will be created rather than a default application such as Windows Live Mail.

Send from Gmail

3. Google Chrome to Phone

Once you have installed the Google Chrome to Phone extension and Android app, you can send information directly from your computer to your Android phone. This allows you to send links to your phone so that the same page is opened on your phone. You can automatically launch apps like Google Maps directly by using the extension. A great application for Android users.

4. ScratchPad

A really basic note taking application that supports basic style editing like bold, italic and bullet points. The notes load outside of Chrome so you can minimise the notes when you aren’t using it. By far it’s most useful feature is the option to sync your notes to your Google Docs account. A great app for anyone who just wants a simple way of taking notes online.


Web Development

5. PageSpeed Insights

PageSpeed Insights is a Chrome and Firefox extension that allows you to perform a test on any page on the web and measure the performance of that page. Pages are given a rank out of 100 and suggestions are given as to how the speed of the page can be improved such as not using @import for CSS styling and combining images into CSS sprites.

PageSpeed Insights

6. Web Developer

The official port of the Web Developer extension for Firefox adds a toolbar that developers will find useful. 8 different tools are available: CSS, forms, images, information, miscellaneous, outline, resize and more. And what’s more is that each tool offers a range of different options.

Web Developer

7. IE Tab

A great way of checking how a web page looks on Internet Explorer directly from Google Chrome. You can view a page in IE7, IE8 or IE9 mode and use auto URLs in order to make a whole website viewable in Internet Explorer. It’s an essential app for anyone who designs websites of themes.

IE Tab

8. ScribeFire

The popular blog editor ScribeFire allows you to write articles and post them to blog platforms such as WordPress, Blogger, TypePad, Windows Live Spaces, Tumblr, Posterous, Xanga and LiveJournal. Existing posts can be deleted, edited, updated and scheduled for publication in the future. Those of you who don’t like the editor for your blogging platform should check it out.


9. Awesome Screenshot

If you take screenshots a lot, you’ll love Awesome Screenshot. It lets you take screenshots of an entire page or selected areas. You can customise which areas are copied using a range of cropping tools. Screenshots can be copied to your clipboard, saved as a file or saved online using

Awesome Screenshot

Tabs, Sessions & Browsing

10. RSS Subscription Extension

Once the RSS Subscription Extension has been installed, Chrome will automatically detect any feeds that are linked on a page. Google Reader, iGoogle, Bloglines and My Yahoo are built into the app, though other RSS services can be added manually. To add a feed to your newsreader you simply click on the RSS icon that appears on pages with RSS feeds on it and then select your chosen newsreader.

RSS Subscription

11. Read Later Fast Tab Plus

Recently renamed from ‘Read Later Fast’ to ‘Read Later Fast Tab Plus’ by its developer Diigo, Read Later Fast lets you save any web page you find interesting and read it later offline. You can save an infinite number of pages using your Diigo account. It’s a useful plugin for those that travel a lot and find themselves without a connection (i.e. when flying).

Read Later Fast

12. Xmarks Bookmark Sync

Sync bookmarks, passwords and tabs across different computers and different browsers (it also works with Firefox and Safari). One of the best ways of keeping your online experience consistent across all of your devices regardless of what browser you are using.

Xmarks Bookmark Sync

13. Incredible StartPage

Replace your boring Chrome default page with the Incredible StartPage. The app replaces your start page with a stylish board that shows all your bookmarks, apps and closed tabs. There’s also a handy note taking feature and links to Gmail and Google Calendar.

Incredible StartPage

14. Chrome Toolbox

A useful extension that places all of the most commonly used chrome options in one drop down menu. Features include saving and restoring form data, a shortcut link to launch predefined URLs and the ability to set any image as your wallpaper.

Chrome Toolbox

15. TabCloud

Save any session and restore your tabs at a later date or even on another computer. The app is perfect for those of you who switch frequently between a desktop computer and a laptop.


16. Personal Blocklist

Personal Blocklist allows you to customise your search results and block results from certain domains and hosts. Worth installing if you get frustrated by the results that Google is producing.

Personal Blocklist


17. Ghostery

See exactly what a website is tracking with Ghostery. It shows trackers, web bugs, pixels and other hidden scripts. It can also be used to block images and embedded objects from websites you don’t trust.


18. View Thru

Link cloaking has been used for years by affiliate marketers to make ugly looking affiliate URLs look cleaner. The rise of Twitter and other social media services has increased the use of URL shortneners too. Once View Thru has been installed you can quickly see the real URL of any cloaked URL.

View Thru

19. Hide My Ass!

Hide My Ass! is one of the most popular proxy’s on the web. The Chrome extension adds an icon to your browser that lets you instantly browse anonymously using one of 20 web proxy domain names.

Hide My Ass!

20. Web of Trust

Available for all major browsers, Web of Trust helps you surf the web more safely by allowing user to rate websites for trustworthiness, vendor reliability, privacy and child safety. It’s popular with online shoppers though it offers ratings for all types of websites.

Web of Trust

Research & Analysis

21. Daily Stats for Google Analytics

Adds an icon to your browser than shows you a quick analysis of your website traffic. It isn’t a replacement for Google Analytics itself though is a great way to quickly check your stats such as visits, page views, bounce rate and average time on site.

Daily Stats for Google Analytics

22. Google Publisher Toolbar

An essential extension for anyone who makes money through Google Adsense. The extension has two main features. Firstly, it lets you easily glance at your stats quickly without logging into your account. Secondly, it places an in site ad overlay over the advertisements on your website that shows exactly how much each zone is making.

Google Publisher Toolbar

23. PageRank Status

PageRank Status doesn’t just show you the Google PageRank of a web page. It also shows a websites Alexa ranking and geographical location of the server and links to backlinks and indexed pages for Google and Bing.

PageRank Status

24. Diigo Bookmark, Archive, Highlight & Sticky-Note

A bookmarking extension that lets you highlight sections of text on a page and add sticky notes. A copy of the web page can also be saved in your library for future reference.

25. Search by Image

Once ‘Search by Image‘ has been installed, you can right click any image on the web and do a search by image on Google and find where that image and similar images are being used on the web.

Search by Image

Social Media

26. Google +1 Button

A handy extension that lets you +1 any web page on the web to your Google+ circles. Simple but effective.

Google +1 Button

27. Silver Bird

An advanced Twitter extension that is packed full of features. It updates in real time and you can check your time line, direct messages and favourites. Trending topics can be viewed too.

Silver Bird

28. Facebook Notifications

Facebook Notifications is a useful app for anyone who uses Facebook to stay in touch with family or friends or connect with followers. It was developed by Facebook themselves however at the moment it lacks the ability to get updates from fan pages you have created.

Facebook Notifications

29. Pinterest Right Click

With Pinterest jumping into the position of 3rd most popular social media website on the web, more and more web developers are looking to the service as a source of traffic. The Pinterest Right Click extension allows you to pin any image or video to your page. It also lets you share on Facebook too.

Pinterest Right Click

30. imo instant messenger

A web based instant messaging extension that lets you chat via Skype, Windows Live, Facebook, Yahoo Messenger, Google Talk, AIM, Jabber, ICQ and MySpace. It allows group chats, lets you send and receive files and video and audio chatting works natively. The application is also available for iPhone, iPad, Nokia, BlackBerry and Android.

imo instant messenger

It’s difficult to include every useful Google Chrome extension in one article, so we know there are a few favorites we probably missed. If your favourite extension for Chrome didn’t make the list, please feel free to share it in the comment section.


Sponsored post

July 14 2010


24 Helpful Google Chrome Extensions for Bloggers

Competition between Mozilla Firefox and Google Chrome has been intense since the day Google released their official browser. Chrome is the only browser to hit the market and became so much successful in a short span of time. It has outperformed Apple Safari and Opera in speed and surpassed the extensibility of Firefox. Many Firefox users have been flocking away from Firefox since Chrome launched its Extensions. Many bloggers, including me, have done the same because of the effective and multipurpose extension Chrome is supporting. Today we are featuring helpful extensions especially for bloggers, which can make blogging a really fun and pleasing experience.

1. Zemanta


Using Zemanta, you can enhance your blogging experience and make it fun. It expands regular blogging dashboard giving you content suggestion about the text you are writing, images, links, articles and tags in a simple interface located in the sidebar. It supports WordPress, Blogger, Typepad and other popular publishing platforms. It has a spam-free database of 10,000 news sources and blogs; it will filter the copyright images before suggesting them to you.

Its main information sources are:

  • For Links: Wikipedia, IMDB, Amazon etc
  • For Videos: Youtube
  • For Images: Flickr, Getty
  • For Articles: BBC, CNN and thousands of blogs.

2. Google Reader Notifier


Feeds are very important part of life for any blogger, if you want to remain updated with the world easily then you should use Feeds feature of any website or blog. Google Reader is a very popular Feed reader. If you use Google Reader and love fast feeds then this extension is for you. It displays the Google Reader unread feeds count on a small icon next to your URL bar. Clicking the icon shows a preview of your reading list in a pop-up. If you want to open Reader in new tab then you can configure it from the options page.

3. Untiny


There are lots of people like me who are always afraid to open a shortened link, scared of any virus attack, but we can overcome this problem by using this extension. You just have to enter the shortened link and press the extract button, original link will be displayed.

4. WiseStamp


Signatures in any email are very important for bloggers for contacting with fellow bloggers because it looks professional. This extension allows you to create multiple signatures which can be selected as used in Gmail. It will add IM and Social Profiles like Facebook, Twitter and more below your sign.

5. DayHiker


DayHiker is a Google Chrome extension for Google Calendar. It displays schedules and tasks in a toolbar from your Google Calendar. It is a small but useful extension to manage your schedule and tasks. It has countdown and reminder badges with alarm clock which will help to manage your time effectively.

6. TPGoogleReader


Installing this extension is much recommended if you are feed geek. Using this extension you can work with feeds with leisure. It will help you in both reading and subscribing the feeds. When a website has a new feed, the icon of this extension will turn green to orange, click it to open a popup menu to see the list of feeds available on that page then click anyone of them to read it in Google Reader. It can show the number to unread items still in your Google Reader account. You can configure its Icon click, double-click and triple click actions from the option menu.

7. Split Screen


Some time your monitor screen become small in front of your work load. This extension allows you to overcome this obstacle and splits the browser in two parts; each one can open a different webpage. You can enjoy browsing two websites at the same time by using this epic extension giving to dual view in your browser.

8. Chrome Chikitizer

Well URL shortening has become very famous since last some years and there are many sites providing this service. This Google Chrome extension named “Chrome Chikitizer” dose the same task effectively and directly from your chrome browser.

9. Shareholic


It is a saying: “Sharing is Caring”. So every blogger should share the useful knowledge he/she has or amazingly informative web pages with his/her colleague and friends. The easy ways to do so is to install this extension. It is the easiest way to share interesting web pages using Facebook, Twitter, Email, Gmail, Bookmarks and many more. You can choose from 100+ supported services which can be configured from option menu.


Most of you people may be familiar with the service, which assists you to get images, movies or documents from WebPages. This extension uses and allows you to create drops as well as scrape all media of all kind off of any website and throw it into drop. For example if you are browsing Google Images and you click Drop All Images, this extension will upload all the images to your drop and access then easily in future. You can customize whether the extension always create a new drop or you can set a single default drop for it to be used always.

11. Google Images Large Images


Tired of using Google Images with a very small preview images? Use “Google Images Large Images” extension to over-come this obstacle while browsing Google Images. It will show the actual image size on mouse over which will help you to determine the original beauty of that specific image.

12. Chromed Bird


Although there are many Twitter extensions for Google Chrome but Chromed Bird is the most powerful I have used till now with many features. Using this extension you can use tweet anytime without visiting, you can add/remove timeline tabs, create custom search queries that will be updates automatically, preview image links by hovering them. Many more important features are also present in this extension to make your tweeting experience more fast and interactive.

13. TwitterBar


TwitterBar is a Google Chrome Toolbar which enables you to tweet directly from the current page you are going through. The Page’s Title and URL are automatically entered into the textbox, it also use an auto URL-shortener which can be changed as per your requirements from the Options button on the page locating extensions.

14. SEO Status Pagerank/Alexa Toolbar

SEO-Status-Pagerank-Alexa Toolbar-Google-Chrome-Extensions-bloggers

For regular bloggers it is very important to monitor the SEO status of any blog or website of his/her interest. He/she will know the performance and ranking of the websites of his interest in the eyes of Alexa and Google. The SEO status toolbar is a simple, light-weight and very fast facility of checking Google Pagerank and Alexa Rank for any website or its every page. One other advantage of using this toolbar is that, it will increase the Alexa Rank for the sites you visit just like IE toolbar does.

It don’t rely on any third-party website to collect information, it take the data directly from Google and Alexa hence providing accurate and reliable SEO status of any website.

15. AddThis


AddThis is the most popular bookmarking and sharing service around the globe. Using this extension you can share a webpage or an article to more than 200 website which includes Facebook, Twitter, Wordpress etc. You can email the current page to any of your friend or family member using this extension; it also provides Print option which enables you to print the page you are currently viewing and you can also translate pages in different languages.

16. Image Cropper


Image cropper extension allows to crop images from any website. It can crop images in img HTML element, CSS background images for any HTML element and images in PNG format. Important point is, you cannot take screenshot of a webpage or crop it according to your desire, it can crop images present on web pages only.

17. Facebook Notification Checker


Facebook notifications help you to interact with your fellow bloggers and friends with ease. This extension is developed to make it easier for you, once you have a new Facebook notification this extension will tell you via a red notification icon. Support is also added for notifying for new messages and friend requests.

18. Google Dictionary (by Google)


Not everyone can master any language even it is his/her mother language. So there is always a need of a dictionary, and how good that will be if you have a dictionary in the same page which you are reading. Now this is possible if you are using Google Chrome, by installing this extension you can get meaning or definition of any word in a small pop-up bubble just by double clicking it.

This extension also offers a address bar dictionary from which you can view complete definition of any word. It supports many international languages like French, German, Spanish and more. But note that, it is a dictionary not a translator; i.e. if you are trying to find meaning of a Dutch word in English, it wont happen.

19. RemindMe


Every one hate to miss some important task, I presume so that you. So better set reminders about the tasks and chores to be done in future. This Google Chrome Extension allows you to setup reminder while you are browsing. Remind yourself of online work to be done later or remind yourself of the jobs you need to complete on a specific time. You can also sync the reminders between your different computers using Chrome built-in “Synchronize My Bookmarks” function.

20. Ibrii


Ibrii is a very amazing tool to snip every type of content like images, videos, text from any website. One big advantage of this service is that, it provide the facility to share distinct and trenchant elements unlike other service by the use of which, you can only share the whole web page on Twitter or Facebook. Users have the facility to create permalinks which can be later used or shared on instant messaging or on other social networking sites.

21. Chrome Editor

Coding is a very crucial and significant part of a blogger, people find it difficult to switch between the browser and code editor so this extension is made which allows you to code right within the your browser. I can locally save a code reference for later use on your computer. It has some predefined basic codes like HTML 4 DTD, HTML 5 DTD, CSS and jQuery Functions.

22. Digg for Chrome


This official Digg extension makes digging easy and fast. You can Digg directly from your browser, it views Digg count for any URL which is displayed in the right of the browser’s address bar. As Digg is one of the largest source to find information of your interest, this extension has a random button that allows you to discover new content from the web.

23. Wordpress Comment Notifier

Wordpress-Comments Notifier-Google-Chrome-Extensions-bloggers

This extension will check for pending comments on your Wordpress blog and displays it as a badge. You can unapproved, Trash, Reply to or mark as spam without opening a new tab. This extension is very handy for bloggers owing more than 1 blog as it can add multiple blogs.

24. ChromePass


ChromePass is a small password recovery tool that allows you to view the user names and passwords which are stored by Google Chrome browser. It will show Origin URL, Action URL, User name and Passwords as well as their fields and the time at which they were created.

Any thing missing or any suggestion? Feel free to inform us about your thoughts in comments :) .

June 09 2010


Safari 5 Extensions

A handy list of available Safari extensions to tide you over until Apple opens their gallery.

May 13 2010


Switching to Chrome? Download these Extensions

When Chrome first entered the browser wars in September 2008, although it quickly acquired a big 1% of the audience, many resented the fact it wasn’t as extensible as the long-time favorite Firefox browser. Developers want add-ons – things that’ll make their coding faster and easier, with less room for mistakes. Things which, let’s face it, Chrome couldn’t yet offer. But things have since changed.

Chrome features a vast collection of extensions at the moment. It also regularly beats its opponents in various speed and compatibility tests, while the great set of developer tools promoted the browser to a very interesting solution for web enthusiasts. But does it have enough ‘extension power’ to overcome Firefox? Check out the following twenty extensions, and make up your own mind!

1. Web Developer

Some of you might be familiar with this plug-in from Firefox. Although the Chrome version can’t disable JavaScript, due to some restrictions from the browser’s side, WDT remains one of the most powerful additions to a web developer’s arsenal.

You can easily outline different elements of a site, and test it in various environments (for instance, without CSS and images) through the extension. It also offers quick access to important code validation services and some other interesting options.

2. Pendule

Though it isn’t filled with features like Chris Pederick’s Web developer toolbar, Pendule proves itself to be worthy of comparison against the famous Firefox add-on.

Other than the basics (source, images, validators), it contains a couple of very cool tools, like the ruler and the color picker, which will be highly valued by web developers and aren’t a part of WDT.

3. Chrome Sniffer

No, Chrome sniffer can’t produce smells equivalent to your screen picture. Sorry. However, if you’d like to find out which frameworks and libraries a particular site uses, that’s an area sniffer can help you with.

As appealing as looking through someone else’s uncommented code might sound to you, there are times when a web developer doesn’t have time to play games. Sometimes you may just want to figure the library out and get it over with. Is the site using jQuery? Yes? OK, let’s move on. That’s what Code sniffer is all about.

4. Chrome SEO

Although still in Beta, Chrome SEO is one of the best search engine optimization analyzers you can find as a browser extension these days.

It provides easy access to various tools that can help you out with Competitive Analysis, Keyword Research, Backlink Checks, PageRank Checks and other daily SEO tasks.

5. Speed Tracer

Speed tracer is an official Chrome extension, developed by Google. It tracks your site performance in real-time, generating reports on various problems that might have occurred while communicating with the server. You can then use these metrics to optimize your code for better site performance.

Note: You should read the getting started guide before using Speed tracer.

6. Frame Two Pages

“Frame Two Pages” does exactly what it sounds like; it splits your two tabs into resizable frames. In other words, your physical screen will be split into independent areas.

Once you click the extension’s icon, the current tab will be merged with the previous (left) one into a frameset with two rows or columns (frames). Unlike the other similar extensions, “Frame Two Pages” can open links in the same frame they were clicked in.

7. Snippy

Snippy allows you to grab snippets from web pages and save them for future use or upload to Google Docs. The extension is very useful when copying a lot of information from various sites, since it shortens the cpoy/paste process to only one simple click.

8. IE Tab

No matter how much we hate it, the fact remains that some sites need Internet Explorer to work properly. IE tab acts as if you had the Internet Explorer engine running inside your Chrome browser.

Although most developers will use IE tab to test their work in Internet Explorer, the extension can also be used to access local (file://) URLs (not possible through Chrome itself).

9. Color Picker

Color picker can provide you with both hexadecimal and RGB values of a currently selected color. It does a pretty good job most of the time, but the desired site must be fully loaded at 100% zoom level for best results.

10. BuiltWith

Similar to Chrome sniffer, BuiltWith does a great job of understanding which technologies and frameworks a particular site is using. In addition to their names and short descriptions, you’ll be provided with usage statistics and a list of other websites using the same technologies.

11. Lightshot

LightShot is a tool which allows you to easily make screenshots of any area of a website. You just hit the Lightshot icon on the toolbar; select an area you want to make a screenshot of, and click “Save” or “Upload to server”. In case of uploading you instantly get a link to the screenshot you’ve just uploaded.

You can also copy or edit your screenshots (add text, draw lines and more other functions) using an on line tool much reminding of Photoshop.

12. Xmarks bookmark sync

If you’re working on multiple computers, you likely know it’s not easy to maintain synchronization between your bookmarks in order. Maybe one of the PCs is using Firefox, the other one Safari, the third Chrome, etc. You can’t just keep copying all your bookmarks between them forever.

And you don’t have to, because Xmarks will do that for you. It can synchronize across multiple computers and web browsers, and is available as a free extension for Chrome, Firefox, Safari and Internet Explorer.

13. Web of Trust

Chrome is an extremely safe browser. The safety measures actually go as far as to start entirely new processes for each tab; so there is very little room for any wandering viruses to crawl thorough and attack your computer. It also warns you if you’re visiting a site that is on the Chrome “blacklist.”

If you need more security, “Web of Trust” is for you. WOT ratings are powered by the users and their experiences with websites, so it’ll warn you when trying to access a site others have had problems with. It’ll also rate your Google/Yahoo/Bing search results so you are warned about a particular site reputation in advance.

14. Last Pass

LastPass is a free online password manager and form filler that easily remembers your on line passwords and auto-fills them for you. The only password you’ll need to remember from now on is the one of your Last pass account!

15. Chromeshark

ChromeShark is a Chrome extension containing basic playback controls for your Grooveshark account. You can pause a song, skip it, or stop the playback entirely.

Note: The extension has problems when multiple Grooveshark tabs are opened.

16. Recent History

Chrome has a fairly complicated way of accessing your browsing history. It can be done through two long mouse clicks! That’s why Recent history is such a big time saver. It’s positioned in the right-hand side of your address bar, and allows you to access the recently closed tabs and most recently visited pages from only one pop-up.

17. L(ink)y URL Shortener

Twitter users will absolutely adore this extension. It automatically shortens your URLs using the popular URL shortening service. It also remembers the most recent shortened URLs so you don’t have to retype them.

18. Tab Menu

For those who like to get carried away opening new tabs in Google Chrome, this tool will be of great assistance. Instead of looking at tiny horizontal tab icons, it gives you a vertical overview of all your current tabs opened and enables searching as well!

19. Note Anywhere

With “Note Anywhere,” you can post a sticky note on any page you are viewing, customize it, and then review the note on a later date.

It can be quite useful when doing on line research, since the sites you posted the stickers on will be remembered in the extension’s options page. They remain posted until you delete them.

20. Auto Translate

This translator can be customized according to your preferences, so you can choose when will the translate pop-up appear.

For instance, you could set it to translate from English when Control double clicked, but to try to detect the language automatically when you Shift select a word.

Thanks so much for reading. Which ones are your favorites? Any I missed?

January 14 2010


Are You Ready To Transfer To Chrome? – 30 Irreplaceable Chrome Extensions

Title-valuable-google-chrome-extensions-web-designI’ve always been using Firefox browser, I mean already for 5–6 years and never thought I would want to choose something else. Firefox is great browser and what makes it so great is all those thousands of plugins you download freely. You can find now plugin for almost everything you could ever think of – there is only one big downside. Firefox is much slower than Chrome and actually eat’s more of computer’s CPU than other browsers.

I have a friend who suggested to try Chrome again and I thought I will give it a try – now I will check how much and how good extensions Chrome has and is it enough to transfer now???

This article will try to answer to question – can designer, web developer, social marketing, SEO person actually transfer to Chrome without any loss of extension features. Are there something similar to FireBug, WebDeveloper, Color Picker, SEO For Firefox, Alexa ranks, debugging tools, which can be replaced to be used daily?

Let’s put Chrome on test – shall we?

If you know a little about Google Chrome read our previous article about this browser features – Google Chrome Review.

Chrome Extensions For Daily Browsing

1. Aviary Screen Capture

Take a screen capture of the visible portion of any web page and it will open in an editor where you can crop it, add text and arrow markup, get color information or move around areas. You can easily save it to your desktop or host it online. The extension also lets you quick launch any of Aviary’s web editor design apps. View extension screenshots by clicking on the thumbnail and using the arrow keys.


2. Xmarks Bookmarks Sync

Backup and sync your bookmarks across computers and browsers. Xmarks is also available for Firefox, Safari and IE.

Since I am working on one computer at work and laptop, I love this automatic tool syncing my bookmarks  and allowing me to worry about other things.


3. AdThwart

Block ads on websites. Supports EasyList and many other ad blocker filter lists.


4. Evernote Web Clipper

Evernote’s Web Clipper extension let you save interesting stuff you see on the web.


5. LastPass

LastPass is a free online password manager and Form Filler that makes your web browsing easier and more secure.


6. RSS Subscription

This extension auto-detects RSS feeds on the page you are reading and upon finding one will display an RSS icon in the Omnibox, allowing you to click on it to preview the feed content and subscribe. Very handy extension for daily blog browsing.


7. Chrome Gestures

Allows you to execute common commands (like page forward/backward, close tab, new tab) by mouse gestures drawn over the current webpage, without reaching for the toolbar or the keyboard.

If you don’t know how mouse gestures work, check out this video.


8. Google Similar Pages beta (by Google)

Discover webpages similar to the page you’re currently browsing. I understand this extension works similar like StumbleUpon, but it’s more objective because it’s based on Google search engine and it’s been released by Google – cannot be bad!


Here I tested it on my own website and got 4 very popular design blogs displayed – first test looks good, I am trying it more definitely.


9. Feedly

A magazine-like startpage. A fast and stylish way to read and share the content of your favorite sites and services. Provides seamless integration with Google Reader, Twitter, Delicious, YouTube and Amazon.


10. Delicious Chrome Extension

Very simple and clean Delicious extension allowing you to simply bookmark page to Delicious. This extension adds just one button, without whole bookmark bar, I loved it!


11. Google Quick Scroll

Google Quick Scroll is a browser extension that helps you find what you are searching for faster.  After you click on a Google search result, Quick Scroll may appear on the bottom-right corner of the page, showing one or more bits of text from the page that are relevant to your query. Clicking on the text will take you to that part of the page.


Chrome Extensions For Social Networking

12. Google Mail Checker

Displays the number of unread messages in your Google Mail inbox. You can also click the button to open your inbox, very handy tool for daily browsing.


13. Chromed Bird

Chromed Bird is a Twitter extension that allows you to follow your timelines and interact with your Twitter account.


14. Facebook for Google Chrome

Extension which lets you read your Facebook news feed and wall. You can also post status updates.


15. StumbleUpon Extension

Simple StumbleUpon toolbar for Chrome, you should be very familiar with it if you are stumbling daily.


16. url shortener url shortener is an extension which allows you to shorten the current website URL with the new Google URL Shortener service


Chrome Extensions For Web Designers, SEO specialists and Web Developers

17. Lorem Ipsum Generator

Many other extensions of this type – in other browsers – simply complicate this task, using really extensive code, XHR, etc. The main purpose of this one, is to use the less amount of code (and also memory) and help the developer/user to get the job done.

Great and simple classic Lipsum extension, required in every designer’s toolbar.


18. Firebug Lite

Firebug Lite is a tool for web developers, that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.


19. META SEO inspector

A Google Chrome extension useful to inspect the meta data found inside web pages, usually not visible while browsing.


20. Pastebin

Post and coloring source code (C, Python, Ruby, HTML, CSS, …) on a pastebin service. Although useful for the share on the forums, IRC or social networks (like Twitter).


21. Speed Tracer (by Google)

Get insight into the performance of your web applications.


22. Resolution Test

An extension for developers to test web pages in different screen resolutions, with an option to define your own resolutions.


23. Copy Without Formatting

Provides various ways (customizable keyboard shortcut, floating button, or auto-copy) to copy your selection WITHOUT formatting.


24. IE Tab

Use Internet Explorer to display web pages in a Chrome tab. Some sites can only be displayed using IE, and with this extension you can now see those sites without leaving Chrome. Great for web developers who want to test the IE rendering engine, users who use sites with ActiveX controls, and users who want to use the explorer view for local files (i.e. file:// URLs).


25. Chrome SEO

I couldn’t live without great SEO tool, where I could see stats of current page I am visiting, this tool is under development still, but already it’s very lightweighted, fast and working just excellent.

“The Google Chrome SEO extension provides easy access to Search Engine Optimization Tools that can help you with Competitive Analysis, Keyword Research, Backlink Checks and other daily SEO tasks.”


26. PageRank

Very simple and light extension which only task is to display pagerank automatically while page loads. For advanced browsing I would use Chrome SEO, but for automatic,fast stats display I like this plugin in my Chrome Extensions as well!


27. SitezMeter

SitezMeter displays traffic charts from Google Trends, Alexa and Compete side by side, as well as ranks. This extension is a handy tool to webmaster, web site owner and SEO/SEM specialists.

Of course, you can go to SitezMeter website directly, but this helps sometimes to do it faster in handy way, anyway – your pick!


28. Chrome Flags

Chrome Flags displays a country flag indicating about the physical location of the websites you’re visiting. The extension also provides access to detailed information regarding the website’s servers, owners, traffic and trustworthiness.


29. Eye Dropper

Eye Dropper and Color Picker extension which allows you to pick color from any webpage or from advanced color picker. You can also check option, that selected color HEX code will be automatically copied to clipboard. This tool is even more handier than ColorPicker on FireFox, because HEX code I needed to copy/paste manually.


30. MeasureIt!

Draw out a ruler that will help you get the pixel width and height of any elements on a webpage.

Yes, this popular Firefox extension for designers is available on Chrome as well! Great!


31. Pendule


Built in features for developers

I didn’t know there are already built in features for web developers, but wow, there is – and you don’t need to install anything.

This “Inspect Element” feature works similar like Firebug, but it has different features. Just select and element, text you are interested in, click right mouse button and check inspect element – you will get advanced and precise results right away! Very, very handy!

Read more about built-in features for developers in this google guide.



While testing all those different extensions, what I enjoyed the most – extensions are super easy and extremely fast to install/uninstall/activate. I was used to Firefox restart browser statement all the time, I never really thought about it. With Google Chrome you just click on install button and extension is live and working in seconds without any slow downloading or restarting, lagging. And in the same time, if I decided not to keep that extension, I could easily uninstall it as well without any problems.

I am amazed, it took me so long to try Chrome extensions, because I thought there could be nothing better then Firefox, all those thousands of plugins it has and there no way Chrome could compete with something like that EVER.

Dear readers, I was very wrong – of course, there aren’t so many extensions available just yet, but already all of them works way better, way faster and for now I haven’t got any problems with Chrome at all – just big, positive surprises.

For designers and developers I would suggest to give Chrome a try and check out design related extensions, there are already. They aren’t so much but already very handy and fast to use, which usually wasn’t the case with Firefox however.

Huh..but for daily browsing, tweeting, stumbling, mail management, blog writing ( yes, I mean all bloggers) – I suggest to switch to Chrome today and give it a chance. Try it for 3-4 days, install several your favorite extensions from this list and I am pretty sure, you will not want to go back to Firefox for daily browsing. Just my personal opinion, but I was very strong Firefox lover until yesterday, so there must be something good with this new browser I think :)

Let me know about your pros,cons and experiences with Chrome comparing it to Firefox! Let’s go to browsing!

You can download latest Chrome version here, but you need to install Google chrome BETA version in order to use and try extensions as well – get it here.

Related posts:

  1. Especially for MAC users: Google Chrome Review
  2. Popular Firefox Extensions for SEO masters
  3. 20 Professional Mozilla Firefox 3.5+ Ready Themes
  4. 33 Promising Web Development And Social Network Firefox 3.5 Plugins
  5. The Best 50 Firefox add-ons for Web-developers!

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...