Building a Twitter Client as an Internet Explorer Add On using SpicIE

Welcome Back! I hope you enjoy the content on this site. If you have not done so already, you may want to subscribe to my RSS feed or become a fan of this blog on Facebook. Thanks for visiting!

I came across the (Simple Plug-in Creator for Internet Explorer) SpicIE project this weekend and wanted to give it a try. So what’s a better example than to build a twitter client since it seems to be getting all the hype lately.

Note: The link to download the solution for this project is available at the end of the post.

Disclaimer: This is something I threw together to test it’s feasibility. It’s still lacking a lot of features and error handling. But it’s still a good proof of concept and something that I think many developer will find useful.

Intro

If you ever tried your hand at developing a toolbar or a plug-in for internet explorer you must know how painful it is, and if you didn’t you should really consider yourself lucky that you saved yourself from days of head banging.

SpicIE is a framework which allows you easily to extend Internet Explorer 7/8 with your own plugins. SpicIE wraps/hides the IE COM extension interfaces and makes it easy to develop browser extensions in managed programming languages.
SpicIE is designed for simplicity. The initial creation of an Internet Explorer plugin with SpicIE takes only minutes until you have a runnable, debuggable code base which you can extend with your own functionality. There are lot of scenarios where browser plugins could be useful. SpicIE lets you develop your own browser functionality comfortable with minimal technical efforts.
With SpicIE you can develop your own:

• IE browsing event handlers
• IE toolbar buttons
• IE menu entries
• IE context menu entries
• IE explorer bars
• IE toolbars.

What you need to get started

You need to download the SpicIE framework , for the twitter API I used the excellent yedda library which I have used in another project and had already extended with a parser and some other methods. The extensions to the yedda library are available in the solution.

Creating the Plug-in

To create the plugin I started by adding a new SpicIE project

available under My Templates.

The first step is to create a ContainerControl that will be our toolbar. and should inherit from SpicIE.Controls.Toolbar

public partial class ContainerControl : SpicIE.Controls.Toolbar

This class should also override a couple of properties for COM Registration.

        /// <summary>
        /// The PluginGuid _must_ be a unique GUID to identify 

            and register the COM object correctly
        /// </summary>
        public override string PluginGuid
        {
            get { return "BBBC8D2D-9A4C-4c9a-9BD4-CC4815B28BBB"; }
        }

        /// <summary>
        /// The PluginProgID _must_ be provided to identify 

            and register the COM object correctly
        /// </summary>
        public override string PluginProgID
        {
            get { return "TwitIEPlugin.ContainerControl"; }
        }

We add a few properties to set the size and name and color of the toolbar. We also need to call BuildControls to implement the controls in the toolbar.

this.ToolbarName = "Twitter IE Add On";
this.ToolbarTitle = "Twitter";

this.ToolbarHelpText = "This is a twitter IE Add On";
this.ToolbarStyle = ToolbarEnum.Vertical;

// represents the startup size of the toolbar
this.Size = new Size(325, 200);
// represents the sizing steps
this.IntegralSize = new Size(0, 0);
// represents the minimum size
this.MinSize = new Size(325, 200);
// represents the maximum size
this.MaxSize = new Size(325, 1000);

// demonstrates how to set the backgroundcolor for the toolbar
this.BackgroundColor = Color.FromArgb(246, 248, 253);

// creates a new control collection and inserts the designer-generated controls
Control[] ctrls = new Control[Controls.Count];
Controls.CopyTo(ctrls, 0);

// call internal method for implementing controls in the toolbar
BuildControls(ctrls);

The last step in setting up the plug-in is to add our Toolbar container to the controls of the plug-in.

public TwitIEPlugin()
           : base()
{
   HostInstance = this;

   //to force the browser to show the toolbar
   ForceShowToolbar(typeof(Toolbar.ContainerControl));

}

internal static List<SpicIE.Controls.IControlBase> RunOnceCOMRegistration()
{
   Host.TraceSink.TraceEvent(TraceEventType.Information, 0, 

                             "RunOnceRegisterCOMControls");

   List<SpicIE.Controls.IControlBase> controls = 

                                      new List<SpicIE.Controls.IControlBase>();

   //add our toolbar to the list of controls
   controls.Add(new Toolbar.ContainerControl());

   return controls;
}

Now if you run the solution you should have an empty toolbar.

I won’t bore you with the details of how the controls are implemented and the calls to the twitter API as it’s simple enough and it’s basic windows forms stuff. but if you have any questions please let me know in the comments and I’ll do my best to answer every question.

Building and testing the application

Before running the application you need to setup your twitter username and password in the UserConfig.cs  file  in the TwitIEPlugin project.

using System;
using System.Collections.Generic;
using System.Text;

namespace TwitIEPlugin
{
    internal static class UserConfig
    {
        internal static string USERNAME = ""; //your twitter user name
        internal static string PASSWORD = ""; //your twitter password
        internal static int UPDATE_FREQUENCY = 120000; //2 minutes
    }
}

You can download the solution here.

Hope this helps,

Hatim