Make the Metafilter you wanna make!

January 25, 2007 5:53 AM

Mozilla Bug 97284: Allow page to make arbitrary elements user-editable in browser (contentEditable attribute) With a wee pinch of javascript that you paste into your address bar, you can edit this -- or any -- page:
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Make the Metafilter you always wanted by flipping your browser into design mode with document.body.contentEditable='true' or document.designMode='on'.
posted by ph00dz (29 comments total)

Pure wankery: you're only editing a copy of content as it exists in your browser's memory. From the way this is described, it sounds as if you could modify it on the server, for all to see.
posted by reality at 5:58 AM on January 25, 2007

What's wrong with just using View Source, then editing the code in your favourite textpad?
posted by UbuRoivas at 6:05 AM on January 25, 2007

Oh! jactitation
posted by tellurian at 6:13 AM on January 25, 2007

See also Firebug.
posted by jacobm at 6:26 AM on January 25, 2007

* edits tellurian's comment to make him seem less erudite.

(heh heh - tellurian wrote "boobies")
posted by UbuRoivas at 6:27 AM on January 25, 2007

That's not a bug, that's...well, you know.
posted by owenkun at 6:28 AM on January 25, 2007

No, straight up UbuRoivas, this is serious.
posted by tellurian at 6:31 AM on January 25, 2007

Are you okay with the contents of your body being editable?
posted by tellurian at 6:37 AM on January 25, 2007

Posting as: and hosted from Uranus (logout)
comment:

posted by and hosted from Uranus at 6:39 AM on January 25, 2007 [7 favorites]

With a wee pinch of javascript...you can edit this -- or any -- page

Opera 9 offers this out-of-the-box. View->Source, edit, "Apply Changes." </fanboy>
posted by Western Infidels at 6:51 AM on January 25, 2007 [1 favorite]

Can I make AskMe greener and make everyone go crazy?
posted by Terminal Verbosity at 7:11 AM on January 25, 2007 [2 favorites]

AskMe looks green to you?

you know what that means TermVerb don't you?

seek help now!!
posted by Skygazer at 7:30 AM on January 25, 2007

I'm going with "NOT A BUG".
posted by Artw at 7:38 AM on January 25, 2007

This was interesting when I first saw it in NN4 & IE5. Kinda old now.
posted by creeptick at 7:46 AM on January 25, 2007

i'm totally ok with the body of my content being edited.

crap. i've had tattoos and piercings for years.

tellurian: take a break from the internet.
posted by jcterminal at 7:51 AM on January 25, 2007

Heh.


posted by pmbuko at 7:56 AM on January 25, 2007

Oops. I mean, heh (img link).
posted by pmbuko at 7:57 AM on January 25, 2007 [1 favorite]

Oops. I mean, heh (img link).

Handy for mash-ups and spoofs. Nice.
posted by Blazecock Pileon at 8:31 AM on January 25, 2007

Heh.

Heh, indeed. I once made an elaborate "This just in: X misses Y" CNN FP spoof for my then-gf who was away on a long trip. Sappy, but fun.
posted by goodnewsfortheinsane at 8:35 AM on January 25, 2007

but what does jactitation mean?
posted by infini at 8:36 AM on January 25, 2007

My understanding is that every change is a bug in the Mozilla project - problems, enhancements, suggestions, everything. So just because it's in their bug tracking system doesn't mean it's actually a problem.
posted by revgeorge at 8:42 AM on January 25, 2007

Zarro Boogs Found.
posted by sequential at 11:25 AM on January 25, 2007

Hey "and hosted from Uranus", you forgot to include a [Post Comment] button. Go right back and FIX IT!
posted by davy at 11:45 AM on January 25, 2007

I'm editing the content of this page right now, but I'm using a permanent marker.

I go through monitors like water
posted by davejay at 1:28 PM on January 25, 2007 [1 favorite]

i find that this is a good method for prototyping small changes if i'm too lazy to edit and save the original file, or for prototyping small changes in front of an audience of management or clients.
posted by caffeine_monkey at 1:47 PM on January 25, 2007

As mentioned above, similar feature in IE with "contentEditable='true'" attribute on the HTML element of your choice. (Achievable with javascript and some basic DOM).

Only a few blogs and bleeding edgers have dared try to cross-browser this feature. Partly because IE's implementation is mostly undocumented and partly because Mozilla's apparently has some event-firing problems.
posted by abulafa at 10:47 PM on January 25, 2007

Opera 9 offers this out-of-the-box. View->Source, edit, "Apply Changes."

Next you're going to tell me there's a Greasemonkey for Opera. Please? I really miss some of those scripts.

Or, my number one "Things Firefox did that Opera doesn't" wishlist item, saving form data. (Explanation: On a certain site, I type up a comment, hit post, and maybe 5% of the time it fails and tells me to go back and retry. With Firefox when I went back it'd still be there. With Opera, when I go back, the field's empty. 5% is infrequent enough that I get lulled into not copying the text every time, but it's vexing when I lose a long comment, or one I'd got worded just right.)

But I'm definitely going to use that Apply Changes thing when I'm on those news sites with the ads(and empty boxes where ads used to be :D ) everywhere squishing the actual article into 1/4 of the page width. Or when someone's elected to use some nonstandard, eye-bleeding font.
posted by sleeplessunderwater at 12:40 AM on January 27, 2007

See also Platypus.
posted by etoile at 11:40 AM on February 2, 2007

Next you're going to tell me there's a Greasemonkey for Opera.

Veering quite far from my area of expertise, but it is said that Opera's built-in UserJS facility is very similar to Greasemonkey. Opera's smaller user base has produced only a handful of ready-made scripts, but apparently many Greasemonkey scripts work in Opera with little or no modification.

With Opera, when I go back, the field's empty.

Hmm, I dunno. Opera 9.10 saves at least some fields -- this MetaFilter comment box is preserved, for example, when I click "Preview" then "Back."

But I'm definitely going to use that Apply Changes thing when I'm on those news sites with the ads(and empty boxes where ads used to be :D ) everywhere squishing the actual article into 1/4 of the page width. Or when someone's elected to use some nonstandard, eye-bleeding font.

I'm glad to hear this may be useful for you. You may also be interested in Opera's client-side stylesheets which can also be useful for correcting such problems, and which can be turned on and off with just a click or two. You can even specify a local stylesheet to auto-load for all pages in a particular domain.
posted by Western Infidels at 5:16 PM on February 6, 2007