The first thought I had after building Cleeper was "Dude, this is way too complicated. It should just copy straight to e-mail." Here it is:
iClipper
If you're on an iPhone, or if you have an e-mail client set up for your computer's Web browser, try it now. Click it once, and then click one of the paragraphs on this page.
The Difference Between iClipper and Other Solutions
Unlike other Web-based solutions, iClipper does not send the content you're trying to paste back and forth to a third party site. It lives and works entirely on your device, and nobody can ever see what you're doing or prevent you from doing it.
Installing iClipper
Thanks to alert reader Hardcle and a bit of hacking and writing just now, we have a nothing-but-iPhone install page:
Install Now Without Safari Sync
Go there and do what the page says and you should be up and running without synching bookmarks from Safari. If you have not already made the mistake of syncing your Safari bookmarks, definitely do this; syncing from Safari will bring over a couple of bookmark folders ("Bookmark Bar" and "Bookmarks Menu") that you will not be able to remove later.
If that didn't work, click the Install Through Safari link just below for Plan B:
Install Through Safari
- Bring up Safari on the same machine you sync your iPhone or iPod Touch. If you don't have Safari, go get it now.
- Make sure your Bookmarklets toolbar is showing. If it's not, go to View and select Show Bookmarks Bar.
- Navigate your way back to this page.
- Drag the iClipper bookmarklet to your Bookmarks Bar. It will confirm that you really want to do this, and ask you what you want to call your new bookmarklet.
- Bring up iTunes and plug in your device. Once iTunes recognizes it--oh, and anybody who can tell me how to get Windows to quit bringing up that damn "Camera Connected" dialogue every freaking time I plug it in will be richly rewarded in Heaven--click the device name, and then bring up the Info tab, which is second in line between Summary and Ringtones on mine.
- In Info, scroll down a bit to Web Browser. Click the checkbox next to Sync Bookmarks With, and tell it you want Safari.
- If you've made a change here, your Sync button (lower right corner) will turn into Cancel and Apply buttons. Click Apply. If not, click Sync.
- Wait for your sync to finish; if it starts backing up your device and you don't want to wait, you can safely click the little X to the right of the Backing Up progress bar. You may get a dialogue warning you that your phone didn't back up; this is fine, as long as the sync completes successfully. (Do remember to back up occasionally, however.)
Using iClipper
- Bring up Safari on your iPhone, go to the page you want to copy from, and click the little book-shaped thingie in the bottom bar. Either your History or Bookmarks bar will probably come up; you want Bookmarks, and then Bookmarks Bar.
- Click your iClipper bookmark, and then tap whatever you want to copy.
- If all goes well, your e-mail client will pop up with a message filled in. The subject line will be the title of the page you're on right now; the body will be the text contents of whatever you tapped on the page.
- From here you can send the contents wherever you want, or simply save as a draft. Presto, copy and paste.
Caveats and Gotchas
- Since iClipper looks at a single block-level element--
P, LI, DIV, DD, TD, TEXTAREA, or PRE--it might miss important stuff just outside the box. This is especially true for pages using tables-based layout.
- There's no telling what might happen when this thing encounters non-English character sets.
- At the moment we're not cleaning up after the copy operation, so if you go back to the original page and tap anything else, you'll see it in your e-mail editor as well. For best results, reload the page instead.
How It Works
Pretty simple stuff: we're going through the DOM, adding an event listener to all the block-level elements we care about, and popping up the contents in a mailto: url:
(function(d) {
var t=['P','LI','DD','TD','PRE','DIV','TEXTAREA'];
for(var i=0;i<t.length;i++){
var n=d.getElementsByTagName(t[i]);
for (var j=0; j < n.length; j++){
n[j].addEventListener("click",function(e){
e.stopPropagation();
var v = this.innerHTML;
if (this.tagName === 'TEXTAREA') { v = this.value;}
v = v.replace(/<[^>]*>/g, '').replace(/\s{2,}/g, ' ').replace(/</g, '<');
var f = '\n\nClipped from ' + d.location.href + ' with iClipper, available at http://kentbrewster.com/iclipper';
v = v + f;
d.location='mailto:?subject=' + d.title + '&body=' + encodeURIComponent(v);
},false);
}
}
})(document);
Thank You
- Rick Turoczy at ReadWriteWeb, for early link love, and for noticing that iClipper didn't automatically append a link to the page you were clipping from. This has been fixed.
- Hardcle, for the right direction on installing without Safari.
- Jed "PasteBud" Schmidt, for blazing the trail.
- Jim, in the comments, who came through with instructions for disabling that stoopid Windows pop-up every time I plug in my phone.
- Adrian Cahen, who gently pointed out that the base-64 encoding trick I'm using with Cleeper isn't necessary here. Gosh, that's embarassing. :)
iClipper has miles to go; if you're a developer and are thinking about taking it further, be my guest. (A link back here would be appreciated, of course.) As always, have fun, and please let me know how it goes.