My First Chrome Extension - TwitterGram

TwitterGram

I get annoyed frequently at how Instagram decided to deprecate Twitter Cards. This is the reason that when you share an Instagram post on Twitter, all you get is a link but no image in the tweet, and when you are scolling through your feed you have to click through to Instagram to see what people are on about.

There are ways to fix this for your own Instagram posts. Primarily through web automation like IFTTT (more here) or other Apps, but this doesn't solve the issue that I have:

I can't see other people's Instagram posts on my Twitter feed...

So I thought this is a good a chance as any to build my first Chrome Extension. I recently got myself a Chromebook (a lot of fun!) and was eager to see how I could make this operating system work for me, not being able to customize it in my usuall fasion.

The "finished" code can be seen on my github.

Choose your weapons

Seeing as twitter already uses jQuery I thought it would be easiest to just use that for simple DOM querying and manipulating. I was also going to have to make some API requests to Instagram in order to get hold of the image URLs. Luckily I already have a few Instagram Applications and Authentication tokens from previous exploits so I didn't set up a new Application, however if I end up publishing this extension, I may well need to.

Basic Extension Structure

Now a basic Chrome Extension consists of a manifest.json file, which is the configuration file that tells Chrome exactly what the extension does and what files to load when, and a bunch of html, javascript and image files.

There are 2 basic ways of structuring a User Interface: Page Actions and Browser Actions.

Choose a browser action when the extension is relevant to most pages. Choose a page action when the extension's icon should appear or disappear, depending on the page.

Quoted from Google Documentation Overview

You can also use Content Scripts to interact with the actual web page's markup.

So I settled for a content script to scan the feed for instagram posts and add in the images, as well as a page action to show me that instagram images had been found (and just for funsies: scroll through the page to the individual posts).

The content script and the page action would send each other messages (using the Chrome Runtime Messaging service) to update each other and trigger actions, as their operational logic is otherwise completely separate.

For more detail, look at the code, or ask questions in the comments.

Final Result

Fiddle here, tweak there, google, google, google. And the final result looks pretty good, if I do (and I do) say so myself...

Before

Twitter Before Links, nothing but links...

After

Twitter After Pictures everywhere!

Want to give it a try?

Get hold of an authentication token, you will need it to make instagram requests. If you are used to this sort of thing, just create an Instagram Application and get a token yourself, otherwise click here and sign in... (Do you trust me ;$ )

Clone my git repository, put your token in the content_script.js file and load the whole directory into Chrome:

Enable Extension

  1. In Chrome, go to "chrome://extensions/".
  2. Make sure "Developer Mode" is checked in the top right corner.
  3. Click on "Load unpacked extension..." and select the twittergram directory.

Hey presto!

Thanks to @kelanidrums, for the use of his Twitter and Instagram accounts in the making of this Extension.