The beauty of the Google Chrome Extension gallery is that it is virtually uninhibited by any sort of approval process. This allows tons of extensions to be uploaded into the wild in real time. Every couple weeks, I go through and find the best and/or the most promising extensions that have recently been added.

The following extensions are no more than a few weeks old, and thus, it’s highly unlikely that you’ve seen them yet (unless you have no life, like me). Keep in mind that since these are brand new, some of them may have bugs here and there. The good thing, though, is that extensions from the gallery automatically update in the background without the need to restart the browser, and extension developers are usually more receptive to adding/removing/fixing features when their extension is newly released!

There are twenty-three extensions and two themes to try out. Feel free to give any of these a quick try! If you decide you don’t like it, simply right-click the extension and select “Uninstall” — Simple as that! No restarts or anything!

Ready? Here goes!

copy title+url to clipboard

This extension is fresh off the dev press. I’m using it to write this post right now, in fact. It simply allows you to copy the URL, the title of the page and the URL, or an HTML link to the page.

How can it improve? New icon, properly capitalized lettering, and styling. Start there. Make the extension a PageAction instead of a BrowserAction since interacting with it results in data from the page (not the browser).

New tab with clock

Alright, so I admit this sounds super simple but I think this is a great tool. All it does is it removes your “Speed Dial” and places a live clock there instead. Why is this so great? If you’re like me, you need to be reminded about the time — a lot! Having the time in front of me every time I open a new tab helps remind me of what I should be doing right now (in other words, it urges me to get off Twitter and Facebook and start working!).

How can it improve? Add a dark theme (or allow custom CSS) and throw in a simple alarm clock! I know many college students (and non-students) who would turn this into their regular alarm clock. It’d be most effective at night, though, if it had a black background with red numbers (like most physical alarm clocks). Users can simply press F11 to put it in full screen, and they have a $1,000+ alarm clock!

Chromium Updater

First: This is ONLY for Chromium and not for Google Chrome. If you run Chromium, you have probably noticed that it doesn’t automatically update like Google Chrome does. This extension attempts to make it easier for you to update Chromium whenever there’s an update by giving you quick access to download the latest installer and zip files.

How can it improve? It’s probably just fine for who it’s intended for, but somehow adding a .dll plugin which allows it to update automatically (like Google Chrome) would be amazing — Enough to get me to switch over to Chromium full-time!

Session Buddy

Despite being released today (as of writing this), this extension already has well over 1,500 users and over 2,400 downloads! Session Buddy describes itself as “a flexible session manager extension for Google Chrome that allows you to quickly save and restore session tabs.” Of all Chrome’s “session managers”, this one is by far the most well laid out. I also appreciate the theming (trying to keep to the “Chrome” color scheme).

How can it improve? In the short time that I have had to try it, all I’d suggest right now, is setting it up so that clicking the “Options” button while the Session Buddy page is open would show the options panel. The developer may be able to do this by editing options page setting in the manifest to include an anchor (ex: #options) that way it treats it as a different page.

Twitter Extender

No list can be complete without a Twitter extension! This extension currently adds four new features to Twitter.com:

1. Old school retweet
2. Reply to all
3. Send a Direct Message
4. Switch reading direction (ex: for right-to-left languages)

Future features include adding a URL shortening button, translations, and short link expander.

How can it improve? With these added features, it’s starting to get a little cluttered. It may be a good idea to scrap the text and have only icons with pretty tooltips.

WordPress Comments Notifier (by HelloLogic)

This one is ours! It’s only in it’s alpha stage, but currently it will check any one WordPress blog for pending (unaccepted) comments and show the number in the badge. Clicking the icon will open your dashboard so you can review and accept them.

How can it improve? We’re currently designing and developing the next version to allow users to check multiple blogs as well as accept, deny, edit, and reply to comments without opening their dashboard. If you’re great with JavaScript or design and want to contribute, please get in touch!

Blank Canvas Gmail Signatures

Well, poo. After finding this extension, I’m going to have to go back and re-”write” on of our future posts (you’ll know what I mean once we release it). This extension allows Gmail users to automatically insert HTML signatures into their messages based on which address they’re sending from. Brilliant.

How can it improve? Add Yahoo and Hotmail support.

Pixlr Grabber

We’ve mentioned Pixlr as an exceptional online image editor recently. This extension allows users to quickly grab web page captures and edit and/or share them instantly.

How can it improve? Right now? Just get a better icon and move it to the address bar by making it a PageAction. (Anything that mainly deals with the current page should be a PageAction, not a BrowserAction.)

Polyglot

Now this is an interesting way to learn! Polyglot is a translation extension with a fun twist. It randomly translates a few phrases on the pages you visit. If you hover over the translated word(s), you get the original text. This turns web browsing into a learning game. Oh I can hear it now: “No, Mr. Teacher! I’m not off task! See? I’m studying my vocabulary!” — Not a bad excuse though!

How can it improve? Make your options page pretty and edit the text so I can understand all the options at a quick glance. Imagery might help.

Facebook Friends Checker

So, this is supposed to somehow alert you when people remove you as friends. …Since no one would ever thing to remove me as a friend (haha), I’ll really never know how well this works. All kidding aside, I really haven’t quite figured out how it works. If you know, please inform us in the links below.

How can it improve? One word: Documentation! Your extension’s ‘profile’ reads like a PHP script (if (blah) { do this; } else { do something else; })

Pastebin.com

This is the official Pastebin.com extension for Chrome. After Pastebin was purchased, the owners set out to build official Firefox and Chrome extensions. This one is the first and is just as featured as Pastebin.com is (minus this displaying part)!

How can it improve? Pink button. Really? How does that fit Chrome’s or your color scheme? Users should be able to click away from the popup and return to it and still have their text waiting for them (currently, closing it clears the textarea). And last, add in keyboard shortcuts (ex: Shift+P) to make it quick to paste multiple sets of text from the browser.

ChromeReload

I use this religiously. Being in Vietnam, I’m graced (cough) with government-run internet service. The internet goes down probably 3 to 10 times a day–regularly. This extension simply refreshes the current web page every XX seconds (user definable). It’s particularly useful when the internet goes down and you want refresh the page every 5 seconds as you wait for it to come back online. It’s also great for active design/developing. Instead of refreshing the page after each save, simply set it to refresh automatically every 5 seconds and it’ll automatically show you your most up-to-date edit.

How can it improve? Styling and (again) move it to the address bar. This should be a PageAction, not a BrowserAction.

Straight to Google Analytics

If you use Google Analytics, this will be nice to have. It simply auto-redirects http://www.google.com/analytics/ (which is the splash page) to https://www.google.com/analytics/settings/?et=reset&hl=en (which is the front of the admin area) if you’re already logged in so you don’t have to click “Access Analytics” anymore.

How can it improve? Either get rid of the BrowserAction icon, or give us an option to. All I need is to have it redirect, I don’t want anymore buttons cluttering my interface.
Update: The developer has updated the extension already to meet this request. This is why I love Google Chrome!

Greasy Thug

Greasy Thug, like Greasemonkey, enables you to use JavaScript and jQuery to alter web pages but comes with a built in console and full history of commands. “This allows for quick one-off scripts to be created and saved to execute at each subsequent visit to a page.”

How can it improve? I know it’s just a console, but does it have to be so ugly? I suggest one of two things (or a combination of the two if you’re able): (1) have the console dock to the bottom (or top) of the window like Firebug Lite does; or (2) show the console in the “popup” UI that’s built into Chrome extensions. Using a combination of the popup and content scripts, you should be able to do both for a nice UI.

Visual Tabs

Visual Tabs gives you a simple button to visualize all your tabs in a sort of “iTunes” format.

How can it improve? Why a button? Make this the default new tab page! Or set it up to listen for CTRL+Shift+S (S is for Switch) or CTRL+Alt+T (T is for Tabs) and open a new tab with this interface whenever one of those is pressed.

RuneScape Hiscores Lookup

No, I don’t play RuneScape but I know a lot about it because my younger brothers did (still do?). As a developer, I usually only see extensions from a developer’s point of view. Extensions like these that target the casual browsers and gamers, however, is what will help bring Google Chrome to the mainstream.

How can it improve? I really don’t know, since I don’t play the game.

Skeet for Twitter

Skeet is a new Twitter app that sits right inside Chrome. The idea isn’t new. But it’s one of the most well polished apps (in regards to features and design) that I’ve seen in the gallery. It also loads much faster than the others as well.

How can it improve? Upon initial installation and authentication, Chrome crashed. Fix those 400 errors that people are reporting. Retweets should not be a one click action unless you have a button to quickly undo the retweet. The character count is buggy. And last, I shouldn’t have to click the “Mark as Read” button in order to mark all of them as read.

Merge Windows

This is a nifty little tool developed by Google themselves. It simply merges all your tabs from different windows into one window. It’s quite useful for those of us who get carried away with too many windows.

How can it improve? For what it’s meant to do, there’s not much room for improvement. Apparently it also merges “Application Windows Shortcuts”, so that should be fixed. It’d be nice to have an extension that would split windows, though.

Minimize Chrome to tray

Here’s an extension built specifically for the Windows version of Chrome. Simply put, when you minimize Chrome, it will place an icon in your taskbar tray area. Kind of like most instant messengers and anti-virus programs. It even has a boss hot key so that you can minimize your windows quickly and allows you to customize how you are able to interact with it.

How can it improve? Currently, you must minimize the window by pressing the minimize button in the window. If you click the taskbar button to minimize it, it won’t hide the window. Also, sometimes it doesn’t show all the proper titles of the windows.

Pure Google Bookmark

Here’s another nifty one. This is a super simple extension allowing you to easily create bookmarks using Google Bookmark. It enables two hot keys: Alt+B adds the current page to your bookmarks (you can also single-click the new star icon), and Alt+M opens up the bookmark manager (or double-click the star icon). You need a Google account to use this.

How can it improve? Use Chrome’s built-in popup functionality when adding a bookmark instead. Keep it clean

Themes: WindowsXP Silver and WindowsXP Olive Green

So these aren’t technically extensions but they’re built practically the same way and they’re in the same gallery (for now). Now, I’m a big fan of the simple default theme that comes with Chrome because all of Google’s other “official” themes are rubbish, distracting, and unclean (in my opinion).

BUT. These are the first two custom themes I’ve seen that actually look good! I strongly encourage you to try them out, especially if you’re already using Windows XP with the Silver or Olive themes — but they’re great even without that.

How can it improve? None. Seriously, well done.

Dim My Chrome: Energy Saver

Quite an interesting idea. Simply put, this extension waits for you to be inactive for X minutes, then dims the web page in order to save energy. I’m not very big on the whole “global warming” fiasco, but if I can passively save energy (and a few cents) along the way, might as well!

How can it improve? Inform people that this only saves money for CRT monitors and not LCD monitors (yet).

Name Dropper

This one is just for fun (or self promotion). The extension is supposed to check to see if the site has Google Analytics installed, and if it does, it’ll create an “event” with your name and website address alerting the website owner that you visited their web page. A little icon displays when the site is using Google Analytics.

So far, two people have already used this on this website (Mark Layton and b.root).

How can it improve? Have an option to change the name of the event category (from “Guest List” to something else).

Paint

Paint is like having a simple version of MS Paint in your browser except it uses HTML5 and Javascript and, of course, still has some edges to fix up. (Keep in mind that it was only released a few days ago.) You can even save your paints as PNG files and insert/edit images from the web. And, once you click “Clear Canvas” it saves a copy of your latest work in the “Paint Archive” for later usage!

How can it improve? UI could be better and smoother lines. Otherwise keep workin’ on your “to do” list!

WordPress is getting popular now and everyone is switching to use WordPress because we can build anything with WordPress: WordPress as a magazine, WordPress as a bulletin board, Video site ….. Today, I would like to put all my love for WordPress into this tutorial to explain how to build WordPress as a Community News, … but in a right way.

In WordPress, the popular plugin for us to build community news submission is FV Community News which is being used on a lot of blog pages. This plugin is really useful to add related articles from other blogs to your sidebar. Adding them manually takes lots of time we don’t have. However, FV Community News stores submissions in another table in database. That’s the problem now for someone want to build a community website where everyone can submit their news to. You can check some design community news website such as: webdesign-ne.ws, design-newz.com, scriptandstyle.com… or check my second website at whofreelance.com. They and I are not using FV Community News to handle users submissions. The plugin on these websites is TDO Mini Forms because TDO Mini Form help users submit their posts as WordPress posts.

1. Setting up your TDO Mini Form.

First, very simple, download this plugin in zip format and extract the files to a subdirectory, called tdo-mini-forms, of your plugin directory. i.e. /path_to_wordpress/wp-content/plugins/tdo-mini-forms. Then, go to plugin menu in WordPress Admin and active it. Make sure you then configure it via the main TDOMF menu in the WordPress Administration backend.

I would like to forward you a link to Tutorial Video for TDO Mini Forms! . The video is pretty good too as it shows you how to create a submission form and an edit form.

And after you know how to use the TDO Mini Form, create a submit page with the form as below:

Create new page item in WordPress Admin and name its title as “News Submission”. In my case on whofreelance.com, the permalink for this page is http://whofreelance.com/news-submission/. After that, type something about the the copyright or something like the rules for submission. Don’t forget to implement the form to this page by put this code below:

[tdomf_form1]

And this is what you get:

Now, at this step, you already done for the community website that publish users’s news submissions. No more step required for doing like all of the community design news websites I referred at the beginning of this post.

If you have not only one website or blog, and you want to display these submissions on another websites, the best way is fetching rss feed from it. However, the problem is you cannot get the direct urls to original posts because we save the users’s post urls as post meta tags. B default, post meta tags were not included in the feed. You might have a little confusing because css-tricks.com is fetching the news from scriptandstyle, or you can see I’m doing the same with AEXT.NET which are fetching users’s submission on whofreelance.com. That’s why you need to go to next step.

2. Modify the feed of the submissions.

Each post when submitted to your WordPress will appear on your feed, right? Someone will say: “Hey, it’s easy, I have the feed here, I can fetch rss and display the submissions on other websites”. The answer is “Yes, you can”. However, you can just only fetch the post title, post url or anything is belong to the article submitted except post meta tags. Refer to the first image above, I highlighted the post_url meta tags because it will be the most important part of community news.

ScriptandStyle published a post explains how to Add Custom Values To Your WordPress RSS Feed. That would be a good solution for you to put post meta tags to the feed, right? This hack will work. However, you will realize that everything (your changes) will be lost when you update WordPress.

Here is better solution. In your WordPress Admin, create another page. What’s the heck this page for? For your feed. Because you will lose your changes when you update WordPress if you hack into feed-atom.php file. So, why don’t you create your own rss file and put it into your template folder, and create a new page in WordPress Admin with the content is the content of rss file? Everything will be fine if you update WordPress or not.

[smartads]

Simple as I did, in your theme directory, create new file name it “communty-feed.php” or something you like (just keep it in secret), then copy all the content of feed-atom.php in wp-includes folder and paste into your new file you have just created.

Important: Insert these code at the head of this file.

<?php
  /*
  Template Name: Community Feed
  */

$numposts = 10;
$posts = query_posts('showposts='.$numposts);

Without query the posts and number of posts to display, the content of your new feed file will be empty and only the title of page will appear in the feed.

Set the Template Name on the head will help WordPress recognise the file, so that you can create new page in WordPress admin with the template is this page. Furthermore, add the direct url to your feed by put these code within the entry tag.

<entry>
    <author>
        <name><?php the_author() ?></name>
           <?php $author_url = get_the_author_meta('url'); if ( !empty($author_url) ) : ?>
             <uri><?php the_author_meta('url')?></uri>
           <?php endif; ?>
    </author>

    <!-- this is what we add -->  
    <directurl><?php echo get_post_meta($post->ID,'post_url',true); ?></directurl>

    <title type="<?php html_type_rss(); ?>"><![CDATA[<?php the_title_rss() ?>]]></title>

To set this page as page template, following this image:

And now, you are fine with the feed, you will not see the post meta tags in any feed readers, but the feed still work like original feed.

Fetching feed on other websites

All the feed have the same basic structure. Each feed has its children tags, and in this case, our feed is:

We will fetch only the title, published date, and the link to original post of each item. In your functions.php file, create new function to fetch all the feed items. Remember that the total number of items will be fetched is 10 because we have limited the number of post displayed in our feed is 10 as above. Refer to the image right above, using simplexml_load_file, your function will look like:

function getFeed($feed_url) {
    $xml = simplexml_load_file($feed_url);
    echo "<ul>";

    foreach($xml->entry as $entry) {
         echo "<li>";
         echo "<span class='post-date'>Posted: ".date(  "F j, Y", strtotime($entry->published) )."</span>";
         echo "<h3><a title='Permanent Link to ".$entry->title."' rel='nofollow' href='".$entry->directurl."'>".$entry->title."</a></h3>";
         echo "</li>";
     }

     echo "</ul>";

}

In your sidebar, use this code to display the feed.

<?php getFeed("http://link-to-your-feed/"); ?>

Your result:

The feed can be display by different codes, this code is just an simple code I would like to put it into this tutorial.

Some code you will be interesting to take a look for example:

• SimplePie Core for WordPress
• How to Read an RSS Feed With PHP – screencast
• Function Reference/fetch feed
• How to: Display any rss feed on your WordPress blog

Conclusion

You see? we can build anything from WordPress. The only problem is the better way to transform it and do it in a right way. I hope this tutorial will help you build a better web community news for news submission. I would appreciate all the comment the help the tut more completed.

This entry is in jQuery Plugins series that the readers love very much. Today, I would like to recommend you 5 new and useful jQuery Plugins that you should consider using for your next projects. Check out other posts in this series if you want more enjoyment.

MopBox

MopBox is similar to other jQuery box plugins. It overlays the DIV content, flash, image … on the current page. The display box can be moved by dragging and video and most interesting is the box have an awesome scroll-bar to change the display. It has been tested and works with all current major web browsers.

This plugin requires jQuery UI to enable draggable, resizeable features.

Basic Usage:

<script type="text/javascript">
  $(document).ready(function(){
    $("#demoBtn").mopBox({'target':'#demo', 'w':270, 'h':240});
  });
</script>

Source: mopstudio (Japanese)

Roundabout

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. Using Roundabout to animate your static HTML elements: turn-around, make a wheel… or even an angry man.

Basic Usage:

<script type="text/javascript">
   // <![CDATA[    $(document).ready(function() {
      $('ul#myRoundabout').roundabout();
   }
   // ]]> </script>

Source: Fred LeBlanc

[smartads]

Meerkat

Meerkat is a jQuery plugin created to slide or fade content in from the top or bottom of the browser window and remain in its fixed position while the rest of the page will scroll normally. It’s using cookie to track if users don’t want to show the content again.

Basic Usage:

<script type="text/javascript">
  $(document).ready(function(){
    meerkat({
        close: '.close-meerkat',
        meerkatPosition: 'bottom',
        animation: 'slide',
        animationSpeed: 'slow',
        height: '100px',
        background: '#463c30'
    });
  });
</script>

Source: Jarod Taylor

jquery.behavior

jQuery.Behavior helps you organize your JavaScript code into logical chunks called “behaviors”. It is a class that defines how a DOM object (and its contents, surroundings, etc.) will behave. Using behaviors, your complex web application can become a simple system of JavaScript classes.

Tutorial and Script by Rod Petrovic

jMaxInput

jMaxInput allows you to limit the input size of a textarea like it is done in Twitter. You already know how Twitter limits the input text by 140 chars, so this plugin help you to do the same.

Basic Usage:

<script type="text/javascript">
  $(document).ready(function(){
    $("#div").maxinput();
  });
</script>

Source: Codrops

jQuery is great and the amount of free extensions is simply amazing! The number of jQuery plugins that were created monthly is very hard to count and to know; And It is not easy to know which one is the nice one. In November 2009, 5 jQuery plugins were born and most of people believed that they are useful for web designers. Enjoy the 5 fresh jQuery plugins!

1. jQSlickWrap

jQSlickWrap is a jQuery plugin which enables you to easily and accurately wrap your text around the content of floated images. It implements a client-side version of the Sliced and Diced Sandbags method of wrapping text around an irregularly-shaped object.

Usage:
It’s as simple as:

$('img').slickWrap();

2. jQuery Slider plugin (Safari style)

jQuery Slider is easy to use and multifunctional jQuery plugin. This plugin helps you to build a range slider with Safari Style. This one is really good one!

Usage:Available Options:

* from — [number] left limit
* to — [number] right limit
* step — [number] step of pointer
* round — [number] how many numbers after comma
* heterogeneity — [array] (percentage of place)/(value of place)
* dimension — [string] show this after number
* limits — [boolean] show or not limits
* scale — [array] labels under slider, ‘|’ — show just line
* skin — [string] if you define new skin, just write here his name, in sources defined blue skin for example

3. jQuery Shuffle Plugin

A jQuery plugin for shuffling a set of elements.

Usage:

To shuffle a set of elements use:

$(selector).shuffle();

or

$.shuffle(selector);

4. Flips

Plugin for creating sliding boxes, that allows to show more boxes
on one place. There is arrows to control which box is shown, many
options like speed, auto-change interval, sides, button labels can
be set.

It allows to show multiple columns/rows together

Usage:

$(document).ready(function() {
    $('#flips1').after( '<div class="to-flips" id="flips2">' + $('#flips1').html() + '</div>');
    $('#flips1').flips( { autorun_delay:0,    direction: 'left'   } );
});

5. JQuery Sprite Animation Plugin

Create quick sprite animation by applying an image and sprite options. You can specify sprite’s options like “frameWidth”, “startFrame”, “endFrame”, “direction” and others. The animation is applied to an element by one line of code. You can use this plugin as an alternative to the “gif” animation, using this plugin you can control your animation behavior from your JaveScript code, like defining the animation delay, having an infinite loop animation or you can specify the number of loops.

Usage:

$(document).ready(function() {
       $('#sprite1').spriteAnimation({
                numberOfLoops: -1,
                direction: 'ltr',
                startFrame: 0,
                endFrame: 36,
                interval: 20
       });
});

We always look for new jQuery Plugins for using with our projects, because jQuery is easy to work with and there are a lot of plugins built for jQuery. This post contains 5 fresh and useful jQuery plugins that you should try for your next project.

1. jQuery maxImage

This plugin will resize and scale targeted images to their max width according to the image ratio, the browser size and some simple options.

IE6+ Compatibility: Yes and all modern browsers supported.

Your final <script> tag should look something like this.

<script>
$(document).ready(function(){
 $('img.className').maxImage({
  isBackground: true,
  verticalAlign: 'top'
 });
});
</script>

2. jQuery Approach

Approach is a jQuery plugin that allows you to animate style properties based on the cursor’s proximity to an object. It works in a very similar manner to jQuery animate, however it animates over distance instead of time.

IE6+ Compatibility: Yes, but it doesn’t work with CSS style opacity.

Your final <script> tag should look something like this.

<script>
$("a#demo-link").approach({
    "fontSize": "40px",
    "color": "#CC3300"

}, 200);
</script>

3. jQuery Plugin – imgBox

imgBox is a jQuery plugin that implements a smooth zoom effect on images.

IE6+ Compatibility: Yes, but it doesn’t work with CSS style opacity.

Your final <script> tag should look something like this.

<script>
$("a.zoom").imgbox({
	'zoomOpacity'	: true,
	'alignment'	: 'center'
});
</script>

4. CSSIE – CSS in your face

Plugin for jQuery providing native support for missing CSS in IE such as:

* E > F (direct descendant)
* :hover (normally only available to a tags)
* E + F (sibling)
* [rel=attr] (attribute selection)
* :first-child and any other selectors containing : and supported by jQuery
* :focus

IE6+ Compatibility: Off course, and only IE need to apply.

Your final <script> tag should look something like this.

<script>
var test = true;
if(test) {
  $.cssie(true);
  $("link").remove();
} else {
  $.cssie();
}
</script>

5. ColorRating

A PHP/jQuery based 5-star Ajax rating script. ColorRating requires no database setup or administration as it comes with it’s own SQLite database, making deployment as easy as unzipping the files. ColorRating works with or without javascript, but requires jQuery for Ajax functionality.

Requirement: PDO extension for PHP.

Your final <script> tag should look something like this.

<link rel="stylesheet"type="text/css"href="rating/rating.css"media="screen"/>
<script type="text/javascript"src="http://www.google.com/jsapi"></script>
<script type="text/javascript" >google.load("jquery","1.3.2");</script>
<script type="text/javascript"src="rating/rating.js"></script>
<?php include('rating/rating.php'); ?>

..............

<?php rating_form("unique_table_name"); ?>