Is there a way to write a browser script that will hide everything except selected content?

Joe Videtto April 9, 2012
Pinterest Stumbleupon Whatsapp
Ads by Google

I’ve been trying to help my mom learn to use the internet (she’s 75, and very afraid of technology). In addition I work with special ed kids, who I’m also trying to help learn to use the Internet.

The one HUGE problem all of my customers have is finding the relevant content and distinguishing from the ads and all the other distracting information having nothing to do with topic they’re looking for information on.

I’d like to set up some guided lessons where I can have them experience the excitement of searching on a topic and finding great informational web pages, AND have them independently navigate, with instruction from myself. I have some experience with scripting in several languages, and would like to do the following:

Use script to doctor up some selected web pages so that only selected frames or targeted content is displayed.

My instincts say this is probably pretty hard to do. Can anyone say if this is possible, and if so, the best tools/browsers on which to try this ?

 

  1. Oron Joffe
    April 9, 2012 at 6:35 pm

    Joe,
    First of all, a very laudable cause - more power to your elbow! It would be very difficult for your to write a single script to "massage" different web pages the way you want to, but there's an extension called Readability that does just that. 
    I recommend it to some of my clients, who, like your, find the sheer "noise" on the page distracting and irksome. Give it a try"

  2. Simon Slangen
    April 9, 2012 at 2:02 pm

    You can use DOM JavaScript to edit the page after it's rendered, effectively doctoring away select content of the page. Afterwards, you could use the JavaScript as a userscript, so it would be executed whenever you visit a certain page.

    Use Chrome to get the hang of this. In your browser select View -> Developer -> JavaScript console. Here you can execute some JS and see what it does to the page.

    Some sample code:

    Accessing page elements

    document; // Returns everything currently rendered. The same you would see when looking at the source of a page.

    document.getElementsByTagName("iframe"); // Returns an array of all the iframe elements. You can select the first one by entering e.g. document.getElementsByTagName("iframe")[0];

    document.getElementById("twttrHubFrame"); // If the HTML elements have a field 'id', you can pull the element you need directly.

    Other useful code
    x.hasChildNodes();
    x.firstChild;
    x.children;
    var y = x.children[0];

    x.hasAttributes();
    x.attributes;
    var y = x.attributes[0];

    y.innerHTML;
    y.innerText;

    Changing the webpage
    Whenever you append, add or delete something using JS, its effect on the website will be immediately shown. So if you want to remove a frame, find the relevant code and delete it, or replace it with an empty string.

    Read more about DOM and userscripts.

    Good luck!

  3. Susendeep Dutta
    April 9, 2012 at 4:50 am

    If the sites you visit are very much filled with flash ads and distracts you and your students from browsing then you must use adblock plus addon for your browsers.

    Adblock plus addon for Firefox -

    https://addons.mozilla.org/en-US/firefox/addon/adblock-plus/

    Adblock plus addon for Chrome -

    https://chrome.google.com/webstore/detail/cfhdojbkjhnklbpkdaibdccddilifddb

    Although,you can disable this addon to those sites which are helpful to you and delivers you great content in order to help them raise money for their expenditures -

    http://www.makeuseof.com/tag/ad-blocking-browser-extensions-killing-internet/

    You can use the above mentioned extension to block some annoying parts of the webpage so that whenever you load different topics of the same site,you get only relevant stuffs.It makes use of scripts to do so.