Welcome to download this extension from the Chrome Web Store↗ .

This is a browser extension that can fetch the outline of the current web page.

The initial idea for this extension came from the book How to Read a Book, which mentions using a book’s table of contents and outline to quickly grasp its content.

When browsing online, it’s common to encounter websites without a quick navigation outline. For example, on my blog site, I believe a good blog post should be engaging and narrative, rather than having a clear, structured hierarchy like Wikimedia. So, I removed the table of contents from my blog.

However, there are times when we want to quickly assess whether an article is worth reading further or locate a solution without delving into the details. A browser extension that fetches the outline of any web page would be an excellent solution.

Initially, I designed a floating window for the current page. Users could freely move and resize this window, ensuring that the outline doesn’t obstruct the web content, thus maintaining a good reading experience.

image-20240730153439315

Here’s a screenshot of the first MVP.

image-20240730153720721

image-20240730153641546

The control bar at the top was initially inspired by the MacOS system, featuring a close button. Later, the close button was moved to the badge.

This is a demo of the control bar during the development phase, hosted on CodePen: https://codepen.io/huyixi/pen/OJeVyYE↗ .

Additionally, the extension’s background was optimized. It adapts to the background color of the current web page, ensuring a better visual experience. The approach involves extracting the page’s RGB color, converting it to HSL, and then reducing the lightness (L). The background lightness is decreased by 4%, and the control bar by another 4%, resulting in a more pleasant color scheme.

At this point, the extension was nearly complete and met my needs.

However, while browsing at home over the weekend, I came across a tweet↗ from a user named galala_eth:

835shots_so

The tweet mentioned a tool called Uniswap, which piqued my curiosity. I checked it out and found that the first pinned tweet described their browser extension, which now displays content in a sidebar.

656shots_so

183shots_so

It was the first wallet extension to use this method. It struck me as a great display method, prompting me to scrap the previous code and start over.

SCR-20240730-keqi

This is the current display effect. The screenshot is taken from Peter Norvig↗ ’s famous article Teach Yourself Programming in Ten Years↗ , with some distracting elements removed.

The project is currently under review in the Google Store.

image-20240730152626771

Once the review is approved, a download link for the extension will be provided.

Pitfalls Encountered

Roadmap