Member-only story
Build the Medium Text-Highlighter as a Chrome Extension with Web Components
Learn to build a Chrome extension with Web Components
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: