Posted by & filed under Uncategorized.

One of the most annoying things about using Chrome is the StumbleUpon extension. It’s a terrible port for those used to the responsiveness of Firefox’s addons UI. Clicking on the Icon will inject an iframe, which takes a bit to load. That same iframe is injected for every page thereafter until you click the SU icon again. The annoying part is that it’s slow. It needs to load a bunch of javascript when you want it, and when you don’t want it. The latter being when it’s loading on every next page till you turn it off.

So what can be done about it?

If I were to write a full extension, I’d scrap the whole ‘toolbar’ idea. Chrome supports very minimal UI options, but it does have some! First off, it has the notification buttons. If Chrome doesn’t limit you to only 1 button per extension, why not make the major stumble button and a separate button to have a menu for Share, Account, etc.

Since it looks like you can only have one browser_action (button) per extension, then try moving the “stumble” browser_action into the top of the stumble menu browser_action. Then launch a stumble button extension for power users that don’t like having to click+wait+click for random stumbling.

Unfortunately, I’m still rather hackish in javascript. I know my way round the syntax, but writing an extire Chrome extension is beyond me for now. So instead, I focused on what I actually use the toolbar for.

I only use the toolbar for the share button and drop down. I get email alerts whenever a friend shares with me, which combined with a GMail Notifier gives me a live view of my friends shares. I rarely (/never) use the Stumble button anymore since I’ve started browsing Reddit.

The StumbleUpon Share Bookmarklet

So ultimately, I wrote a bookmarklet to inject just the share box.

Source:

javascript:
(function(global){

global.SUT = {
    sharePanelUrl: function(url) {
        return 'http://www.stumbleupon.com/share/?url='+url+'&src=website&mode=toStumbler';
    },
    closeSharePanel: function() {
        SUT.deleteNode(document.getElementById('SUshareWrapper'));
    },
    deleteNode: function(n) {
        n.parentNode.removeChild(n);
    }
};

var d = document,
    b = d.getElementsByTagName('body')[0],
    w = d.createElement('div'), // Wrapper
    wS = w.style; // Wrapper.style

wS.top = '0';
wS.left = '0';
wS.width = '100%';
wS.zIndex = '999';
wS.position = 'fixed';
wS.backgroundColor = '#fff';
wS.borderBottom = '1px solid black';
wS.textAlign = 'center';
w.id = 'SUshareWrapper';
w.innerHTML = '<iframe src="'+encodeURI(SUT.sharePanelUrl(d.URL.split("#")[0]))+'" style="width: 100%; height: 300px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; overflow-x: hidden; overflow-y: hidden; "></iframe><input type="button" width="100%" height="15px" onclick="javascript:SUT.closeSharePanel()" value="Close"></input>';
b.appendChild(w);

})(typeof exports != 'undefined' ? exports : this);

Creating the Bookmarklet

Creating the bookmarklet was fun. It is by all means not perfect probably, as I didn’t sweep through it for minimalism. Nor is setting a global object the best approach. I also found out that browsers (or just Chrome?) don’t let you get objects created in a top frame from an iframe unless the protocol and domain match. Thus I wasn’t able to hook the closing call after a successful share.

I also found out that dynamically created fixed objects will have it’s x coordinate relative to the #anchor tag if found. I relearned to always encode my URLs before submitting them as parameters.

The best tool for bookmarklets however, is a javascript compressor. This let’s you write in a decent working environment (readable variable names), before ‘compiling’ it for the bookmarklet. Last but not least, always use ‘ and ‘ when dealing with bookmarklets, at least if you’re planing to use the bookmarklet as a URL on a webpage.

Leave a Reply

  •  

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax