Your First Chome Extension

Your First Chome Extension

I made my first browser extension recently. Turns out that it is refreshingly easy.

I use Google Chrome. One of my favorite websites is SlickDeals.net, which I must admit to occasionally browsing at work. The problem is that SlickDeals makes its money via referrals. i.e. if I post a link to newegg.com, SlickDeals parses the URL and generates a redirect via a referral URL.

So:

http://www.newegg.com/Product/Product.aspx?Item=N82E16889005129

becomes:

http://slickdeals.net/?sdtid=2702819&sdfpid=47595&sdop=1&sdfid=9&u2=http://www.newegg.com/Product/....

This would be fine, however my work blocks all the intermediate sites the modified link redirects via, so it is necessary to copy the http://www.newegg.com/…. URL, which fortunately is in plaintext, from the modified URL and paste it into a new window.

After doing this 100 times or so I was pretty fed up so I wrote an extension to parse the modified URLs and return them to their original form.

First create a folder for your extension: SlickDeals/
Inside the folder create a file: manifest.json JSON – Javascript Object Notation, is simply a way of storing data in a variable format that javascript can read natively.
The contents of my manifest.json file are as follows:

{
  "name": "Slickdeals Affiliate Stripper",
  "version": "1.0",
  "description": "Removes the affiliate redirects from SlickDeals. This is necessary at my work because the affiliate urls are usually blocked.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "content_scripts": [
    {
    	"matches": ["http://slickdeals.net/*"],
      "js": ["context.js"]
    }
    ]
}

In my case I wanted an extension that would act on the content of a page and so I had to create a “content_scripts” section that specifies what additional javascript to apply to the page after it has loaded, along with what domains to apply the extension to. The icon is a 19×19 png that I created from the SlickDeals logo that also goes in the SlickDeals folder.

Next I created the context.js file that defines that applies the relevant modifications to the SlickDeals domain:

for (var i = 0; i < document.links.length; i++)
{
	var str= document.links[i].href;
	if(str.search("sdtid")!=-1)
	{		
		var spl = str.split("http");
		var newurl = spl[spl.length-1];
		document.links[i].href = "http" + newurl;
	}
}

This was the easiest bit! document.links is an array that contains all the hyperlinks on the page. Fortunately for me, all dynamically generated referral links contain the string "stdid" and so I loop over all hyperlinks searching for the substring "stdid". If it is found I split the string on the substring "http" making the assumption that the last http precedes the original, unmodified link to the deal page.

I prepend "http" to the last element of the string array to restore the original deal and then overwrite the contents of the hyperlink array with the modified URL.

Now your extension is finished. Go to Tools->Extensions. Expand the +Developer and click "Load Unpacked Extension". Navigate to your extension folder and select it and hopefully you will be in business.

That's it! It was quicker to write the extension then this blog post 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *