Kynetx’s New Sandboxed Browser Extensions

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);
}

YouTube Refreshed Kynetx App

My friends and I want a cleaner version of YouTube to use. One which doesn’t have lame and time wasting suggested videos, pointless comments, and lots of clutter. Thus, I have created the YouTube Refreshed Kynetx app. The app currently works on the main page of YouTube and individual video pages.

Before:

After:

Before:

After:

Download Chrome Extension

Download Firefox Extension

youtube icon

Keywordicon – Experimental Twitter Kynetx App

Keywordicon is an experimental Kynetx app that I built to modify the Twitter.com interface. It is based on the same code that runs my recently published tweet filter Kynetx app. I thought it would be interesting to annotate each tweet with icons based on key words found in the tweet… thus the name keywordicon (pronounced like favicon but with 33% more┬ásyllables). I don’t expect very many people to use it but it’s an interesting concept and it has been fun to use it and see how it changes the way I am able to skim through my tweet stream and stop at places that are interesting to me.

Action shots!

App loaded in meta tray (was going to have settings here but decided to keep it simple w/out settings)

Tweet annotated with keywordicon

See the app in action through moving pictures!

Download Chrome Extension

Download Firefox Extension

Tweet Filter Kynetx App

This is another Kynetx App that I have built to enhance the Twitter.com web interface. This app allows you to hide or highlight tweets based on words found in each tweet. The app also remembers your list of word between each use. Just add a list of words separated by commas with no spaces and click update!

Demo video:

Download Chrome Extension

Download Firefox Extension