Member-only story

Build the Medium Text-Highlighter as a Chrome Extension with Web Components

Learn to build a Chrome extension with Web Components

Marius Bongarts
7 min readJul 30, 2021
Photo by Nathan Dumlao on Unsplash

Disclaimer: This article was originally posted on the Web Highlights blog. You can find it here.

I always loved the Medium highlighter, which appears when selecting text in an article. I thought that it would be nice to have such functionality on each website on the internet.

I began to look for a chrome extension that provides a way to save text and bookmarks in a better-organized way. Several extensions function as a text marker, but none of them really acted according to my conceptions. That was when I decided to develop my own Web Highlights Chrome Extension.

What we build

In this article, I want to show you a step-by-step guide on setting up a chrome extension that shows a text highlighter, like the one here on Medium, in the form of a Web Component. We are going to keep things simple by using basic Javascript and CSS.

Here is what we are gonna build:

Our highlighter on: https://developer.mozilla.org/en-US/docs/Web/Web_Components

--

--

Marius Bongarts
Marius Bongarts

Written by Marius Bongarts

Passionate about building exceptional products | Quality > Growth ❤️ Sharing my journey of growing a Chrome Extension to >150K users 💡

Responses (4)