How do I get content from websites into my notes?

Share & showcase
1

Getting information from web pages into your notes is often useful, but it’s sometimes hard to find tools for extracting markdown from html. Here are a few I use and enjoy. This list is by no means comprehensive, these are just ones that I find particularly useful for different types of work. Please feel free to add your suggestions below (especially more firefox options, because I haven’t played with those as much).

- markdownload

Our very own @death.au brings us Markdownload. It pops up a small window showing the markdown version of the page, from which text can be selected. Unlike most of the options here, this one downloads the markdown directly as a file, which makes it super easy to get things into your vault without copy and paste.

Chrome and Firefox.

- Roam-highlighter

Named before the author discovered Obsidian, but configurable to work quite nicely with any markdown tool. This one has a lot of unique features, such as being able to define words as wiki links on the clipboard before copying. Super configurable, and loads of formatting options. The author, @smurfman111 , has been very responsive in working with the Obsidian community to make using this extension just as easy for us. You can find his post about it here.

Chrome only.

- Markdownizr :: Chrome Extension

Markdownizer extracts markdown from the selected area of a web page and formats it as markdown on your clipboard. Not really designed for quoting, as it does not by default include a link to the page. But it does have the option to strip out specific html tags, which can be really useful.

Chrome only.

- Introducing: Quotebacks

Quotebacks takes a slightly different approach, as it’s focused around the idea of sharing quotes via open web technologies. It has the option to export a nicely-formatted html embed of the clip. But it will also do markdown, and its formatting gets along nicely with Obsidian. Also it keeps a record of all of the clips you’ve made in local browser storage, so you have an ongoing list in your browswer of things you’ve clipped.

Chrome only.

- Brett Terpstra’s Mardown Service Tools

A whole lot of Mac Services for working with Markdown, but @AutonomyGaps points out that this one specifically grabs based on the URL and is not browser-specific, so should in theory work as a Safari workaround.

Mac Only

-@yatil’s Keyboard Maestro Solution

And @yatil has created a Keyboard Maestro macro using Brett Terpstra’s heckyesmarkdown.com to extract markdown from the current Safari tab.

Mac Only

69 Likes
2

Safari users are sad. :cry:

13 Likes
3

Are there really no safari workarounds?

@ryanjamurphy
Very sad. Same story with the Notion clipper.
I really wish I could switch to Chrome (on both osx and ios), but since I can’t set it to the default browser on ios, I’d loose Continuity, syncing, iCloud Keychain etc.

4

Vivaldi has its own copy to Note system
On PC it offers WYSIWYG markdown editing
Also contains its own clipper

I also use ClipTo

2 Likes
5

And I use JotNot Pro or Office Lens to scan from print. (Android)

6

@cwmdo A workaround - http://heckyesmarkdown.com

You can paste an url and it will convert to md. There is a one-click button in top right to copy everything and you can past into a new note in Obsidian. Not nearly as easy as markdownload in Brave/Chrome but it is easier than clip to evernote and export/convert or clip to devonthink and then clean up formatting…

4 Likes
7

I haven’t set it up yet, but I plan on building a Keyboard Maestro macro for doing this in Safari.

4 Likes
8

I’m interested in your KM macro if you end up making one!

1 Like
9

Brett Terpstra just updated his pack of Markdown Services, and includes a very handy new service that allows you to put a URL in the clipboard, navigate to Obsidian and paste teh Markdown-formated content of the webpage.

* New: “Convert - Clipboard URL to Markdown” — Markdownify the contents of a URL in the clipboard using Marky the Markdownifier

9 Likes
10

Thanks! I’ve added that one to the list.

11

I have created a Keyboard Maestro script that takes the current Safari Tab and uses Bret Terpstra’s heckyesmarkdown.com service to generate a markdown version of the page (in readability mode) and then paste the Markdown Content of the page.

I have a keyboard combination assigned to it. My workflow is to create a new note in Obsidian, hit the keyboard combination, wait a second or so, then copying and pasting the page title into the Obsidian title field. (This could be automated as well, but I ran out of time :smiley:)

The script – and /today and /tom(orrow) helper scripts – is available on GitHub: https://github.com/yatil/obsidian-helpers/releases/tag/0.1

Source: https://github.com/yatil/obsidian-helpers

Hope that helps (It’s my first contribution to this community.)

4 Likes
12

So glad to see this! MarkDownload is awesome!

2 Likes
13

Great job! I’ve added that one to the list as well. Thank you.

14

I’m very happy with this Firefox add-on: Copy Selection as Markdown.

You simply highlight part of a webpage and that part is then copied to your clipboard in markdown. There are plenty of options available:

image
image570×736 13.4 KB

1 Like
15

i find this to be one of the most important things in researching the topics - finding bits and pieces of wisdom on the web and bringing them in my vault.

Images are often a big part of explanations. One thing that is seriously missing in all the extensions mentioned is the ability to highlight images and pull them back to your vault.

some ignore the images, the best we can get right now is

![image title](image link)

and it shows nicely in obsidian, but it is still an external link.

I see it can work (Roam being an example) - am I missing something or there’s just not any way to do it right now?

2 Likes
16

I’ve tested some of the solutions there, but they seem to require too much friction:

  1. click on the button,
  2. copy the text,
  3. create a new file manually,
  4. paste the text.

Some of them do download the actual file, but they place it in ~/Downloads and you have to manually move them over.

I’ve created a one-click solution. Simply click on the button in your browser and view the article straight from Obsidian. The setup is a bit tricky, so I’ve created a separate topic for it:

3 Likes
17

hey everyone! I am one of the developers of Quotebacks… I’ve also experienced some weirdness importing from there into obsidian. I’d be very interested to hear how we can make the workflow with obsidian better - potentially even an integration?

also should mention that quotebacks is now on firefox too

7 Likes
18

Hey, I love quotebacks and I definitely think we should make sure they work well together. This thread isn’t the best place for that, could you send me a PM (or, better, ping me on the discord if you’re there) and tell me what issues you’re running into? Thanks!

19

I’ve just discovered Quotebacks via @mediapathic’s post above, and i love the concept and the execution of it.

So, excited to see @mediapathic exploring with you tight integration into Obsidian, that would be awesome.

That said, two feedback items from my initial playing around with it, one small (maybe fixable in the short term), the other larger (maybe will be pre-empted by the prospective integration):

  1. A slight formatting change to the copied markdown from a captured quoteback: when i paste the copied markdown into obsidian, only the quote itself gets quote-blocked, the source gets left outside the formatted quote, like this:

    Quotebacks is a tool that makes it easy to grab snippets of text from around the web and convert them into embeddable blockquote web components.

    Source: Quotebacks by Tom Critchlow and Toby Shorin

    Maybe that’s by design, but i would def prefer to include the source inside the block, more like this:

    Quotebacks is a tool that makes it easy to grab snippets of text from around the web and convert them into embeddable blockquote web components.

    Source: Quotebacks by Tom Critchlow and Toby Shorin

    …otherwise the source renders ‘apart’ from the quote more strongly than I’d like. But I recognize this may not be standard practice.

  2. For me, the ideal would be to have option to configure Quoteback browser extension so that quotebacks get stored not only to browser local storage, but also as an md file in a configurable folder (e.g., I’d config this to be my Obsidian vault), and leave in the clipboard the wiki-link name of the quoteback note so that I could then just paste into my current working note.

I realize that #2 may require Obsidian to expose some kind of custom url scheme to address insulation of browser from file system. But wanted to share the feedback/desire anyway.

1 Like
21

Roam-highlighter works on Firefox as well. You just have to download the .xpi file and install it. (https://github.com/GitMurf/roam-highlighter/tree/master/Firefox%20temp%20Add-on)