Getting Started With Chrome Extensions

I think chrome extensions are the most practical way to learn how learning to program can solve your problems. While I work with an internet giant as a software development engineer, I think it can be easy for anyone to get started with something as simple as Chrome Extensions. A little background on extensions, these are snippets of code written in javascript to extend the functionality of the browser for some or multiple websites. Simply put you can actually define what action to take when browser loads a particular URL.

The easiest example I can put up here is, while browsing the instructables website, I regularly come across topics that are spread over multiple pages and I either need to click next page every time or the view all steps button to load that particular page with all steps in view. Loading all steps page for every instructable is tedious job because I tend to browse them for hours.

The solution I came up with was writing a chrome extension, which could do this in two ways:

1. Clicking the view all steps button on page load. Some cool developer has already written an extension that would click the "View All Steps" button when found. You can find that here https://chrome.google.com/webstore/detail/instruct...
2. We could read the tcp requests made by the browser and change it as per requirement. This could be faster as it would prevent a page reload

This instructable is with the 2nd approach above.

The instructables are available on the urls with the following format https://www.instructables.com/id/[instructable name identifier]/ and if we click on the view all steps button, the url is changed to https://www.instructables.com/id/https://www.instructables.com/id/[instructable name identifier]/?ALLSTEPS

Which means whenever the argument 'ALLSTEPS' is passed in the url, it redirects to the page containing all the steps for that particular instructable.

As the name suggests, you need to intend a purpose for your extension. For chrome the extensions follow a very simple manifest written in JSON (javascript object notation) format, So in this case the manifest could look something like this:

{
"manifest_version": 2, // chrome manifest version
"name": "Instructables Default All Steps", // Any name here
"description": "Sets all instructables default to View All Steps", // some description
"version": "0.1", // Extension version for our records
"permissions": [
	"webRequest", // we are reading the tcp requests made by the browser
	"webRequestBlocking", // in a blocking manner
	"*://www.instructables.com/id/*/" // urls with this regular expression pattern
],
"background": {
	"scripts": [
		"background.js" // the script that will be handling stuff.
	]
}
}

We referred to a background script in manifest. The background script will keep running in the background of all your page viewing and will only become active when a url matching the pattern in manifest will be loaded. So the background.js could be something like this:

/**
 * Blocking requests to instructables.
 */
chrome.webRequest.onBeforeRequest.addListener(   // Checking if it is not redirecting to all steps.
    function(details) {
        if(details.url.indexOf("ALLSTEPS") == -1) {       // Redirecting it to all steps page.
            return {
                redirectUrl: details.url+"?ALLSTEPS"
            };
        }
    },

    // Applies to following url patterns
    {
        urls: [ "*://www.instructables.com/id/*/"]
    },

    // In request blocking mode
    [ "blocking" ]
);

save these two files in a folder, then

1. Go to chrome://extensions
2. Check the developer mode check box on top right
3. Click "load unpacked extension" and browse for the folder containing the two files
4. Go to any instructables page or refresh the one already loaded.

That's it folks! you're done. The entire source could not be formatted with instructables, you can fork my repository from http://code.nishantarora.in/instructables-default-... also the extension has been made live on the chrome web store here https://chrome.google.com/webstore/detail/instruct...

Please go ahead and make something creative, do share with me and lemme know if you're stuck in a problem I would be more than happy to help.

Happy hacking!