Webkit Search Input Styling

Default webkit search input styling versus normalized
I recently needed to have a search input look the same on Firefox and Chrome. Chrome does some fancy styling when you use a search type input which is great but sometimes you need it to be the same everywhere. I was able to get it to look the same by employing the following styling:

input[type=search] {

input::-webkit-search-cancel-button {
    display: none;

If you are using a webkit based browser you can checkout the live demo at -> http://mikegrace.s3.amazonaws.com/geek-blog/webkit-search-input-example.html

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


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


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;

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

// hack for FF sandbox
if ($("#tweet-dialog:visible").length === 0) {

// 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;

Growl Notifications For Yammer.com Website

I have tried many different applications for Yammer and they all disappoint. I recently started using the website and found it to be MUCH better than any client I have tried yet. The biggest failing point for the website is the lack of growl notifications to let me know I have a new Yam waiting for me to see. This is the reason I created the “Growlin Yammer” Kynetx app that uses Notify.io

You will need to install Desktop Notifier app linked to at http://www.notify.io/ and my Kynetx app will walk you through getting setup what it needs to run. Once everything is setup and running, you can click the ‘test’ link created by the Kynetx app to make sure everything is working

Download Chrome Extension

Download Firefox Extension

Uploading Browser Extensions To S3 Using Transmit

I create a lot of browser extensions and like to upload them to S3. It’s super nice to have each respective browser automatically start the install process on download. To do this, specific headers need to be set on the file and it’s SUPER easy with Transmit.

1) Open Transmit preferences

2) View “Cloud” options

3) Add custom header for crx file extensions (content-type text/plain)

4) Add custom header for xpi file extensions (content-type application/x-xpinstall)

Once these are set, every time a file with one of those extensions gets uploaded the proper headers will be set and your user’s browsers will automatically start the install process.