Day 26 – Modify Other Browser Extensions Behavior

I recently built a simple Kynetx app called Minimal One True Fan that modifies what the One True Fan App does on each web page. The code is fairly simple and consists mostly of JavaScript but it’s interesting enough that I thought it would be good to share it here for learning purposes.

The One True Fan app loads a bar that sits at the bottom of every page I visit.

I love the app and the bar but I wanted to be able to continue to use the app and not have the bar always at the bottom. I built this Kynetx app to modify the bar so after it loads, it turns into a simple checked in/not checked in icon.

I can then click the icon to bring the bar back.

I duplicated the actual icon that indicates whether or not I am currently checked into the page so I could know if I was checked in without bringing the bar back up. There is more I could have done but I wanted to keep it simple and quick.

ruleset a60x521 {
  meta {
    name "Minimal One True Fan"
    description <<
      Minimal One True Fan minimizes the One True Fan on
      a pageload and places the checked in status button
      in the bottom left corner of the browser window.
      To bring the One True Fan bar back, just click on
      the status button and everything will be returned
      to normal.
    >>
    author "Mike Grace"
    logging off
  }

  dispatch {
    domain ".*"
  }

  // uncompressed JavaScript http://pastie.org/private/p9oomitergey2ulvm84iqq
  rule optimize_space {
    select when pageview ".*"
    {
      emit <|

        function lookForOneTrueFan() {

          // grab reference to OTF bar
          var $bar = $K("#otf-main");

          // if the bar is found
          if ($bar.length == 1) {

            // hide One True Fan bar
            $bar.animate({height: 0}, 600, function() {

              // get checked in status as button
              $bar.find("#otf-you-checkin-btn-div")
                .clone()
                .hide()
                .attr("id","bring-back-the-otf")
                .css({
                  bottom: 0,
                  left: 0,
                  position: "fixed",
                  padding: 1,
                  opacity: .7
                })
                .appendTo(document.body)
                .fadeIn("slow")
                .click(function() {
                  $bar.animate({height: 36})
                  $K("#bring-back-the-otf").fadeOut("fast", function() {
                    $K(this).remove();
                  });
                });

            });

          // if the bar isn't found try again in a second
          } else {
            setTimeout(function() {
              lookForOneTrueFan();
            }, 1000);
          };

        } // end of looking function

        // start working! : D
        lookForOneTrueFan();

      |>;
    }
  }
}
  • 16-18 because the app is deployed as a browser extension, the browser needs to know what domains to fire on
  • 17 fire on every domain to match the One True Fan app
  • 24-72 emit JavaScript to handle the behavior¬†modification¬†of the One True Fan app

See the app in action on example.com run as a Chrome extension

Get the extensions to try it out yourself! (download links in blog post)

Gratuitous day 26 Grace face

About these ads
This entry was posted in Kynetx. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s