Jump to content

A faster (instant!) alternative to the webclipper for Evernote


Recommended Posts

I frequently use the Evernote webclipper on my Mac but wanted something which:

A. Would work instantly i.e. eliminate the wait for the webclipper to capture, upload and sync the page

B. Could be triggered faster with less interaction / fewer mouse clicks than the webclipper

So I’ve strung together an alternative solution which instantly clips the full contents of the current browser tab as a long single-page PDF and automatically saves it to the relevant Evernote notebook in the background. There’s no need to wait for clipping or syncing: the browser tab can be closed immediately.

I want to explain my solution here, and throw it open to improvements from the community: I’m sure it could be improved!

There are really two parts to this solution

1. The ‘trigger’ i.e. how the workflow is activated

My approach could be entirely customised or replaced in order to broaden compatibility to Macs without touchbars. There’s probably a way of creating an equivalent trigger for Windows too - if the Windows users on this forum have got suggestions?

My approach requires BetterTouchTool (for the Touchbar integration) and Alfred, but could be implemented as a keyboard shortcut or Alfred command, without using BetterTouchTool

2. The automated page capture and upload to Evernote

This users Zapier (at least a Starter account), PhantomJSCloud (free for up to 500 pages per day) and a Dropbox account.

How the trigger works

1. User taps ‘Evernote elephant’ button on the touchbar

1044812427_TouchBarShot2019-04-03at16_52_25.460b4ee3b1c34f909b765de97ab9cbed.thumb.png.a47e2ad69a9ff570e72acc2a539ae35e.png

2. User selects destination notebook on the touchbar ("Web Clips") in this example

1426990029_TouchBarShot2019-04-03at16_52_29.thumb.png.8f9d0cf08a9eb18a4d9fcf9b50b9072b.png

3. BetterTouchTool runs the following AppleScript

tell application "Safari"
	set _pageURL to the URL of front document as string
	set _noteTitle to the name of front document as string
	set _pageTitle to the name of front document as string
end tell

tell application "Alfred 3"
	run trigger "webclips" in workflow "com.zapier.alfredbasic" with argument _pageURL
	tell application "System Events" to key code 36
end tell

 

4. The AppleScript activates an Alfred Workflow which triggers a Zapier web hook (instructions here on how to set up Alfred with Zapier webhooks

 2097514255_Screenshot2019-04-03at16_02_07.4e6ceb5a76194131a43c66068781eb35.thumb.png.9f8125d5025549159ffc52375ad98943.png

How the page capture and upload works

1. The trigger has now activated the Zapier webhook. Your zap should look something like this its fully set up

  • 1256683592_Screenshot2019-04-03at16_13_56.85a5865d06664be6a64aa434a718bbe2.thumb.png.16f264f89e3b996af770a9b863689733.png

2. In the Zapier zap, the webhook trigger should be configured as “Catch Hook”, with “Silent Mode” left unticked, and the “Pick off a child key” field left empty

 

3. The second stage of the Zap is a “Custom Request” for “Webhooks by Zapier”. This will use PhantomJS to capture the page as a PDF. The custom request template should be as follows:

Method: POST

URL: https://PhantomJsCloud.com/api/browser/v2/Your_PhantomJS_API_Key_Here/

Data Pass Through: No

Data: 

{"url":"ZAPIER_STEP1_QUERY_STRING_NOTE","renderType":"pdf","renderSettings":{"pdfOptions":{"format":"onepage"}},"outputAsJson":false}

Unflatten: yes

Basic Auth: leave empty

Headers: Leave empty

 

  • 157995396_Screenshot2019-04-03at16_26_19.9b22b6c7f4794f3cb4383f4649b09998.thumb.png.c6387a5792dff4747f47e854d03e02d6.png

 

4.  The third stage of the zap is to upload the resulting PDF to dropbox. The Zapier template should be:

Folder: [your_choice_of_dropbox_folder]

File: Select “Step 2, Exists but not shown’ from the dropdown

Overwrite: yes

Specify File Name: Select ‘Step 1 Querystring Keywords”

Specify File Extension: .pdf

 

  • 293062919_Screenshot2019-04-03at16_29_49.b20a7084084f4a5e8f17b1acf7eb9376.thumb.png.191cf540ab72b9c3ea954940ee92fa30.png

 

5. The final stage is to create a new Evernote note and upload the PDF from Dropbox to Evernote. The Evernote action is ‘Create Note’. The template is:

Notebook: select the relevant notebook from the dropdown

Title: select `Step 1, Catch Hook, Querystring Note` from the dropdown

Content: `Step 1, Catch Hook, Querystring Note`

Tags: whatever you want

Reminder time: leave blank

Reminder Done time: leave blank

Attachment: select: Step 3 > Upload File > Direct Media Link

1720801005_Screenshot2019-04-03at16_45_07.thumb.png.92409ec7c64343fe8306f5b19de9e7a7.png

 

Limitations of this solution

1. This solution won’t work with any pages which require a login

2. It requires a separate Alfred workflow and separate Zapier zap for each destination notebook which you want to make available to the TouchBar trigger

Obvious room for improvement

1. The current trigger mechanism is pretty inelegant in the way it uses Alfred as a ‘middleman’ to trigger the web hook. I’d prefer to trigger the web hook directly from BetterTouchTool - but couldn’t figure out how to do it.

2. Capture the name of the page, and use that to name the Evernote note and the PDF. 

  • Like 2
Link to comment
  • Level 5*
23 minutes ago, Robin2 said:

So I’ve strung together an alternative solution which instantly clips the full contents of the current browser tab as a long single-page PDF and automatically saves it to the relevant Evernote notebook in the background. There’s no need to wait for clipping or syncing: the browser tab can be closed immediately.

Thanks for sharing.  That is really a great solution thinking out-of-the-box!

Link to comment
  • Level 5*
5 hours ago, Robin2 said:

BetterTouchTool runs the following AppleScript ...

I'm an Applescript fan, and would be looking at a single script for the complete process.

Could Safari's Export-as-PDF be used to create the pdf?

Link to comment
17 minutes ago, DTLow said:

I'm an Applescript fan, and would be looking at a single script tor the complete process.

Could Safari's Export as PDF be used to create the pdf?

I experimented scripting Safari's Export as PDF, but found that Safari applied a different stylesheet, often lost much of the content and broke URLs into multi-page PDFs.

I also tried scripting it with the app Paparazzi but ran into related problems, and found that I couldn't get it all to work reliably. Additionally, Applescripting the creation of the new note (rather than using Zapier) would pop Evernote into the foreground each time, rather than completing it in the background.

I would like to get it all done via a single AppleScript because the solution I posted above involves chaining together so many different tools and apps. However, I've been unable to figure out how to do it all with AppleScript. I'm hoping more experienced AppleScript hands might be able to suggest a better approach?

Link to comment
  • Level 5*
2 hours ago, Robin2 said:

I experimented scripting Safari's Export as PDF, but found that Safari applied a different stylesheet, often lost much of the content and broke URLs into multi-page PDFs.

I've noticed replication problems with pdfs and Evernote's web clipper.

For an accurate replication, I'm switching to screenshots and Safari>Save as Web Archive.

The webarchive format differs from a standalone HTMLfile because it also saves linked files such as images, CSS, and JavaScript.

 

Link to comment
13 hours ago, DTLow said:

I've noticed replication problems with pdfs and Evernote's web clipper.

 For an accurate replication, I'm switching to screenshots and Safari>Save as Web Archive.

The webarchive format differs from a standalone HTMLfile because it also saves linked files such as images, CSS, and JavaScript.

 

Yes - I noticed those problems too. However, the PhantomJSCloud PDFs are actually pretty good, and retain most or all the the graphics and formatting from the original page (unlike Safari's PDF exports)

I'm not keen on using screenshots, as all the links are lost.

Re: web archive. Have you scripted it so that it can be completely automated?

Link to comment
  • Level 5*
6 hours ago, Robin2 said:

Re: web archive. Have you scripted it so that it can be completely automated?

I haven't written a script yet.  Here's a mockup of the code I use for other purposes

tell application "Safari"
                                            Save the web archive to the default folder
    
tell application "System Events" to keystroke "s" using {command down}
    
delay 3
    
tell application "System Events" to keystroke return
    ....

end tell


tell application "Evernote"
    activate
                                            Create Note
    set
theNewNote to create note 
    
set the title of theNewNote to ...
     
set source URL of theNewNote to ...
    ...

                                             Add archive as attachment
    tell
application "Finder" to set the_files to name of files of folder POSIX file ("/Users/.../Evernote_Temp")   
          
repeat with the_file in the_files
              set the_file to "/Users/.../Evernote_Temp/" & the_file
              
append theNewNote attachment the_file
         end repeat
    
end tell

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...