Written on December 22, 2015

As a small project for my small summer break, I developed a wrapper app for Facebook. It simply encloses the Facebook’s mobile website in a WebView and uses JavaScript Interfaces to obtain data from the pages. I tried quite hard to follow material design and relatively happy with how it turned out.

Developing with the Facebook’s mobile site was not a particularly fun experience. Firstly, the code appears to have been somehow generated and as consequence, the HTML source is a mess. The CSS class names are random and therefore I made the assumption that they would change when the site was revised. Because of this, I could not use any class names for DOM manipulation. Secondly, the internal page navigation sometimes uses preloaded data from the API to populate the new page (even more painfully, sometimes doesn’t). As I wanted to make navigation smooth as possible, I chose to programmically press the navigation buttons (when they exist).

I used pure JavaScript to make changes to the actual site. WebView does not provide a neat way of executing this code, so unfortunately I had to load it inline like a bookmarklet. For example:

webView.loadUrl("javascript:alert('Hello World!')");

Aside from the severe impact on my mental health, this method worked quite well and is currently implemented in the app.

The source is available here on GitHub and the actual app is available on the Google Play Store.