Stack Exchange Topbar Tools

Question

About

Ever stared at that almost-black¹ 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 right side (between your badge counts and the search box), and change their colour
• Give those links (even the default ones) little bubbles like the ones on the left-side icons, to provide notifications of things that need doing
• 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

The MIT License

Some really old versions used the GPL v3, but a commenter made me realise that was not a great idea:

Just a suggestion, you could make the license MIT or BSD, which are also commercial-friendly. Thus, the code would be open source for everyone. After all, there's nothing wrong with an individual being able to make a profit, especially if it benefits the SE users.

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.
• Float by Default
  You want the thing to float? Enable this!
• Meta/Main+Chat Links
  Exactly what it says on the tin. Apparently people liked those links.
• UTC Clock
  Factors in StackExchange.options.serverTimeOffsetSec, so it's actually the official SE server time!

Platform

Fully tested in latest Firefox (26 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($) {
  (window.StackExchangeTopbarToolsPluginInit
   = window.StackExchangeTopbarToolsPluginInit
   || []).push(function(SETT) {

    // Your plugin code goes here
    // You can refer to the library object by the shorthand `SETT`

  });
  if (typeof window.StackExchangeTopbarTools === 'object')
    window.StackExchangeTopbarTools.pluginsReady();
});

---

^{1 Yes, it's black, but it's actually 14% transparent black, which I consider not-black enough on most SE backgrounds.}