I’ve been visiting 9GAG for more than two years and it is my daily source of fun. I open both the website and the Android application. Posting GIFs are an important part of my experience. Memeful provides the right GIFs and memes to express my feelings when I see a post.
But I am a lazy guy so I wanted something more (If you know what I mean. Eh?). Currently, 9GAG opens memeful.com in a new tab. You click on the image of your choice and the link is copied. You close the tab, paste the copied link in the comment section and click the ‘Post’ button. Also, I should mention at this point that Memeful doesn’t have a search option. But, they do provide a list of keywords like OMG, deal with it, fail etc. to get specific results. Can I do something about this? Is there a way to make this easier? Hmm.
Source: Memeful
Being a developer, I decided to take this matter into my own hands. I was familiar with the basics of Chrome extension development because I built one before to automate LDAP login for my college network. So I decided to build a Chrome extension that allows a user to search GIFs and memes, copy and paste the link in the comment section. It is available on Chrome web store as “Extension for 9GAG — search and copy GIFs”.
Getting Started
Using Google Chrome Developer Tools
The first step is to pull and store image links from the website. I looked at the source code, inspected the page and learned how Javascript fetched when the user scrolls. The page makes GET request and JSON object is returned from the server. The response has two main keys in the object — ‘meta’ and ‘data’. ‘data’ is a list of JSON objects. Following is an example:
...
{
**"id"**:"6248",
**"key"**:"1RXEygd",
**"status"**:"1",
**"type"**:"ANIMATED",
**"imageUrl"**:"http:\\/\\/i.memeful.com\\/media\\/post\\/1RXEygd\_700w\_0.jpg",
**"animatedUrl"**:"http:\\/\\/i.memeful.com\\/media\\/post\\/1RXEygd\_700wa\_0.gif",
**"imageFileSize"**:"918086",
**"createdAt"**:"2016-02-26 06:53:22",
**"imageHeight"**:200,
**"imageWidth"**:200,
**"tags"**:"yes, funny, totalall, oldspice"
}
...
I fetched a list of 5863 objects in just two lines of Python3. It’s simple as that!
import requests, jsonjson.dump(requests.get("http://memeful.com/web/ajax/posts?count=10000").json()['data'], open('js/memeful_data.json', 'w'))
I read the official documentation and watched videos from a Youtube playlist to brush up my knowledge. I created three tabs — Search, Settings, and About page. “Search” is everything you need and “Settings” page is something I need to work upon. Soon I had something to publish on the web store. And that’s it! Now, all you need to do is click on a small icon on the top-right side, type a keyword, click on the image you want and post the link.
Extension Frontend
Once again, you can get it from Google Chrome web store for free! I would like to mention this post which motivated me write this article and Utkarsh for his help. If you wish to play with the code or want to contribute, you can refer to the GitHub repository. If have suggestions for further improvements or any other ideas, you can ping me at [email protected].
Of course, here’s a nertato for y’all!
Source: Google Image Search