« New Tim Pratt novel free online: The Nex | Main | Coming Out Day »

Letting the reader redesign the web page?


Woke up this morning with an idea for a browser extension: it would let the reader of a web page close/remove/hide unwanted sections of the page, drag and drop sections to appear in other parts of the page, change the fonts and colors and sizes in a section, and otherwise redesign the page. And save those changes, so that the next time they came to the page, they would see their redesigned version.

Why would anyone want this? I'm not sure anyone would. But I can imagine a variety of use cases, such as:

  • Blocking ads.
  • Putting the most interesting/important part of a page near the top, or visually highlighting it (perhaps by putting a red box around it).
  • Removing (or temporarily hiding) the least interesting/important parts of a page (such as the sidebars or a too-big page-header graphic).
  • Using a more pleasing or readable font and size and colors (for a specific section and/or for the whole page).
  • Removing the social-media links ("Like this on Facebook by clicking here!") from a page.
  • Making links in an article stand out more, on a page where the link color is too similar to the text color for color-blind people to easily tell the difference.

How would it work? The basic idea of what I have in mind is that it would analyze the structure of the HTML (divs, mostly) and save that, then provide a GUI to let the reader change the structure (like a little x-in-circle Close icon or an expand/collapse arrow icon at a top corner of a section, and drag-and-drop capabilities, and a font/color picker, and so on). It would probably use a local CSS stylesheet to control the look, and then save all the changes. Next time the reader visited that page, it would do the analysis again and try to map the new page to the reader-modified one. (But if there were significant structural changes between visits, it might not be able to preserve the reader's changes.)

Lots of pieces of this already exist. Ad blockers; Better Facebook; local stylesheets; browser preferences and controls (like resizing controls); Greasemonkey; the Google News personalization controls; that extension that lets you view only the main column of a page (can't find the name offhand); probably plenty of others I don't know about. But I don't think I've seen an extension that puts all these pieces together and provides a nice GUI.

I'm not gonna try to write it—don't know if I could do it well, and I've got too much else on my plate, and although I imagine I would use it, it's not something I really need. But if anyone else wants to implement something like this (or any subset or superset of these ideas), go for it; I claim no ownership of this idea. (As long as you don't try to patent it.)

And if you know of an existing extension that does most or all of this, let me know.


This would be a lovely feature. As would the ability to print what you see on screen, and save what you see on screen to a pdf file.

I'm not sure on implementing this automatically, but the Asteroids-homage "Kick Ass" bookmarklet makes it pretty easy to delete individual elements from the Document Object Model of a loaded web page: http://erkie.github.com/

This would be kind of awesome for use in a classroom setting — I always end up copy-pasting things into Word and rearranging, but this way I could eliminate the extraneous stuff much more easily if I just want to show the kids part of something.

Have you seen the Chrome extension stylebot? http://stylebot.me/ It does a bunch of these things...

I would you it when browsing. I often come across pages with bits that bother me for various reasons. It would also be nice to have a feature that automatically centers a video or main picture that is loading. I get annoyed when paging through an album if I have to also scroll on each page to see the whole picture. Not sure how it would detect what was the main element to be displayed, though.

Oops. That last comment was mine.

Post a comment