I recently released my “Old School Retweet” Kynetx app in the Kynetx app store for the newly released browser extensions. I super love the new extensions and all that they do for users and developers alike. Something that I forgot when I released the app in the app store is that the new extension are sandboxed.

Because the extensions are sandboxed, all of the scripts from the extensions run a bit differently than they used to in the previous Kynetx extensions. Without getting into the technical details too much, the previous extensions just injected JavaScript into the page and the new extensions run JavaScript in a sandbox which has access to the DOM but can’t access anything else on the page. Because of this change my retweet app broke since I was using the jQuery loaded by Twitter.com to bring up the new tweet box (I do this because Twitter.com used that library to bind a click event and to trigger that event it has to be from the same library that bound it). Thankfully, with the help of a friend, I was able to get a work around for both Firefox and Chrome’s sandbox environment.

How I did it…

If the app is run not inside a sandbox I can just access the jQuery that Twitter.com loads to open a new tweet box

$("#new-tweet").trigger("click");

From within the Firefox sandbox I can access the page outside of the sandbox

window['$']("#new-tweet").trigger("click");

If I am in the Chrome sandbox I can create a script element that has the JavaScript that I want to execute. Crude, but it works. : )

var trigger_click_script = document.createElement("script");
var fallback = "window['$']('#new-tweet').trigger('click');";
trigger_click_script.innerHTML = fallback;
document.getElementsByTagName("head")[0].appendChild(trigger_click_script);

Here is the JavaScript code that I ended up with that gets executed when a user clicks on the retweet button.

// get stuff to retweet
var tweet = $K(this).parents(".tweet-content").find(".tweet-text").text();
var name = $K(this).parents(".tweet-content").find(".tweet-screen-name").text();
 
// build tweet
var retweet = "RT @"+name+" "+tweet;
 
// open new tweet box
$("#new-tweet").trigger("click");
 
// hack for FF sandbox
if ($("#tweet-dialog:visible").length === 0) {
  window['$']("#new-tweet").trigger("click");
}
 
// put tweet in new tweet box
$K(".draggable textarea.twitter-anywhere-tweet-box-editor").val(retweet).focus();
$K("#tweet_dialog a.tweet-button.button.disabled").removeClass("disabled");
 
// hack for chrome sandbox
if ($("#tweet-dialog:visible").length === 0) {
  var fallback = "window['$']('#new-tweet').trigger('click'); ";
  fallback += "window['$']('.draggable textarea.twitter-anywhere-tweet-box-editor').val('"+retweet+"').focus(); ";
  fallback += "window['$']('#tweet_dialog a.tweet-button.button.disabled').removeClass('disabled'); ";
  var trigger_click_script = document.createElement("script");
  trigger_click_script.innerHTML = fallback;
  document.getElementsByTagName("head")[0].appendChild(trigger_click_script);
}

With a bit of free time I’ve had lately being unemployed, I was able to work on this project and finish it. I’m very happy to have it done and working so well.

What is it?

It’s a keyboard activated search tool for a specific website built to act like the application launcher Alfred App and QuickSilver. I went through each page in the Kynetx documentation site and indexed each page by hand. I didn’t include all pages which I believe makes this a much more powerful search for Kynetx developers. I also assigned key words to each page based on what I thought it should be searchable by. If you have suggestions, let me know because I would love to hear them.

Check out the live demo at http://supersearcher.michaelgrace.org/

If you like it, you are free to use the code in any way that you like. Cheers!

While working on building a search tool for a documentation site I came up with this demo. I wanted to be able to execute the search much like how Google Instant currently waits for a pause in the users typing to execute the search. This is an example of how I am accomplishing that. You can check out the live demo at

http://mikegrace.s3.amazonaws.com/geek-blog/sandbox/delay-search.html

This is what the demo looks like even though the code is the fun part:

Tested on Mac 10.6.6 with Firefox 3.6, Chrome 9.0, Safari 5.0, and Opera 11.01

I’m working on building a documentation search tool based on QuickSilver and Alfred App. I needed a way to activate the search so I built this demo in preparation for finishing the search tool. You can check out the live demo at

http://mikegrace.s3.amazonaws.com/geek-blog/double-tap/double-tap.html

This is what it looks like even though the code is the fun part:

The demo code will shift states as you press the ‘s’ key. If you press the ‘s’ key quickly enough back to back it will switch to the activated state and stay there until the ‘esc’ key is pressed causing it to reset. The code also won’t change state if the focus is in a textarea or input to prevent activation while a user is typing in an area they don’t want to be interrupted in. I will have to add an exception for the search tool input box when I implement this to allow the ‘esc’ key to reset and hide the search tool while inside of it. You can use the code if you like and I would love to hear any feedback that anyone has about it.

Tested on Mac 10.6.6 with Firefox 3.6, Chrome 9.0, Safari 5.0, and Opera 11.01