BlogMarklet

code faq log license

The relevant bookmarklet code is:

javascript:function open_iframe() {var s = getSelection();var html;for(var i=0; i<s.rangeCount; ++i) {var a, r = s.getRangeAt(i);if (!r.collapsed) {var x = document.createElement('div');x.appendChild(r.cloneContents());while ((a = x.getElementsByTagName('script')).length) {a[0].parentNode.removeChild(a[0]);}html = x.innerHTML;}}var d = document;var url = 'http://sequential.org/blogmarklet/iframe.html?' +'&link_title=' +escape(d.title) +'&link_href='+escape(d.location.href) +'&title=' +escape( document.title ) +'&text=' +escape('URL: ' + document.location + '\n' +'Date: ' + new Date((new Date).getTime() -((new Date).getTimezoneOffset() * 60000)).toGMTString() + '\n\n' +html);var body = document.getElementsByTagName( 'BODY' );add( body[0], 'iframe', url );}function add (par,ctag,url){var c=document.createElement(ctag);c.onload=function(){window.open( url )};c.style.display='none';par.insertBefore(c,par.childNodes[0]);};open_iframe();

The code, in a more readable fashion:

function open_iframe() { // This bit of code grabs the actual HTML of what is selected. var s = getSelection(); var html; for(var i=0; i<s.rangeCount; ++i) { var a, r = s.getRangeAt(i); if (!r.collapsed) { var x = document.createElement('div'); x.appendChild(r.cloneContents()); while ((a = x.getElementsByTagName('script')).length) { a[0].parentNode.removeChild(a[0]); } html = x.innerHTML; } } var d = document; //t=d.selection?d.selection.createRange().text:d.getSelection(); // This creates the URL used as the SRC of the iframe. // Note: marvin.paonline.com is the same host as sequential.org. var url = 'http://sequential.org/blogmarklet/iframe.html?' + '&link_title=' + escape(d.title) + '&link_href='+escape(d.location.href) + '&title=' + escape( document.title ) + '&text=' + escape( 'URL: ' + document.location + '\n' + 'Date: ' + new Date( (new Date).getTime() -( (new Date).getTimezoneOffset() * 60000 ) ).toGMTString() + '\n\n' + html ); // Create the iframe var body = document.getElementsByTagName( 'BODY' ); add( body[0], 'iframe', url ); } // This function adds elements to the current document. function add (par,ctag,url){ var c=document.createElement(ctag); c.onload=function(){window.open( url )}; c.style.display='none'; par.insertBefore(c,par.childNodes[0]); }

Q: What is a BlogMarklet?
A: It's a free, customizable, easy to use, bookmarklet that helps make blogging a bit easier for those who like to quote sources when making up facts. I'm not unique. That's so sad.

Q: What does this BlogMarklet do?
A: It allows you to select text in a web page and pass it to the Movable Type blog you are logged into.

Q: That's uninteresting. Why wouldn't I just copy and paste?
A: Please feel free to, but follow these steps:

1. View the page source
2. Search the source for the section you want. (This is easy in Mozilla.)
3. Highlight the source you want.
4. Go to your MT page and click add a new entry.
5. Type in the title.
6. Paste in the copied source. If you have cut or copied since, see step 3.
7. Copy the URL from which you copied.
8. Paste that in.
9. Type in the date.

You know, that way sounds better. Please disregard this two step method.

Q: You didn't take your meds today, did you?
A: And this is how you thank me for the time and effort I have put in?

Q: Are there any more useful questions in this FAQ?
A: *blink*

This is an example of a JavaScript function that will allow you to select some text, click on a bookmarklet and make a quick Movable Type entry.

There are a number of small problems with this:

• You need to already be logged in to your Movable Type.
• There are a number of settings, like URL and blog id, which are too difficult to expect people to remember and type. This information can be stored in a cookie, but when code is executed in a local scope, the cookie can not be read.

I'm still looking for a way around these problems, as this seems like it would be a useful feature for me.

To try this, select some text on this page and click here

TRIUMPH!

XSS isn't always evil, sometimes it's FUN TOO! Well, maybe this is just a tad too evil, but I've overcome the problems with the configuration of this bookmarklet. Now I store cookies, including breaking up of cookies that are larger than 4096 characters, though a maximum of 81920 characters total. If you have a URL or a blog id or a combination of the two that is greater than 81920, you might want to reconsider the direction you are taking your live.

What happens is this bookmarklet triggers an invisible iframe to be opened. The source of this iframe is http://marvin.paonline.com/~photo/blogmarklet/iframe.html. In addition to the URL, I pass along a query string, which includes the date, time, current URL and selected text. iframe.html reads the query string, checks for an MT URL and blog id in the cookies. With all of that information, iframe.html then redirects to your MT blog, with all of your information preloaded. Neat? But how?

Sometimes you have to marry the beast in order to learn it's secrets. I've been Mrs. Beast for a number of years and only now do I feel comfortable sharing his secrets. Muahaha. No, really, I'm serious.

What happens is that pop up blockers, including Mozilla's native blocker, will block window.open and form submits in JavaScript that are not initiated by a user action. Starting with the user click on the bookmarklet, the entire chain of events is user driven. The iframe is created with an onLoad event handler of function () { window.open( url ); }. Pop up blockers consider that window.open user initiated and the rest happens as expected. Voila! Now, you have a configurable bookmarklet, with cookies stored on a friendly site, that are accessible through the wonders of XSS. Happy trails!

Now, if only MT passed through the query string to mt.cgi, life would be good.

Try it in bookmarklet format. Man, that's going to be fun to edit. ;-)

Now passed the HTML of the selected area, not just the plain text. Try out this new improved bookmarklet.

TODO

• IE support
• Passing the bookmarklet doesn't seem to work so swell, must look into.
• Delete/Update bookmarklet cookies

Okay, this page is looking a bit more readable.

Number of visitors who have seen this other than me: 0
Number of cats sound asleep on my shoulder as I type: 1
Number of times this joke format will be funny in the future: 0
Believing any of the numbers above will be greater than 1: priceless

There are some votes politicians can buy. For everyone else, there is ignorance.

Funny, I'm not jaded at all. ;-)

TODO:

• Better code comments in non compressed version.
• Make this into a CGI so I don't have to manually maintain the pretty and compressed formatted JavaScript.

Optimized the iframe loading. Instead of setting the src = to something, I just load the URL through the onload. This results in much faster load times. I'm in the process of moving this to a CGI.

Finished conversion to CGI. Yeah, it's quick and dirty, but it works! For the most part, I can just edit one copy of the JavaScript and the bookmarklet is produced AUTOMAGICALLY! Additionally, every copy of the JavaScript is in a variable based off of this, so there shouldn't be any inconsistancies.

As it turns out, MT has bookmarklets built in. My first impression of the bookmarklets within MT was, "Damn, I just wasted all this time!". With a little break from playing with this, I have come to the conclusion that I have accidentally improved on what they have done. With a generic piece of code (the blogmarklet) anyone can make a bookmark of it and use it for their MT. At this point in time the code doesn't support MT's nice customization features, but MT doesn't allow you to pass in all of the fields.

MT's implementation was made to be portable, but in going for portability, they made it less appealing to me. I don't mind having my whole account opened for me. It's no more difficult to type in my thoughts than their implementation. In fact, it's easier to type things in for me now because a variety of things I typically copy from a quoted source now automated. I don't have to choose a journal, which MT forces you to do even if there is only one journal.

And while I'm thinking of it, I didn't write this to do general blogging. I visit web sites and want to remember or share them with people. Bookmarks, as they are implemented, are about as useful as a stick in the eye. This was meant to be able to store my "bookmarks" in a way I found more suited to my needs. I just happened to use MT as a back end because I didn't want to write the back end myself. :-)

So, I feel a bit better about the whole reinventing the wheel thing. Along the way, I found a method for giving bookmarklets preferences, which is neat. I also found a bug in my greater than 4096 byte cookie solution. When I fix that, I'll make a separate site for it. Generally, I'm happy with the code and find it useful myself. Maybe it's about time I created a journal for use as a bookmarks file and see how the code performs as intended.

TODO

• The date passed through to MT reports GMT, which is wrong considering i adjust it for localtime.
• I personally don't want to pass title through as title. Think of ways to make this configurable.
• Passing through date should be configurable.
• Formating of the URL should be configurable.
• Make a version for http://blogmark.sequential.org if configuration is unlikely.