(Archived) Bookmarklet to reformat text for reading and Clipping

[elldove 0]

I've been using Arc90's great bookmarklet for reformatting articles for readability (fittingly named readability > http://lab.arc90.com/2009/03/readability.php) in combination with the web clipper to make evernotes of nicely readable articles from the web. So I combined them into one javascript bookmarklet. Thought I'd share:

javascript:function enClip(){EN_CLIP_HOST='http://www.evernote.com';try{var%20x=document.createElement('SCRIPT');x.type='text/javascript';x.src=EN_CLIP_HOST+'/public/bookmarkClipper.js?'+(new%20Date().getTime()/100000);document.getElementsByTagName('head')[0].appendChild(x);}catch(e){location.href=EN_CLIP_HOST+'/clip.action?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);}}function readR(){readStyle='style-ebook';readSize='size-large';readMargin='margin-medium';_readability_script=document.createElement('SCRIPT');_readability_script.type='text/javascript';_readability_script.src='http://lab.arc90.com/experiments/readability/js/readability.js?x='+(Math.random());document.getElementsByTagName('head')[0].appendChild(_readability_script);_readability_css=document.createElement('LINK');_readability_css.rel='stylesheet';_readability_css.href='http://lab.arc90.com/experiments/readability/css/readability.css';_readability_css.type='text/css';document.getElementsByTagName('head')[0].appendChild(_readability_css);_readability_print_css=document.createElement('LINK');_readability_print_css.rel='stylesheet';_readability_print_css.href='http://lab.arc90.com/experiments/readability/css/readability-print.css';_readability_print_css.media='print';_readability_print_css.type='text/css';document.getElementsByTagName('head')[0].appendChild(_readability_print_css);}readR();function timedCount() { t=setTimeout("enClip()",500); } timedCount();

[venture 1]

Thanks for posting this. Does the local client need to be installed for this to work? I tried it on my work PC, which doesn't have Evernote installed on it, and I got the same output as I did with the bookmarklet from the Firefox plugin.

[elldove 0]

Works on Firefox 3 for mac and windows xp. the mac has a client installed but not xp. Make sure your browser is set to receive cookies and allow javascript.

If you make the script a bookmark, upon clicking it should first reformat whatever page you're on to a clean, text only style. and then the evernote web clip pop up should appear, requesting a sign in if you're not already, and then allowing you to tag, choose notebook, add notes, etc.

Make sure the "clip full page" box is selected.

I've got a notebook for all my webclips, when I hit the bookmarklet now, I'm already signed in and its set to that notebook. All I do is wait a second for it to reformat and pop up, and hit return. now i've got clean text of an article I want to read later.

this was all inspired by instapaper

[venture 1]

I have it working on my home PC now. Very nice! I had never set up a Readability bookmarklet on my work PC, so I don't know if that had anything to do with it or not. Anyway, it works great. Thanks for contributing this.

[elldove 0]

For mac users here's the applescript version, runs fast and doesn't have the login pop up screen:

tell application "Safari"
	activate
	do JavaScript "
		readStyle='style-ebook';readSize='size-large';readMargin='margin-medium';_readability_script=document.createElement('SCRIPT');_readability_script.type='text/javascript';_readability_script.src='http://lab.arc90.com/experiments/readability/js/readability.js?x='+(Math.random());document.getElementsByTagName('head')[0].appendChild(_readability_script);_readability_css=document.createElement('LINK');_readability_css.rel='stylesheet';_readability_css.href='http://lab.arc90.com/experiments/readability/css/readability.css';_readability_css.type='text/css';document.getElementsByTagName('head')[0].appendChild(_readability_css);_readability_print_css=document.createElement('LINK');_readability_print_css.rel='stylesheet';_readability_print_css.href='http://lab.arc90.com/experiments/readability/css/readability-print.css';_readability_print_css.media='print';_readability_print_css.type='text/css';document.getElementsByTagName('head')[0].appendChild(_readability_print_css);
		" in front document
	delay 1
	set theText to the text of front document
	set theName to the name of the front document
	set theURL to the URL of the front document
end tell

tell application "Evernote"
	create note the note with text theText title theName
	synchronize
end tell

[shepherd2112 0]

I have never registered for a forum just to thank a contributor, but this could not go un-thanked....So, thank you for sharing your time and skills with the rest of us.

[Tom M. 1]

I have Readability installed... but don't know what to do with the javascript code shown on this page.. Can you give some install instructions please?

Tom

[Telik 0]

>> I have Readability installed... but don't know what to do with the javascript code shown on this page.. Can you give some install instructions please? <<

Just make a right click on the Readability bookmarklet, choose properties and replace the existing javascript by the one shown on this page.

[mdh98368 0]

I agree with the comments that this is a wonderful piece of work.

I am also wondering about how to use the Mac Applescript version of the bookmarklet. I am using Safari 4.0. I put the normal Readability bookmarklet on my bookmark bar. However, right-clicking the bookmark, as suggested, does not bring up a "properties" option. Furthermore, when I copy the provided Applescript and attempt to paste it into the address for the bookmarklet, it only pastes the final line of the routine, presumably because the bookmark address field can't handle line breaks/paragraphs.

If you could provide further instructions on exactly how to use the Applescript version in Safari 4.0, that would be great.

Thanks,

Michael

[guiltpop 0]

Hi,

I'm with mdh98368 I could really use some extra instructions to get the mac/applescript version working. I'm not quite sure how to turn an apple script into a bookmarklet?

Any help is greatly appreciated!

Thanks!

[tradewinds780 0]

I got the script to work on Mac.

First I opened "Script Editor" in "Hardrive/applications/applescript/script editor"

Then I pasted the script above in the box.

I went to "Safari", opened the page I wanted to read then went back to "script editor" and clicked on "run". It worked so, I saved the script to the desktop with "save as" renamed it " readability evernote" with a space as the first letter, then dragged it into the "Hardrive/applications/applescript/example scripts" folder.

If you run the applescript utility "Hardrive/applications/applescript/applescript utility "and check the "show script" and "Show computer scripts" boxes the menu on top will show a script icon and when you click on that a drop down menu opens and the script will appear at the top above the folders. Select it and it will change the page and save it to evernote.

Select the story you want to read before you run the script.

I hope this helps. I am sure that someone more experienced can explain a better way to do this.

[guiltpop 0]

Thanks @tradewinds780 for explaining how run the script via the menubar.

I am still interested in a way to run the script from within Safari via a bookmarklet so I can use command+1 or command+2 to get it working.

I don't even know if it is possible, but I'm hopeful.

Thanks again.

[elldove 0]

I haven't checked this post in a while. Didn't realize there were questions and issues.

As far as the applescript goes. First I'd recommend checking out this post http://forum.evernote.com/phpbb/viewtopic.php?f=38&t=11535#p46076, where I've posted two Snow Leopard services. One of which lets right click on selected text and send it to Evernote. Go to the post to read more.

To install any applescript: open Applescript Editor.app and paste it in, then save it to YOURHOMEFOLDER/Library/Scripts. You can get a Menu bar item listing your applescripts for easy access. Doing this changed for Snow Leopard.

For OS X prior to Snow: Open Applescript Utility (which is a different app then Applescript Editor. Use spotlight if you can't find them). You should see a preference for showing the applescript menu. For more about pre-Snow access go here: http://tr.im/CBRf

In Snow Leopard, this preference has been integrated into Applescript Editor.app. So open that up and go to Preferences >> General and at the bottom is the setting you're looking for.

@guiltpop: Safari has command-1 - 9 set to activate your toolbar bookmarks. If you set your Evernote clip bookmarklet to the first bookmark in your bookmark toolbar command-1 should activate it.

I've worked on these scripts more since posting the original here. I'll post them as soon as I can. Thanks to tradewinds780 for direct messaging me about all this. I'll check this post more frequently if anyone has more questions.

[elldove 0]

IMPORTANT!: There are TWO scripts posted here. They are very different, and need to be installed very differently. The Javascript bookmarklet is in my first post at the top, any browser on any OS should be able to run this. Just copy the script, make a bookmark in your browser and paste the script into the location of that bookmark. Then, when you want to use it, just hit that bookmark.

The applescript can be run in OS X. It is not installed in your browser, but as a file in on your hard drive. To install, open Script Editor.app, paste it in the applescript, and "Save As..." to YOURHOMEFOLDER/Library/Scripts. See the post just prior to this for more specifics.

Having installed readability, or not, is in no way related to either script. the javascript of Readability is integrated into them and they are completely independent of an "official" readability bookmark. you can have both installed (so that you can just use readability to just reformat the page and not clip it).

[elldove 0]

APPLESCRIPT USERS:

I've reposted an updated version of the script, better instruction, and for Snow Leopard users, an better alternative to the applescript that lets you set up a keyboard shortcut.

I posted it in the Mac section of the forums, here: http://forum.evernote.com/phpbb/viewtopic.php?f=38&t=12640

Any future questions about Readability and Clipping with Applescript to Evernote should be posted there. Reserve comments here to questions about the Javascript bookmarklet.

[cook_a 0]

The Javascript version is an answer to a long voiced prayer....

Thanks for that, this will be a huge time saver for me...

[Tom M. 1]

I've created a new bookmarklet and inserted the javascript as suggested.

However, when I click the bookmarklet it reformats the page (ala readability) but then opens a small box at the top of the page that simply says: "Loading clip" one one line and "Close Clipper".

Sumtin ain't workin right! It neither clips anything to Evernote.. nor allows me to go back to the previous page. All I can do at that point is close the tab

Ideas, suggestions?

I believe I do have javascripts allowed.. so don't think that is the issue.

Tom

[elldove 0]

Well, I'm not exactly sure what the issue. But I rewrote the code a bit to make sure the page has loaded the readability. And given a bit more time before calling the Evernote clipper.

Try this bookmarklet instead. Also, if you're using Internet Explorer I hope it's at least IE8. Preferably Firefox, Safari, or Chrome, because they handle javascript much faster. Let me know if this doesn't work.

javascript:function%20enClip(){EN_CLIP_HOST=%27http://www.evernote.com%27;try{var%20x=document.createElement(%27SCRIPT%27);x.type=%27text/javascript%27;x.src=EN_CLIP_HOST+%27/public/bookmarkClipper.js?%27+(new%20Date().getTime()/100000);document.getElementsByTagName(%27head%27)[0].appendChild(x);}catch(e){location.href=EN_CLIP_HOST+%27/clip.action?url=%27+encodeURIComponent(location.href)+%27&title=%27+encodeURIComponent(document.title);}}function%20readR(){readStyle=%27style-ebook%27;readSize=%27size-large%27;readMargin=%27margin-medium%27;_readability_script=document.createElement(%27SCRIPT%27);_readability_script.type=%27text/javascript%27;_readability_script.src=%27http://lab.arc90.com/experiments/readability/js/readability.js?x=%27+(Math.random());document.getElementsByTagName(%27head%27)[0].appendChild(_readability_script);_readability_css=document.createElement(%27LINK%27);_readability_css.rel=%27stylesheet%27;_readability_css.href=%27http://lab.arc90.com/experiments/readability/css/readability.css%27;_readability_css.type=%27text/css%27;document.getElementsByTagName(%27head%27)[0].appendChild(_readability_css);_readability_print_css=document.createElement(%27LINK%27);_readability_print_css.rel=%27stylesheet%27;_readability_print_css.href=%27http://lab.arc90.com/experiments/readability/css/readability-print.css%27;_readability_print_css.media=%27print%27;_readability_print_css.type=%27text/css%27;document.getElementsByTagName(%27head%27)[0].appendChild(_readability_print_css);}readR();function%20timedCount()%20{if(document.readyState%20==%20%27complete%27){t=setTimeout(%22enClip()%22,600);}}timedCount();

[MichaelRoseAgain 1]

This is brilliant. Thank you for developing this. I too have joined the forum primarily so I can thank you for this excellent little bit of code.

I've also added one more step to the process that makes things *even easier* for me.

Using keywords instead of bookmarklets

I'm a big keyboard fan, if I can do something without leaving my home keys and wasting time going over to the mouse or trackpad then I will, things seem to flow much faster for me when it's all done with keys.

Once your bookmarklet is saved, see discussions above, you can also (in Firefox for sure (and other browsers perhaps)) add a keyword to the bookmark. I use Delicious too so this is how it looks when I bookmark*

Adding a keyword means you can use the following process to clip

1) hit cmd-L - this takes you to the location bar where you type URLs

2) type your keyword - in my case 'readit'

3) there is no step 3

* Note: If you are using Delicious, and have it integrated with Firefox, you will need to bookmark once (cmd-D) then bookmark again to get the keyword option. Again all this can be done without touching the mouse/trackpad.

Hope this is useful to people. You could also invoke the bookmarklet with a keyboard launcher program (Quicksilver for Mac, etc.)

[DyNama 1]

i installed this in February but i must have forgotten to thank the author so thanx! i hadn't heard of Readability http://lab.arc90.com/experiments/readability so thanx for that too!

i couldn't get the 1st one, starting with

javascript:function enClip()

to work but the 2nd one, starting with

javascript:function%20enClip()

works beautifully. i did have to make sure the "Clip full page" button was checkmarked or nothing would be sent to Evernote.

[ManicDee 2]

I'm not sure what my problem is, but I had to change the timeout from 500 to 2000 in order for the Evernote clipping panel to appear after the Readability processing has finished.

Thankyou elldove for the bookmarklet, thankyou MichaelRoseAgain for the shortcut suggestion!

[gabloobuddha 0]

umm I am having problems with both the scripts when multi pages are there , for example the page I am looking to 'clip' is this article

http://www.nytimes.com/2010/11/21/magaz ... ref=health

It has 4 sections , I have tried tens of times , and with both the original and modified script only page 1 is clipped and not all 4 ,even though readibility loads all 4 pages , help ?

[studymind 0]

Bookmarklet is looking pretty good in Firefox 4 now as well... pretty excited about the functionality transferring from 3.6 to 4.0. I have also noticed the bookmarket working pretty well in the mobile phone versions of evernote as well. My cousin has a plethora of refurbished cell phones and has had no issues even with some of the older Nokia and Motorola phones. It is a rarity to find a software across multiple platforms functioning at such a high level.

[Hareton 0]

I find it just awesome that with the combined power of Readability and Evernote , hitting a single bookmarklet converts the page into Readability's eye-pleasing, text-only format, then quickly pops out Evernote to grab everything on the page—which is, of course, only text. It's pretty smooth and painless on most sites, which previously had a few hang-ups with Readability (and, to be fair, its kin as well). I wonder what the future has in store for us, cause I'm sure the evernote web clipping bookmarklet will be further developed.