I posted something previously on blocking social ads in facebook with greasemonkey, where I came to the conclusion incorrectly it could not be done with css. I apparently remembered what “! important” did in userContent.css and userChrome.css; I read “! important” as “not important,” but it aparently means the opposite, and overrides any webpages css. I corrected my post on userContent.css and userChrome.css customization as well. Stupid logic. Anyway, if you add the following block into your userContent.css file, you should be able to block most annoying stuff on both the new facebook design and old.

@-moz-document url-prefix(http://www.new.facebook.com/) {
.sponsor, .invitefriends, .findfriends, .gifts_received, .pymk, .social_ad, .adcolumn{
display: none ! important;
}
}

@-moz-document url-prefix(http://www.facebook.com/) {
.sponsor, .invitefriends, .findfriends, .gifts_received, .pymk, .social_ad, .adcolumn{
display: none ! important;
}
}

There may be a way to combine these two, but I don’t know the more mozilla-internal css well enough to know. If you use facebook, most of these should be clear. I blocked gifts, as I find them annoying, and I am glad to just not be aware of them. I also blocked the person finding features like “people you may know” (’.pmyk’) or the email search things. I also blocked ads of course. Facebook seems to have to idea that everyone will love ads if they are more specifically targeted at you, based on data they have on file. I can’t stop them from doing that (other than by closing and deleting my account), but I shouldn’t have to see ads if I don’t want to IMHO. Also notice that the new facebook design and the old one use the same css classes for everything; the redesign isn’t that extensive apparently.

Update: see my post “Fixing Facebook with userContent.css” for a corrected and more extensive way to go about this. There are some stupid errors in this post that lead me to use a bad approach, but the greasemonkey script should still work.

I am not a huge fan of ads. I say that somewhat hypocritically as adSense proudly barfs somewhat random ads out on this page, none of which I really expect will ever click on, but that is besides the point ;). Anyway, I can normally block ads with adBlock, but social ads are trickier. Every social ad div has for a class:
feed_item clearfix social_ad
Each one is a seperate class. They do some trick so it is hard to override with a page wide css that doesn’t take out everything, so userContent.css and similar tricks are out. I ended up brute forcing it and writing a greasemonkey that does the job.

Download it here: hidefacebookfeedadsuser.js

Update: There is another class used as well. If I remember correctly, instead of social_ads, its ad_capsule with everything else the same.

A little while ago, I started playing around with the userChrome.css and userContent.css files in Firefox, and I have been rather pleased with the results. As far as I can tell, few people know about these files (perhaps I am mistaken, but most people I know have never seen them before). The files are located in the chrome folder in a given profile. On Linux at least, the path to that is
~/.mozilla/firefox/{weird alphanumerical sequence}.your_profile_name/chrome

On Macs, the profile directory is in
~/Library/Application Support/Firefox/Profiles
I don’t care about windows…
The arrangements of profiles is what I consider to be one of the prime examples of why Firefox isn’t a great piece of software. If I ever want to edit my profile, I have to remember the my profile begins with an r, or at least view all the other profiles, when I tab complete on the folder. For some reason, using unique profile names wasn’t enough for Firefox; it attaches an 8 letter alphanumeric sequence before the name of the profile. I really see no reason for this extra bit of crap. Perhaps it allows for profile name changes more easily, but it is not like people really futz around with different profiles too often. Given that there are things that a user might want to edit in the directory, this crap seems unnecessary. The directory structure inside the .mozilla folder doesn’t make too much sense either, but I won’t go into that now. In general, I use Firefox, because I believe it to be the best browser out of a series of really awful software packages. Maybe I am horribly naive, but the browser doesn’t seem like such an achievement in software to warrant the amount of attention Mozilla gets (or the money). That aside, one can do some nice things with Firefox.

The userChrome.css and userContent.css files allow a user to change the default css for the XUL in browser.xul (I think it applies to all XUL, but I haven’t tested that or bothered to look it up) and the default css used in the browser for sites. These files must go into the chrome/ directory of a user’s profile. There are example files already in there, which just need to renamed to get you started. There is a page on these files on the Mozilla website as well as some additional examples. I haven’t done much to userChrome.css; I got rid of the throbber (thing in the top right corner, which likes to spin) and I set my url bar to have a fixed width font. Those mods are both in the example file. The userContent.css file is a little more fun… As outlined in the example file, you can get rid of annoying tags, like marquee and blink. I added a rule to remove text decoration from links except for hover:

a { text-decoration: none ! important }
a:hover { text-decoration: underline ! important }

The ! important part lets a page’s css override my own (update: whoops, opposite is true; the programmer in me must have remembered it that way since I read “! important” as “not important”). It sometimes tricky to spot out the links, but I appreciate the overall aesthetic it produces. There is also a way to set it to only apply to individual pages. I choose to modify my google search results:

@-moz-document url-prefix(http://www.google.com/) {
.g {
border-bottom: 1px solid grey ! important;
padding-bottom: 1em;
}

}

As of now, I forgot why I made the url prefix just google.com as opposed to google.com/search, but I must have had a reason. Either way, my experience has shown me that the g class is not used elsewhere on google. Anyway, this snippet adds a line between each search result. Here is a screen shot of the end result:

So, here is the problem. I want to be able to get the source for a page after it has been rendered by Firefox (that is, loading javascript manipulations have been made, etc…). In other words, I want to be able to serialize the DOM in Firefox, from the command-line. Essentially, I am trying to write a massive hack. There are few problems that need to be overcome first. For one, Firefox requires some display. Since I only really care about Linux/BSD/Sun systems, I have to go through X11 (speaking of massive hacks…). Basically, I need a dummy X11 session. I don’t care what is displayed, I just want to send it somewhere. VNC, fortunately, provides this interface. It is worth noting at some point that I have not fully written this yet (laziness + hard-ass school = project stagnation), but I have a very good idea of what it will do. Anyways, the display is one small part of the problem; the trick here is getting the DOM out. I had some fun here. Unfortunately, DOM serialization must be done through javascript. Gecko provides a really nice little tool: XMLSerializer. I am not aware of anything like it in another browser, which just further supports my belief that Firefox/anything Gecko-based is simply the lesser of evils (bad design being evil of course). Why Mozilla decided the mix of XUL (an xml format Mozilla came up to design interfaces) and javascript would be sensible things to build a browser around, I don’t know, but it is useful here. The normal browser interface can be found at chrome://browser/content/browser.xul. You can have a lot of fun loading lots of these inside each other (see image). If you load browser.xul with firebug, you can play around with all of Firefox’s standard functions, which is always fun.

If you are creating a tradition extension, I suppose you would want to look at this stuff as well, but it is especially helpful here. Once this set of deep Firefox functions has been revealed, the actual loading of page is rather trivial. The real problem is I/O. I need to be able to pass firefox the link I want to open from the command-line, and write it to a specified location. Fortunately, there is JSLib, which provides things like I/O in javascript. From here, the solution is simple. I just want to make a copy of browser.xul, and add a few scripts into it. I then want to parse GET arguments on this file when loaded, since I can pass these to Firefox from the command-line. I would want one for the url, and one for the output path. Of course, these would have to be escaped before they could actually be passed to Firefox. That’s it! I was planning on calling it FireScraper. Hopefully I can finish it soon.