How I Use Web Highlights to Highlight Text & Take Notes on the Internet

Three years ago I started developing the Web Highlights Chrome Extension. Back then I consumed many articles on the web but couldn’t structure them. I often struggled to re-find the information when I needed it.

I was looking for chrome extensions that enable me to highlight text on websites and access the highlights from anywhere. There are some, but none according to my needs. That’s why I built Web Highlights.

Today, I use Web Highlights every day, and I can’t imagine my working day without the knowledge management tool. In this article, I want to show you how to get started and how to work most efficiently with the tool.

Setup

First of all, you need to install the Chrome extension. Currently, the extension is only available for Chrome browsers. You can find the Web Highlights extension in the Chrome Web Store.

Simply click the “Add to Chrome” button in the top-right corner, and you will be redirected to an introductory tutorial that will guide you through the setup process.

First, you might want to pin the extension symbol by clicking the “Extensions” symbol in the top-right corner of your browser and clicking the “Pin” icon to have it always reachable when using it.

At the beginning of the introductory tutorial, you are asked to sign up for Web Highlights. Creating a Web Highlights account allows you to view your created highlights from anywhere.

You can either sign-up using your email address or by clicking “Sign in with Google.”

Web Highlights places a significant high priority on Data Privacy and declares that your data is:

• Not being sold to third parties outside of the approved use cases
• Not being used or transferred for purposes that are unrelated to the item’s core functionality
• Not being used or transferred to determine creditworthiness or for lending purposes

You can find more information about data privacy in Web Highlights’ privacy policy or in the Chrome Web store.

Start Highlighting

Once the setup is done, you can start highlighting text on any website or PDF. You can visit any website and highlight text and the marker icon will appear.

Suppose, like me, you want to write an article about a topic. One of my last articles was about Web Components. For this purpose, I search for sources on the Internet and mark text passages from articles. This can be done easily by selecting the desired text and clicking the highlight icon of Web Highlights. You can either click the icon to highlight your default color or by choosing from one of the last three most recent colors you used.

If you don’t like the popup or find it annoying, you can disable it at any time in the settings window by clicking the Web Highlights icon in the upper right corner of your browser and setting “Show marker” to “No”.

But don’t worry. Even if you have disabled the highlight popup, you can still create highlights by highlighting text and right-clicking it. Then you will see the Web Highlights icon in the dropdown, and you can click Save ‘YOUR_SELECTED_TEXT’:

Create Tags & Make Notes

After a highlight has been made, a popup appears where you can assign tags as well as make notes. In my use case, for example, I chose the tag “medium-ssr” to easily find my highlights and notes later in the web app. We can also see and edit our highlights in the left sidebar.

Find your Highlights in the Web App

After you have made some marks on different pages, you can log in to web-highlights.com with your credentials and find them at any time from anywhere.

Here is what the dashboard looks like. You can see that I made quite some highlights already:

Tags Filter

Now let’s look for our “medium-ssr” tag that we created earlier. When we click the tag in the left sidebar, our feed will be refreshed and filtered. Now, we can see all pages where we made highlights with this tag. This makes it really easy for us to find the information again.

You can see that there are two pages with the corresponding “medium-ssr” tag.

Page Filter

In addition, we can also filter for specific pages. For example, I can select “medium.com” on the left side, and all the pages on which I have made marks will be displayed:

Search Filter

Using the search bar, we can even filter for specific terms in our highlights. For example, here are all pages with highlights that contain the term “habit” AND are made on medium.com:

Storing Bookmarks

Web Highlights can not only be used for highlighting text. It can also be very practical to save pages as bookmarks so that you can either continue highlighting later on or just find the corresponding page again.

What I often do is whenever I find an interesting article I save it as a bookmark and add e.g., a “ToRead” tag to it. Afterward, I can go back to the web app anytime and filter for all pages with this tag. Here is my To-Read reading list collection:

There are two ways to create bookmarks in Web Highlights without highlighting any text:

1. Click the bookmark icon in the left sidebar

2. Right-click on any page and choose “Save page as bookmark”

Exporting Highlights

After you have made some marks for your research, you may want to export them to other tools such as Notion or Oblivion. For this purpose, Web Highlights offers a “Copy to Markdown” functionality. This feature allows you to synchronize your notes with your favorite research tools easily.

Just go to the Web App and click on “Copy Markdown” of a marked page to copy all markups of the page including the metadata.

Once you copied your markdown, you can just paste it to, e.g., Notion and it will look like this:

Web Highlights transfers all information about the page including the image, title, tags, highlights, and notes.

Final Thoughts

Web Highlights will help you to structure your research more efficiently. By highlighting text and providing tags, you can easily re-find every piece of information you find online. By taking notes, you ensure that your thoughts are kept, and the exporting functionality ensures that your work is synchronized with your favorite tools.