Released a Chrome Extension `AtodeYomu` to Make Reading List More Convenient

Introduction

Sometimes you find an article you want to read, but you don’t have time right now. Or it’s too long to finish in one go, so you want to save it and come back later. I used to keep a “Read Later” folder in my bookmarks, but the list kept piling up with both read and unread pages, and managing it became a hassle.

Chrome’s built-in Reading List is useful if you keep the side panel open, but the panel narrows the screen, and accessing the feature without the side panel takes several steps.

To solve this, I created and released a Chrome extension called AtodeYomu that enhances the Reading List. The name comes from my old “Read Later” bookmark folder (“あとで読む” in Japanese).

You can get it from the Chrome Web Store:

AtodeYomu - Extend Reading List - Chrome Web Store

Chrome Extension to extend your Reading List.

chromewebstore.google.com

What It Does

It’s easier to show than to explain, so here’s a short demo video:

With AtodeYomu, you can:

• Quickly add the current page to your Reading List from the right-click context menu.
• See a floating “mark as read” button at the bottom right of pages in your Reading List. Click it to mark the page as read instantly.
• Watch the indicator on the button progress as you scroll. Once you reach the end, the page is automatically marked as read.
• Remove a page from the Reading List just as easily, with a single click on the same button.

Since the problem I wanted to solve was small, the extension itself stays intentionally simple.

Development Notes

Here are a few notes and small takeaways from building AtodeYomu.

As usual, the code is open on GitHub:

GitHub - okaryo/AtodeYomu: Chrome Extension to extend Reading List

Chrome Extension to extend Reading List. Contribute to okaryo/AtodeYomu development by creating an account on GitHub.

github.com

This wasn’t a project with big technical challenges, but I decided to try Svelte for the UI. The floating button in the bottom-right corner is controlled from content_scripts, and I built it with Svelte. I usually use React, but I wanted a change of pace, and given the small size of the extension, I figured the bundle size wouldn’t be an issue.

Initially, I planned to build a popup UI in Svelte as well, to provide extra features like bulk-deleting read pages or toggling the auto-mark-as-read option. But once I finished the current feature set, it felt good enough, and adding a popup felt like YAGNI, so I dropped it.

Another reason I chose Svelte is its simple animation system. The transition for the “mark as read” button animation was trivial to implement with Svelte’s built-in transition.

Finally, a couple of small lessons learned:

• content_scripts don’t support the import syntax, so each must be bundled into a single file. With Vite, you can handle this by setting build.inlineDynamicImports to true. However, that doesn’t work if you have multiple entry points, so you’ll need separate vite.config files for each.
• Avoid using TailwindCSS for styles injected by content_scripts. If the host page is already using Tailwind, it may cause conflicts on both sides. With Svelte, CSS is scoped by default, so this problem doesn’t occur.

Closing

If you ever found Chrome’s Reading List a little inconvenient, give AtodeYomu a try.
And if you run into usability issues or have feedback, feel free to open an issue on GitHub. I’ll take a look when I can.