Hacking the Firefox UI from the Web Console

I am excited by the ongoing awesome work of our Developer Tools team and have been playing with Firefox’s new, rapidly improving Web Console. By default, commands typed into the console run in more or less the scope of the current content window, which is great for web development, but as a Firefox front-end engineer, I often want to use it to hack on Firefox’s own UI. To make Web Console behave as if it were in the scope of the browser window, simply open about: in a new tab, open the Web Console (ctrl/cmd+shift+k), and paste the following two lines:

Components.utils.import('resource://gre/modules/Services.jsm');
var win = Services.wm.getMostRecentWindow('navigator:browser');

This makes the variable win reference the current Firefox browser window! To see what I mean, try typing the following:
(Watch the selected tab in the tab strip when you press enter!)

win.gBrowser.selectedTab.style.cssText =
  'transition: .5s; transform: scaleX(-1);'

Happy hacking!

About these ads