How to make a toolbar in Google Chrome?

Question

I\'m exploring Google Chrome extensions for the first time. I would like to create what appears as a toolbar along the top of the page when you click the extension icon, muc

Answer 1

This gives you a stumble-upon-like browser extension for a variety of browsers, although you can limit the download to just chrome if you wish.

Installers

General install page (provides an executable that can be signed if you are on windows to ease the installation process):

http://crossrider.com/apps/35180/install_page

Specific installs:

• Firefox: http://crossrider.com/download/ff/35180
• IE: http://crossrider.com/download/ie/35180
• Chrome: http://crossrider.com/download/chrome/35180
• Safari: (will work, but need to go through process with Apple for that)

Crossrider also makes it easy to publish to chrome store as well and provides an easy way to sign your extension for executable downloads on windows.

Info

Here are the docs for the API, its quite extensive for a cross-browser solution:

http://docs.crossrider.com/

In the code below I'm not putting the html & css because there are limits to the number of characters for answers. However, if that looks good, you can either open it up (crx's are zips, just rename extension to .zip) to get the css and html inside or we can figure out a way for me to send it to you. Note that I'm injecting the HTML and CSS into the page.

I usually write the css and html, then minify both (http://cssminifier.com/ and http://www.willpeavy.com/minifier/), then I take the minified output and I use a string escape tool like http://www.htmlescape.net/stringescape_tool.html to escape it so that it can be put into the extension code, as you want that to be as fast as possible, given that its an extension, not a web page of course.

So, if this looks good, go to crossrider.com, set up an account (it is 100% free), and paste these files in the appropriate places and put in the minified/escaped HTML and CSS you need, replacing the stuff in the cssstr and htmlstr in the extension.js below.

Code

extension.js:

appAPI.ready(function($) {
    // Place your code here (you can also define new functions above this scope)
    // The $ object is the extension's jQuery object

    // Adds a listener that handle incoming messages
    var lid = appAPI.message.addListener(function(msg) {
        switch(msg.action) {
            case 'SHOWEXAMPLEBAR': 
            $('#examplebar-toolbar').show();
                break;
            case 'HIDEEXAMPLEBAR': 
                $('#examplebar-toolbar').hide();
                break;
            default: 
                break;
         }
    });

    // Add toolbar (not included here due to size - be sure it is escaped)
    var cssstr = '/* The CSS of your toolbar */';

    // Add toolbar HTML (not included here due to size - be sure it is escaped)
    var htmlstr = '\x3C!-- the html of your toolbar --\x3E';

    $('\x3Cstyle\x3E'+cssstr+'\x3C/style\x3E' + htmlstr).prependTo('body');
    $('#examplebar-close').click(function() {
        //Tell the background to change its buttonstate:
        $('#examplebar-toolbar').hide();
        appAPI.message.toBackground({action: "HIDEEXAMPLEBAR"});
    });
});

background.js:

// Note: the $ variable that represents the jQuery object is not available
//       in the background scope
appAPI.ready(function() {
    // Global variable to hold the toggle state of the button
    var buttonState = true;

    // Sets the initial browser icon
    appAPI.browserAction.setResourceIcon('button.png');

    // Sets the tooltip for the button
    appAPI.browserAction.setTitle('Bar');

    // Sets the text and background color for the button
    if (appAPI.browser.name !== 'safari') {
        appAPI.browserAction.setBadgeText('bar');
        appAPI.browserAction.setBadgeBackgroundColor([255,0,0,50]);
    }else{
        // Safari only supports numeric characters
        // and has a fixed background color
        appAPI.browserAction.setBadgeText('1234');
    }

    // Sets the initial onClick event handler for the button
    appAPI.browserAction.onClick(function(){
        if (buttonState) {
            //Hide the toolbar by notifying the extension code:
            appAPI.message.toAllTabs({action: "HIDEEXAMPLEBAR"});
            if (appAPI.browser.name !== 'safari') {
            // Sets the text and background color for the button
            // using the optional background parameter
                appAPI.browserAction.setBadgeText('helo', [0,0,255,255]);
                // Sets the icon to use for the button.
                appAPI.browserAction.setResourceIcon('button.png');
            } else {
                // Safari only supports numeric characters,
                // has a fixed background color,
                // and can only use the extension's icon
                appAPI.browserAction.setBadgeText('4321');
            }
        } else {
            appAPI.message.toAllTabs({action: "SHOWEXAMPLEBAR"});
            // Remove the badge from the button
            appAPI.browserAction.removeBadge();

            if (appAPI.browser.name !== 'safari'){
                // Reset the icon for the image
                appAPI.browserAction.setResourceIcon('button.png');
            }
        }

        // Toggle the state
        buttonState = !buttonState;
    });

    // Adds a listener that handle incoming messages
    var lid = appAPI.message.addListener(function(msg) {
        switch (msg.action) {
            case 'HIDEEXAMPLEBAR': 
            buttonState = !buttonState;
            break;
            default:
                break;
        }
    });    
});

Notes

Also note that jQuery is automatically available in the extension scope, so you get that for free along with the API's. And, if you want to inject into an iframe, be sure not to forget to enable iframes in the settings.

For the community support site: https://getsatisfaction.com/crossrider

They are very responsive and can help you out when you run into trouble.