Saturday, 7 January 2012

Disabling Facebook Social Comments

(or how to make your own Firefox plug-in)

Recently Facebook has added the ability to comment on other sites such as ehow.com using your Facebook profile. Something about this disturbs me and, as noted on ThoughtPick, there's not a whole lot you can do about it. One solution is to install AdBlock Plus, however this means you are installing a full-featured ad blocking plug-in to address just one feature of the web. Facebook Disconnect is another alternative but it blocks everything Facebook (including the "Share" buttons). This is fine if this is what you want, but I just wanted to get rid of the comments.

Unsatisfied with these solutions, it struck me that this should be a fairly straightforward plug-in to make. I've always been curious about plug-ins, so I set about making one. It wasn't easy, but if follow the following instructions you should have something up and running much quicker than me.

The plug-in

If you really aren't interested in the code and you just want the plug-in, you can download it here. I hope to post an official version on addons.mozilla.org sometime soon. To install it, you need to drag the "nofbcomment.xpi" file on to Firefox. That file is also the full source code, simply rename it from "nofbcomment.xpi" to "nofbcomment.zip" and extract. All of the code is in the public domain - so feel free to reuse it for your own projects.

A brief acknowledgement

When developing a Firefox plug-in, it is a good idea to take a look at similar plug-ins first. Most are open-source and can provide inspiration for your own work. I owe a debt of gratitude to CNN IQ Raiser, which served as a good starting point for my own plug-in.

Getting started

The first thing to do is to set-up Firefox as a suitable development environment. To do this follow this post up until the "Pointing to an extension" section.

Once you have done that, create a file called "nofbcomment@blogspot.com" in Firefox's extensions folder. In that file, type the path of a conveniently located folder in which you intend to develop the extension. In my case, the text file consisted of one line, "~/extensions/nofbcomment".

With this done, the next step is to start writing code. The target file structure for our plug-in is shown as Listing 1. The code resides in the "content" directory with the top-level files more targeted to describing the plug-in's function.


chrome.manifest
install.rdf
chrome
|-- content
    |-- nofbcomment.js
    |-- nofbcomment.xul

Listing 1: Target file structure of the plug-in

The metadata files

At the top level of the file structure are two files "chrome.manifest" and "install.rdf". The next two sub-sections take you through the content of these files. If you are not interested in explanations, simply create the two files with the content shown in Listing 2 and Listing 3.

chrome.manifest

The "chrome.manifest" consists of two lines, the first points to the directory containing our code and the second registers our plug-in as an XUL overlay (something that makes a change to browser functionality) as opposed to a skin (something that just changes the browser's appearance). If you are interested Manifest files are described in more detail on this page.


content     nofbcomment    chrome/content/
overlay chrome://browser/content/browser.xul chrome://nofbcomment/content/nofbcomment.xul

Listing 2: chrome.manifest content

install.rdf

The "install.rdf" is a little more complicated but is essentially just a collection of metadata (information on the plug-in). The two most confusing tags in that file are probably the <em:id> tag. This surrounds a unique identifier for the Firefox application, indicating that this is a Firefox plug-in (as opposed to another XUL application such as Thurnderbird). Also the <em:type> tag, the "2" enclosed by these tags indicate the plug-in is an extension as opposed to say a theme. More details on this file can be found on this page. Probably the most important tag is the <em:maxversion> tag. This specifies the maximum version of Firefox that your plug-in will work with. Ideally it should be the latest iteration of Firefox you tested your plug-in on (e.g. if you tested your plug-in on Firefox 9.0.4, you'd make the tag's content "9.0.*"). In practice this may drive you crazy with Firefox's accelerated release cycle. So, for simple plug-in like this, I've made the <em:maxversion> "15.0.*" &emdash; time will tell if this was the right decision.


<?xml version="1.0"?>  

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">  

<Description about="urn:mozilla:install-manifest">  
 
 <!-- Basic information -->
 <em:id>nofbcomment@blogspot.com</em:id>  
 <em:version>0.1</em:version>  
 <em:type>2</em:type>  

 <!-- Target application. -->   
 <em:targetApplication>
 
 <Description>  
  <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>  
  <em:minVersion>1.5</em:minVersion>  
  <em:maxVersion>15.0.*</em:maxVersion>  
 </Description>  
 
 </em:targetApplication>  
 
 <!-- Information about the plug-in. -->  
 <em:name>Facebook Comments Disable</em:name>  
 <em:description>Disables Facebook comments on sites other than Facebook.</em:description>  
 <em:creator>Mark Pazolli</em:creator>  
 <em:homepageURL>http://sunshinenpaper.blogspot.com/</em:homepageURL>  

</Description>
  
</RDF>

Listing 3: install.rdf content

The source files

Under the "chrome" directory are the two files that give our plug-in its functionality. Before going any further, I should note that chrome is Firefox's UI (as this page puts it the stuff around the browser's content area). It has nothing to do with that other "Chrome" Google seems obsessed by.

nofbcomment.xul

The "nofbcomment.xul" is the heart muscle of the plug-in. It is actually possible to program the entire plug-in from this one file. The source is only separated into two files, to assist with later editing and development. For this plug-in the file is simply the four lines presented in Listing 4.


<?xml version="1.0"?> 
<overlay id="nofbcomment" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
  <script src="nofbcomment.js"/>
</overlay> 

Listing 4: install.rdf content

The first line is the XML declaration, all XML documents should start with this.