Filtering pages with a Chrome extension

April 15, 2010, 8:00 am

I decided to dip my toe into the sordid world of browser extension development. Being a Google fan boy, I naturally decided to check out the newly minted Chrome extension framework. The illicit rush I received programmatically messing with other people's web content, is everything I imagined it would be.

I am a lurker and occasional contributor on Mahalo, specifically in the history tag of the Q&A section of the site. Some time ago Mahalo set up a relationship with another Q&A site, Conundrum Land, and are pulling their questions into the Mahalo answers stream. I wouldn't really have a problem with this, except that the questions tend to be pretty inane and are consistently miss categorized as history questions:

Are you better able to forgive yourself or to forgive another person?

I have tried to bring this up with the Mahalo team and haven't got much attention. So, armed with the gleaming scalpel of a browser extension framework, I have taken matters into my own hands.

This extension is extremely simple. It creates an icon in the address bar that, when clicked, will hide/show any questions that link to Conundrum Land. The icon is only visible if you are on a Mahalo Answers page.

If you also find the incessant drone of "conundrums" distracting, then you can find my extension in the gallery.

If you are interested, this is the business end of my extension:


function filterLink (question, i, hide)
{
        // called for each question and featured question div in the tree
	var href = question.find(".question-link").attr("href");

        // if this is a Conundrum Land question, then hide or show it (based on the UI toggle)
	if (href && href.length >= 34 && href.substring (0, 33) == "http://www.whatsyourconundrum.com" && hide)
		question.css("display","none");
	else
		question.css("display","");
}

var toggle = true;

function showAll ()
{
	toggle = (toggle ? false : true);
	$(".question").each ( function (i) { filterLink ($(this), i, toggle); } );
	$(".featured-question").each ( function (i) { filterLink ($(this), i, toggle); } );
	
	chrome.extension.sendRequest({}, function(response) { showAll (); });
}

// initially, hide everything
$(".question").each ( function (i) { filterLink ($(this), i, toggle); } );
$(".featured-question").each ( function (i) { filterLink ($(this), i, toggle); } );

// send a message to background.html so we can get a callback when the user clicks the icon
chrome.extension.sendRequest({}, function(response) { showAll (); });

Permalink - Tags: Development

Filtering pages with a Chrome extension

Tags

Archive