Chrome Extensions: Capturing and Redirecting TCP URL Requests Before Page Loads

Nishant Arora 25/Mar/2014
Facebook
Twitter
LinkedIn
Reddit

Chrome extensions are beautiful, simple to use and very fast to write. I have been writing chrome extensions to help increase my productivity and they simply do a great job when put to work. I am a avid Instructables reader and believe in DIY problem solving. But there is a deliberate design flaw with their website. Whenever you load an instructable, it loads as paginated, breaking down the flow. However they have a button down there to view all steps.

I would love if chrome could directly load the instructable with All Steps visible. I thought of 2 possible solutions:

Solution 1: Write a content script to be injected in the Instructable DOM. Find the View All Steps button and click it. This will reload the page with all steps in view. This extension is already written https://chrome.google.com/webstore/detail/instructables-all-steps/kfdienlhmljjenacnoefndffppmdmdll and uses the same method.

Solution 2: To load the all steps page, theinstructatbles seem to append ?ALLSTEPS parameter to the URL of any instructable. e.g. http://www.instructables.com/id/Pac-Man-Themed-Fish-Tank/?ALLSTEPS

So, if I could write a background script to capture all TCP requests and redirect the ones going to instructable to have ?ALLSTEPS appended to the urls. e.g. all requests going to http://www.instructables.com/id/Pac-Man-Themed-Fish-Tank/ can be captured and redirected to http://www.instructables.com/id/Pac-Man-Themed-Fish-Tank/?ALLSTEPS

Solution 2 in this case should be more efficient and effective. As it would not load the page twice, and make sure all pages on instructables load with all steps by default.

Coding the extension:

1. Manifest.JSON: We want to make sure to load this extension only for instructables, hence the regex.

{
  "manifest_version": 2,
  "name": "Instructables Default All Steps",
  "description": "Sets all instructables default to View All Steps [[email protected]]",
  "version": "0.1",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "*://www.instructables.com/id/*/"
  ],
  "background": {"scripts": ["background.js"]}
}

2. Background.JS:

/**
 * Background script for Instructables URL sniffing.
 */

/**
 * 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"]
);

I think the comments explain everything. However I have this extension live on the webstore here https://chrome.google.com/webstore/detail/instructables-default-all/oeeoefddkogaamghjjoelcgmellpacid and the source is available here http://code.nishantarora.in/instructables-default-all-steps-chrome-extension feel free to fork it.

Cheers!
Happy Hacking!