<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Adam Christian &#187; Firefox</title>
	<atom:link href="http://www.adamchristian.com/archives/tag/firefox/feed" rel="self" type="application/rss+xml" />
	<link>http://www.adamchristian.com</link>
	<description></description>
	<lastBuildDate>Wed, 08 Feb 2012 17:41:02 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Micro-Bookmarking with MyTabs</title>
		<link>http://www.adamchristian.com/archives/147</link>
		<comments>http://www.adamchristian.com/archives/147#comments</comments>
		<pubDate>Mon, 23 Feb 2009 21:18:36 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Firefox]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Mozilla]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Addons]]></category>
		<category><![CDATA[Mozmill]]></category>

		<guid isPermaLink="false">http://adamchristian.com/?p=147</guid>
		<description><![CDATA[A few weeks ago I realized that every time I boot my laptop, one of the first things I do is to open Firefox, and immediately load about 7 web sites as tabs. Some of them requiring user interaction to navigate to the desired state. I didn&#8217;t realize that this was actually a phenomenon called [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-156" style="float:right" title="MyTabs" src="http://www.adamchristian.com/wp-content/uploads/2009/02/mytabs.png" alt="MyTabs" width="88" height="51" />A few weeks ago I realized that every time I boot my laptop, one of the first things I do is to open Firefox, and immediately load about 7 web sites as tabs. Some of them requiring user interaction to navigate to the desired state. I didn&#8217;t realize that this was actually a phenomenon called &#8220;micro-bookmarking&#8221;, and that I may not be the only person who has this routine.</p>
<p>I don&#8217;t necessarily want to bookmark these sites, and this process of opening them is somehow part of my routine, however spending this kind of time every time I want to get to this state is just silly. Part of the ritual is to go through each of the open tabs, read the most recent updates and then close the tab, repeating this whole process many times a day.</p>
<p>At this point you should be starting to get the jist, to automate this whole process I created a Firefox Extension called <a href="http://wiki.github.com/admc/mytabs">MyTabs</a>. The UI and use case is simple, but some of the tools I built in make it potentially very powerful.</p>
<p><a href="mytabs">MyTabs</a> has the <a href="http://code.google.com/p/mozmill/wiki/ControllerAPI">MozMill Controller</a> built in, and is automatically setup in the tabs content window scope, allowing you to <a href="http://wiki.github.com/admc/mytabs/tab-scripting">write and attach scripts to each tab to be executed &#8216;onload&#8217;</a>. Thus automating the need to ever manually login to your web applications again.<br />
<br/><br />
<strong><a href="http://wiki.github.com/admc/mytabs/tab-scripting">Example script</a> for logging into <a href="http://www.facebook.com">Facebook</a>:</strong></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//Lookup the three elements I want to interact with</span>
<span style="color: #003366; font-weight: bold;">var</span> email <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> elementslib.<span style="color: #660066;">ID</span><span style="color: #009900;">&#40;</span>doc<span style="color: #339933;">,</span> <span style="color: #3366CC;">'email'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> pass <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> elementslib.<span style="color: #660066;">ID</span><span style="color: #009900;">&#40;</span>doc<span style="color: #339933;">,</span> <span style="color: #3366CC;">'pass'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> login <span style="color: #339933;">=</span> doc.<span style="color: #660066;">getElementsByClassName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'UILinkButton_A'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//Controller expects elementslib objects</span>
<span style="color: #003366; font-weight: bold;">var</span> elibLogin <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> elementslib.<span style="color: #660066;">Elem</span><span style="color: #009900;">&#40;</span>login<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//Tell the controller to type the credentials</span>
tab.<span style="color: #660066;">type</span><span style="color: #009900;">&#40;</span>email<span style="color: #339933;">,</span> <span style="color: #3366CC;">'my_facebook_account@address.com'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
tab.<span style="color: #660066;">type</span><span style="color: #009900;">&#40;</span>pass<span style="color: #339933;">,</span> <span style="color: #3366CC;">'my_password'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//Click the login button</span>
tab.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span>elibLogin<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>This is all possible by a really slick snipped of code I found on <a href="https://developer.mozilla.org/en/Code_snippets/Tabbed_browser">MDC</a>:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> newTabBrowser <span style="color: #339933;">=</span> gBrowser.<span style="color: #660066;">getBrowserForTab</span><span style="color: #009900;">&#40;</span>gBrowser.<span style="color: #660066;">addTab</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;http://www.google.com/&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
newTabBrowser.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;load&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> newTabBrowser.<span style="color: #660066;">contentDocument</span>.<span style="color: #660066;">body</span>.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;Stuff&quot;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p><br/><strong>Security/Preferences</strong></p>
<p>For the sake of security I made it so that you can only attach scripts, not edit them so that you friends can&#8217;t go and view your script to get those plain text passwords. All the tab data is stored in the prefManager so that it is available across sessions. However if someone knew enough to pick apart the source, install a trusted JS Shell and manually access the prefManager you may be in trouble&#8230; so be careful about super sensitive information especially on a shared machine.</p>
<p>Using <a href="http://ui.jquery.com">jQuery UI</a> I was able to make the UI relatively attractive, intuitive and possibly skinnable in the future (if you want to do this yourself, grab the source swap out the jQuery UI theme CSS directory and boom you have yourself  new look.)</p>
<p><br/><strong>Some Screenshots</strong></p>
<p><img class="alignnone size-full wp-image-148" title="Welcome" src="http://www.adamchristian.com/wp-content/uploads/2009/02/picture_1.png" alt="Welcome" width="592" height="410" /><br />
<img class="alignnone size-full wp-image-149" title="Tab Overview" src="http://www.adamchristian.com/wp-content/uploads/2009/02/picture_2.png" alt="Tab Overview" width="581" height="403" /><img class="alignnone size-full wp-image-150" title="Adding new Tabs" src="http://www.adamchristian.com/wp-content/uploads/2009/02/picture_3.png" alt="Adding new Tabs" width="581" height="403" /><img class="alignnone size-full wp-image-151" title="Tab Scripting" src="http://www.adamchristian.com/wp-content/uploads/2009/02/picture_4.png" alt="Tab Scripting" width="581" height="403" /></p>
<p>The source is fully available on <a href="http://www.github.com">GitHub</a>, and the <a href="http://cloud.github.com/downloads/admc/mytabs/mytabs-03.xpi">XPI</a> is available on <a href="http://addons.mozilla.org">Mozilla Add-ons</a>.</p>
<ul>
<li><a href="http://github.com/admc/mytabs/tree/master">MyTabs on GitHub</a></li>
<li><a href="https://addons.mozilla.org/en-US/firefox/addon/10720/">MyTabs on Mozilla Add-ons</a></li>
</ul>
<p>Remember that I am currently on bug fix release 0.3, but please let me know if you run into any problems!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.adamchristian.com/archives/147/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>XUSH (.01), you know it&#8217;s fun to say.</title>
		<link>http://www.adamchristian.com/archives/121</link>
		<comments>http://www.adamchristian.com/archives/121#comments</comments>
		<pubDate>Wed, 28 Jan 2009 18:57:49 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Firefox]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Mozilla]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[Python]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Extension]]></category>
		<category><![CDATA[Mozmill]]></category>
		<category><![CDATA[Shell]]></category>
		<category><![CDATA[Venkman]]></category>
		<category><![CDATA[XPCOM]]></category>
		<category><![CDATA[XUL]]></category>

		<guid isPermaLink="false">http://adamchristian.com/?p=121</guid>
		<description><![CDATA[Over the past 8 months I have been neck deep in XUL and XPCOM and with Venkman being as unintuitive as it is I have badly needed a shell with access to the trusted space in the browser. I also had a couple more requirements, which were that it was super easy to get at [...]]]></description>
			<content:encoded><![CDATA[<p>Over the past 8 months I have been neck deep in <a href="http://www.mozilla.org/projects/xul/">XUL</a> and <a href="http://www.mozilla.org/projects/xpcom/">XPCOM</a> and with <a href="https://addons.mozilla.org/en-US/firefox/addon/216">Venkman</a> being as unintuitive as it is I have badly needed a shell with access to the trusted space in the browser. I also had a couple more requirements, which were that it was super easy to get at (keyboard shortcut), and that it looks awesome (transparency required).</p>
<p>Since making things looks really nice in <a href="http://www.mozilla.org/projects/xul/">XUL </a>is really hard, I decided that I would build the UI in the current Firefox content window (sorry <a href="http://www.mozillamessaging.com/en-US/">tbird</a> etc, but I built a less shiny version of this into <a href="http://code.google.com/p/mozmill/">Mozmill</a> trunk for all of you).</p>
<p>Some of the functionality that I decided was a top priority was some slightly abstracted access to the window mediator which I am calling &#8216;windows&#8217;, and is simply an array of all the different windows available in the whole browser. The other big one is dir(), I am constantly looking for a property in one of the many, many objects I am trying to access and now that is really easy.</p>
<p>All of that goodness combined with enough space to stick real code blocks and a full history (which you can access using the shift key and up/down arrows), I find myself pretty comfortable.</p>
<p>After <a href="http://adamchristian.com/stuff/xush-01.xpi">installing the extension</a>, you can <strong>simply press &#8216;meta (cmd on mac) + shift + s&#8217;</strong> and you should be greeted with the following (toggling will show/hide the shell):</p>
<p><strong>UPDATE: </strong>It was pointed out to me that on windows meta may not be bound, so I have updated both the extension and git, please try &#8216;alt+shift+ctrl+s&#8217; or &#8216;ctrl+shift+s&#8217; on windows/linux, (I am testing in a VM so it&#8217;s a bit strange. Sorry about the confusion!) </p>
<p> </p>
<div id="attachment_123" class="wp-caption alignnone" style="width: 624px"><img title="Welcome to XUSH" src="http://www.adamchristian.com/wp-content/uploads/2009/01/picture-13-1024x847.png" alt="Welcome to XUSH" width="614" height="508" /><p class="wp-caption-text">Welcome to XUSH</p></div>
<p>To get started, you can type &#8216;help&#8217; to see what is available to you.</p>
<div id="attachment_128" class="wp-caption alignnone" style="width: 831px"><img class="size-full wp-image-128 " title="Help Menu" src="http://www.adamchristian.com/wp-content/uploads/2009/01/picture-22.png" alt="Help Menu" width="821" height="206" /><p class="wp-caption-text">Help Menu</p></div>
<p> </p>
<p> </p>
<p>Other available functionality includes a big chunk of the <a href="http://code.google.com/p/mozmill/wiki/ControllerAPI" target="_blank">mozmill controller</a> for driving user actions in the browser, as well as <a href="http://code.google.com/p/mozmill/source/browse/trunk/mozmill/extension/resource/modules/elementslib.js" target="_blank">elementslib</a> &#8212; which gives you all kinds of powerful features for looking up nodes in the browser.</p>
<div id="attachment_127" class="wp-caption alignnone" style="width: 868px"><img class="size-full wp-image-127 " title="ElementsLib" src="http://www.adamchristian.com/wp-content/uploads/2009/01/picture-6.png" alt="ElementsLib" width="858" height="187" /><p class="wp-caption-text">ElementsLib</p></div>
<p>As I mentioned above, the windows helper can quickly give you an idea of what is open in the browser and let you directly access the objects in the windows[x] array.</p>
<div id="attachment_129" class="wp-caption alignnone" style="width: 840px"><img class="size-full wp-image-129 " title="Windows Helper" src="http://www.adamchristian.com/wp-content/uploads/2009/01/picture-3.png" alt="Windows Helper" width="830" height="149" /><p class="wp-caption-text">Windows Helper</p></div>
<p> </p>
<p>The nice big console gives you enough space (and using shift) you can do multiple line commands to actually execute code snippets:</p>
<div id="attachment_130" class="wp-caption alignnone" style="width: 676px"><img class="size-full wp-image-130 " title="Code Blocks" src="http://www.adamchristian.com/wp-content/uploads/2009/01/picture-5.png" alt="Code Blocks" width="666" height="218" /><p class="wp-caption-text">Code Blocks</p></div>
<p>My next round of features will include some more helpers, including tab completion and any bug fixes I find, please let me know of any that you find!</p>
<p>If you would like to play with the source, <a href="http://github.com/admc/xush/tree/master">I have it on github </a>and have a python script that uses <a href="http://code.google.com/p/mozrunner/">mozrunner</a> to launch it in dev mode (with venkman installed, although now I don&#8217;t really need it), but saves you from installing and uninstalling the extension every-time you want to try out your latest code changes:<br />
<code><br />
python xush.py<br />
</code></p>
<p>That should launch <a href="http://www.getfirefox.com">Firefox</a> with <a href="http://github.com/admc/xush/tree/master">XUSH</a> and <a href="https://addons.mozilla.org/en-US/firefox/addon/216">Venkman</a> both installed and allow you to hit the shortcut and wham, test away.</p>
<p>After another round of bug fixes I will be submitting this to <a href="https://addons.mozilla.org/en-US/firefox/">Mozilla AMO</a>.</p>
<p><strong>Other projects you might be into if this interests you:</strong></p>
<ul>
<li><a href="https://addons.mozilla.org/en-US/firefox/addon/216">Venkman</a></li>
<li><a href="http://code.google.com/p/mozmill/">Mozmill</a></li>
<li><a href="http://getfirebug.com/releases/chromebug/">Chomebug</a></li>
</ul>
<p>Thanks for your interest!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.adamchristian.com/archives/121/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk: basic
Page Caching using disk: enhanced

Served from: www.adamchristian.com @ 2012-02-09 11:58:41 -->
