Skip to main content
1 of 5

Stack Exchange Topbar Tools

About

Ever stared at that almost-black1 bar at the top of the page and thought "not awesome enough"?

Well, think no longer! Stack Exchange Topbar Tools is a userscript that contains an extensible framework for making that almost-black bar more awesome.

With this userscript installed, you can write plugins that

  • Change the colour of the bar, and make it float at the top of the viewport or expand to the width of the screen
  • Add links to the RHS (between your badge counts and the search box)
  • lots of other cool stuff that will be implemented sometime in the future

The getting-started snippet (see end of post) provides plugin initialisation that

  • behaves the same way (that is, working) no matter which order things are loaded in
  • and won't blow up even if you don't load the underlying library at all!
    It still won't work, though; it just won't blow up.

License

GNU GPL v3 (the one that means closed-source apps can't use this (which shouldn't be a problem, as this is a userscript)).

Download

The library itself

Plugins maintained in the official repository:

  • Basic Config
    Buttons to toggle whether the bar is attached to the top of, and/or spans the full width of, the viewport.
  • Meta/Main+Chat Links
    Exactly what it says on the tin. Apparently people liked those links.
  • UTC Clock
    Never lose track of the official SE time again!

Platform

Fully tested in latest Firefox (25 at time of writing); should theoretically work on Chrome.

Contact

It's just me, @michaelb958. You can contact me by:

  • Creating an issue on GitHub. This is the preferred mechanism for providing feedback or suggestions for the library.
  • Commenting on or answering this post. Feedback or suggestions provided this way will be accepted.
  • Pinging me on chat. For general conversation and stuff.
  • Emailing me (email address available on my GitHub profile). For use in case of emergency.

Code

Written in JavaScript, with ample use of jQuery.
Contribute on GitHub!

Really basic getting-started template for writing plugins (from the readme)

function with_jQuery(f) {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.textContent = "(" + f.toString() + ")(jQuery)";
    s.setAttribute('data-with-jquery', '');
    document.head.appendChild(s);
};

with_jQuery(function($) {
  if (typeof StackExchangeTopbarToolsPluginInit === 'undefined')
    StackExchangeTopbarToolsPluginInit = [];
  StackExchangeTopbarToolsPluginInit.push(function(tools) {
    
    // Your plugin code goes here
    // You can refer to the library object by the shorthand `tools`
    
  });
  if (typeof StackExchangeTopbarTools === 'object')
    StackExchangeTopbarTools.pluginsReady();
});

1 Yes, it's actually #212121, not #000000.