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.
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
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:
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
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!
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!