Google +1 Button and Twitter, +1 a Tweet from this Chrome Extension

This weekend I built a simple Chrome Extension which adds the Google +1 button to twitter.com.  The "Tweets +1" extension lets you +1 tweets from directly inside Twitter (well, New Twitter to be specific).  You can now +1 a tweet without ever leaving Twitter, plus see how many other people have +1'd a tweet. Install the Tweets +1 extension and let me know your thoughts.  Of course, it's open source thanks to GitHub.


Tim Bray does a good job explaining what the +1 button is and why we should care.



How it works

This Chrome Extension uses a "content script" which is a fancy way of saying "inject some JavaScript from the extension into an existing web app or web page".

The extension manifest declares which script to embed into the host page, and what pages should use the extension:



The first bit of JavaScript needed to scan through the page and look for tweets inside of the HTML.  Luckily, thanks to querySelectorAll and matchesSelector this was fairly easy.  However, it wasn't as simple as "start extension, scan page, insert new HTML".



Twitter's web app (aka New Twitter) is all up in the DHTML/AJAX/HTML5/FancyShmancy.  All of those tweets come in after the main web app bootstraps.  The extension, therefore, can't just scan the HTML page looking for the right markup, as the page is essentially blank at first!

Therefore, I needed to wait until after Twitter loaded tweets and displayed them on the page.  Luckily, the DOM has a great event for this: DOMNodeInserted.  The extension can listen for those events from the main web page's DOM, as the content script from the extension shares the same DOM as the web page.



The second challenge was to figure out how to inject the actual Google +1 JavaScript code into the main page.  Because JavaScript lacks the concept of import or require, I needed some place to inject the <script> tag itself.  As the extension was a simple content script, with not HTML page of its own, I needed to inject the Google code into Twitter's web app itself.

The third challenge was handling the never ending scrolling of Twitter's home page.  I love the implementation as a user, but it provided a bit of a challenge for this extension.

Normally, the Google +1 code scans the web page, finds the markup, and then replaces it with its own <iframe> which contains the button.  By default, this scan is performed once.  However, because Twitter can add tweets to a page as the user scrolls, those new tweets won't get their +1 buttons.

You'd think you could simply call gapi.plusone.go() after every time I detect new tweets via DOMNodeInsertd.  Unfortunately, a content script can't access the main web page's variables.  Because I injected the Google +1 code into Twitter's web page, the gapi variable isn't visible in the content script.

I hacked around this by injecting JavaScript into the main Twitter web page which could wake up every second to inspect if there are new tweets.  This sucks, and I'm looking at fixing this.



Summary

Check out the code for the Tweets +1 extension, and I highly recommend the Chrome Extensions Samples for real working code.  Of course, install the extension and start +1'ing some tweets!

Popular posts from this blog

Lists and arrays in Dart

(This is Part 3 in a series about Dart. Check out Part 2, Function in Dart .) Warning : We expect the Dart libraries to undergo potentially sweeping changes before Dart goes to alpha. This document is relevant as of 2011-12-22. Intro Dart is a "batteries included" effort to help app developers build modern web apps. An important "battery" is the bundled core Dart libraries, providing common and rich functionality. Dart is building a solution for large, complex web apps, and providing well tested, integrated, and common libraries is key to helping a web app developer be more productive out of the box. The Collection libraries are a crucial set of APIs that Dart developers get for free. Much more than simple arrays and maps, the Collection library includes standard ways to filter, iterate, inspect, compose, and sort your data. This post specifically looks at List<E> , Dart's ordered, indexable collection of objects. Aside: The Dart project is lucky
Read more

Converting Array to List in Scala

Now, this has to have a built-in somewhere in Scala , because it just seems too common. So, how to convert an Array to a List in Scala? Why do I need this? I needed to drop to Java for some functionality, which in this case returns an Array. I wanted to get that Array into a List to practice my functional programming skillz. **Update**: I figured out how to convert Arrays to Lists the Scala way. Turns out it's a piece of cake. val myList = List.fromArray(Array("one", "two", "three")) or val myList = Array("one","two","three").elements.toList The call to elements returns an Iterator , and from there you can convert to a List via toList . Nice. Because my first version wasn't actually tail recursive, what follows is a true tail recursive solution, if I were to implement this by hand. The above, built in mechanism is much better, though. object ArrayUtil { def toList[a](array: Array[a]): List[a] = { d
Read more

Null-aware operators in Dart

Image
Three new language features just landed in the latest dev channel build of the Dart ! Collectively known as null-aware operators , these new features will help you reduce the code required to work with potentially null objects. I'm excited for these new abilities, because typing less is always a good thing. Read on to learn more, and be sure to try these new features on Dart Pad . ?? Use ?? when you want to evaluate and return an expression IFF another expression resolves to null. exp ?? otherExp is similar to ((x) => x == null ? otherExp : x)(exp) ??= Use ??= when you want to assign a value to an object IFF that object is null. Otherwise, return the object. obj ??= value is similar to ((x) => x == null ? obj = value : x)(obj) ?. Use ?. when you want to call a method/getter on an object IFF that object is not null (otherwise, return null). obj?.method() is similar to ((x) => x == null ? null : x.method())(obj) Yo
Read more