DEV Community

Cover image for ๐Ÿ‘พ Nested Bookmarks Organizer for Chrome w/Custom Ticker
Anna Villarreal
Anna Villarreal Subscriber Community Curator

Posted on

๐Ÿ‘พ Nested Bookmarks Organizer for Chrome w/Custom Ticker

โœจ Finally, some positive excitement! โœจ

I went on a tiny mission last night to build something I wanted for myself. I was inspired by seeing a space theme on someone's browser in a tutorial and thinking, "I am a developer, I want a cool browser!"


๐Ÿ”Ž What I Found

It just so happens that space is generally my favorite theme. Feeling inspired, I found a cool theme in the chrome store. I generally avoid extensions but was feeling strongly about this one.

Between Google chromes sidebar/group coloring and the space background, I was starting to feel more at home. But that was just the beginning.


๐Ÿ‘ทโ€โ™€๏ธ What I Did

Then I remembered my chaotic array of bookmarks. I really wanted to manage them better, with nested folders and groups, as is the tried and true method in general. There were a few options available on the chrome webstore, but nothing that was truly motivating.

I wanted to hold onto a space/cyberpunk theme so I would love it. Using Claude Opus 5.5 I was able to get the extension loaded and bookmarks organized quickly. I was shocked at the sheer speed I was able to pull this off. Within that same time frame, I realized I had gained a tremendous amount of space at the bottom of my bookmarks organizer. What is this foreign land? ๐Ÿ˜‚ I thought to myself It would be really cool if I had a ticker with updates from sources that matter to me.

Preview of browser with extension

Making the browser an artisan workspace.

Connecting Ticker Feeds

  • I had Claude pull data from DEV from my notifications, and the same method 'unofficially' works for linked in.
  • I added a server activity ticker. I had already implemented a traffic analysis tool prior, building off of Goaccess server logs and fail2ban. So this was an easy setup. That being the case I still learned about symlink (symbolic links) which is a special pointer that references another drive or partition on another device. So cool! I always wanted that! ๐Ÿ˜‚ So I fed my server notifications to my browser ticker with a symlink.
  • To see recent sales on my store, I simply integrated stripe with a heavily restricted API key. This helps ensure I can act quickly for a customer. This pairs well with my discord notification bot. I am usually in my browser or in discord, so no excuses! ๐Ÿ˜‚

custom ticker

Close-up image of the ticker.

Originally a tabbed interface, I switched it to a stacked layer view so I can see updates in real time with a glance. I LOVE that.

Beautifully nested folders in a cyberpunk UI with drag-and-drop and label editing, a personalized ticker, and a space background! I am feeling much more in the element and overall please with the situation. I will undoubtedly add more tickers for interesting things as I go through time. But this is a fabulous improvement.

What cool browser creations have you made? Please share below!

I have a template repo up for anyone that might be interested. (If you find it useful could you leave me a star? ๐Ÿ˜‚)

I made sure I templated the project this time and added an MIT license. I think I covered everything this time? +1 XP? ๐Ÿคฃ

GitHub logo AnnaVi11arrea1 / cyber-bookmarks

A much cooler way to keep track of the information you deem important right in the chrome browser.

NEURAL//LINKS โ€” Cyberpunk Bookmarks

A neon side-panel bookmark manager for Chrome, with an optional Signal Feed that pulls in your LinkedIn and dev.to notifications, Stripe sales, and security alerts from your own Linux server.

preview of extension

Features

  • Bookmarks in the side panel. Drag to reorder, drop onto a folder to nest it, and group items into folders with Ctrl/Shift+click and then โง‰ GROUP (Ctrl+G). Right-click an item for more options.
  • Full-screen view. Click โคข to open the same tree in a tab.
  • Signal Feed. It checks every 5 minutes and shows new items as a badge count on the toolbar icon. It can also send desktop alerts.
  • Your real bookmarks. It edits Chrome's own bookmarks, so changes sync wherever Chrome sync does.

Install the extension

  1. Download or clone this repo.
  2. Open chrome://extensions and turn on Developer mode (top right).
  3. Click Load unpacked and select the project folder (the one with manifest.json).
  4. โ€ฆ

Generally, to get this effect, I had to build on top of Googles pre-existing bookmarks since that cannot be changed. So this bookmarks interface is an extension that build on top of what already exists - not a replacement. This is a solid way to manage things in a lightweight manner.

Space Explorer Mode: Activated! ๐Ÿ‘พโšก

Top comments (0)