Remote Bookmark : Bookmarklet Architecture
July 25th, 2007
0: What do you mean, “Architecture”?
I went through 3 different methods of using a bookmarklet to get info to my everything else. I’ll go through all three, and the drawbacks I found.
1: Make me a Sandwich - I mean window
I assumed from the beginning that the architecture would be something like this:
- I have a bookmarklet, with JavaScript, as all bookmarklets are.
- On activation, it makes a popup window, and populates it with the info I want (title, URL)
- I hit the submit button on the populated window
- stuff goes in the database
- the pop-up window tells me ‘it worked’, and closes
When I started coding this, however, I realized how much code it would take to build that pop-up window. In addition, if I ever had to change the code behind it, the user would have to update their bookmarklet.
2: Bring her to me
So I came up with a revised process. Instead of making that javascript to all the work, I would have a file on my server with all the junk it wanted (submit.php) - with would make the bookmarklet a lot simpler.
- I have a bookmarklet, with JavaScript, as all bookmarklets are.
- On activation, it would do a window.open() , poping up my submit.php - passing all the info I need via the URL.
- I hit the submit button in submit.php
- stuff goes in the database
- the pop-up window tells me ‘it worked’, and closes
It seemed to work. Pretty well, in fact. Except - my pop-up kept on being a pop-under, which I could not move to the top. And when I was searching with multiple tabs open - which one was I bookmarking?
3: Infiltration
So, I could keep submit.php - but the pop-up window had to go. I decided to go with a Lightbox-style look; it would be modal, it would remain associated with the page when there were multiple tabs - and I would still have all the control I needed.
One problem with this - I would now have to act directly on the page. I could put all the required code in the bookmarklet, but that would require users updated the bookmark when there were changes.
So I’d have JavaScript insert JavaScript.
- I have a bookmarklet, with JavaScript, as all bookmarklets are.
- On activation, it would insert a javascript reference into the current page’s head.
- Realizing it’s head had been messed with, the page would run my script
- My script adds elements to the body: a few divs and an iframe calling submit.php - passing all the info I need via the URL.
- I hit the submit button in submit.php
- stuff goes in the database
- the iframe tells me ‘it worked’, and disappears
There was one issue I noticed immediately - the last step, disappearing after confirmation. The document in an iframe can not close itself, and the parent document can’t tell when if the URL of the iframe has changed, due to security restrictions - just that somthing has loaded inside of it. So a ‘close’ link had to satisfy that requirement.
Other than that, it seemed to work - until major testing started. Then I noticed Framesets, which do not have a body, so they can not be easily overlayed.
THis will mean I need to do some frame traversal - but that’s another post.
4: Conclusion
(arrgh I just deleted my first conclusion)
Next time: actual working code. After I test in IE ^.^;;
Posted in Remote Bookmark |
July 31st, 2007 at 5:38 pm
Hi. I’m looking to do exactly what you’ve detailed here. Where is the bookmarklet? Thanks so much!
August 1st, 2007 at 10:01 am
Hi Dave,
I’ve just posted the bookmarklet code. The lightbox effect is part of the called script.
-Sud.