Apr 23, 2006

MyPage Bookmarklet

MyPage puts you in control of the current page: Remove, isolate, edit page items with keyboard control. On-screen print-preview emulation lets you see how the page will print while editing. (if you dug click2zap, try this out.)

Get it

You must enable Javascript! (right-click, add to favorites or bookmarks)

Features

  • Click to select/deselect elements (can select multiple)
  • Perform actions via keyboard (mouse over [?] in the top right corner)
    R
    Remove selected element(s)
    U
    Undo removal
    I
    Isolate selected elements (removes everything else!)
    P
    Print-Preview (won’t be 100% accurate, but it’s faster than native print-preview on any browser I’ve used, and you can even reverse it in IE, FF & Opera. This is perfect for adjusting pages for print)
    W
    Widen last selected element (a selected table cell becomes a selected table row, etc.)
    B
    Backwards (move selection to the previous element)
    N
    Next (move selection to the next element)
    D
    Deselect all
    C
    Copy the last selected element (duplicate is placed directly after the original)
    E
    Edit HTML (of the last selected element)
    Esc
    Escape/Quit
  • Tested in FF1.0, Safari1.2 & Opera 8.5… and IE6!
  • Inspired by the Aardvark Firefox extension. They now have a bookmarklet version, but I find it too buggy In Opera.
  • uncompressed source available

By request, a step-by-step tutorial…

  1. Note: You must access this page with Javascript enabled.
  2. Under the heading “Get It”, right-click and bookmark/add-to-favorites the link “MyPage”.
  3. Go to any web page.
  4. Click “MyPage” in your bookmarks/favorites.
  5. A red rectangle with a question mark will appear in the top right of the window. You can now select/deselect page elements with your mouse and use key commands to affect them. (In case you forget the key commands, mouse over the red question mark for a guide)
  6. When you’re done, hit [Esc] or reload the page or just go somewhere else.

Posted in Bookmarklets, Web Design | Comment now!

15 Responses to “MyPage Bookmarklet”

  1. vex writes:

    Apr 24, 2006 | 8:46 AM

    OMG, I love you, seriously!

  2. adam writes:

    Apr 25, 2006 | 12:06 PM

    wow, that’s awesome ;) How possible would it be to remove background images/color, and set it to white? I browse some obnoxious websites/blogs, that have decent content, but the colors are horrible on the eyes. would be neat to clear out, or turn the background colors to white, and remove any image/wallpapers/etc from the background.

    And well, soemthing’s still screwy with IE6. It doesn’t work as a bookmarklet, but when I use the link on your page, it does work. lol. Probably some security settings i have set.

  3. Steve writes:

    Apr 25, 2006 | 1:45 PM

    @adam:seems to work fine for me on browsercam (IE6/XPsp2) and @ work (same). Right-click, add to faves. The white-on-black would be easy: edit the HTML of any element and insert a STYLE element with * {background:#fff !important;color:#000 !important}. Did you try just pressing “p” for print-preview?

  4. adam writes:

    Apr 26, 2006 | 1:39 PM

    weird. mind comparing browser settings? of the “Internet Zone”?

    Im guessing that’s where the problem lies.

  5. Steve writes:

    Apr 26, 2006 | 4:28 PM

    Mine only blocks the script at High. Medium works fine. :/

  6. Rob writes:

    May 14, 2006 | 9:47 AM

    Wow, great tool!

  7. Godfrey Daniel writes:

    May 27, 2006 | 9:25 PM

    Nice improvements over click2zap with the exception of the elimination of the enable/disable toggle. I have retained click2zap for instances where that feature is very useful.

  8. axiom writes:

    Jul 13, 2006 | 2:41 PM

    Great :)
    It would be very cool if one could deactivate the original print-stylesheets from a website with this tool.

  9. Steve writes:

    Jul 13, 2006 | 3:00 PM

    @axiom: just use the zap style sheets BM. You could then print as-is or use MyPage to do more edits.

  10. gaby writes:

    Aug 8, 2006 | 1:53 AM

    Amazing;-)
    I like it very much and I’m looking forward to other ideas ….

  11. islamguide.com writes:

    Aug 13, 2006 | 12:56 PM

    Hi!

    This is no doubt a great tool but for some reason i can’t access it from a shortcut in the toolbar but there’s no problem accessing it from the bookmarks panel in opera linux. Any ideas?

    Thanks in advance!

  12. Steve writes:

    Aug 13, 2006 | 6:40 PM

    @islamguide: I have “reuse current tab” checked in Opera’s prefs. This might help. I dragged it to my “Personal bar” and it works fine.

  13. Lohmatij writes:

    Oct 30, 2007 | 8:18 PM

    Is there any way to save a page, optimized with MyPage bookmarklet? I tried to do it in Opera 9.20 (windows), but Opera saved full version instead.

    I’m looking for a way to save only the part of a page I need, and still can’t find any sutable solution. I thought, your program could help :)

  14. Steve writes:

    Oct 30, 2007 | 10:02 PM

    @Lohmatij: When done making changes, hit [Esc] to hide MyPage, then activate Jesse Ruderman’s generated source bookmarklet to get the markup of the current DOM.

    This is a noisy/lossy operation (DOCTYPE will be missing, document.write() content will be there, etc.), but I’ve found it handy for similar purposes.

  15. Lex1 writes:

    Dec 24, 2007 | 8:19 AM

    Other variant, use of http://www.puzzleclub.ru/files/convert2phf.js for Opera 9. It saves page with changes in MHT or PHF.

Leave a Reply

Elements allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>