Chrome Extension: Starify Links

Because why stop at GitHub Repositories

Chrome Extension: Starify Links

posted in javascript on  •   • 

Back in 2019 I created a Chrome Extension called “Starify Github Links”.

I probably just discovered sindresorhus awesome lists. And while awesome lists are, well, awesome, the problem is that while it has so many truly excellent links, some random guy that created a really niche thing easily ends up in there as well.

So how do you know what to spend your time on, GitHub stars, obviously!

And that is what this extension did, add star badges to GitHub repository links 😀

Not my first rodeo

I had already quite some experience with UserScripts / ContentScripts / Greasemonkey Scripts. Back in the day, I got myself fooled into starting to play Tribal Wars. But… For a game that only had a web interface, it had a pretty bad one.

So I created a UserScript called the Sangu Package (for Opera, Firefox and Chrome) that rectified all that; making the UI more user friendly, more consistent, more powerful.

One Star

And that is how I ended up with one rating, a one star review for the “Starify Github Links”… Unlike the current two competitors (which arrived years after my extension, I’d like to add!) which just add the badge and be done with it, I was integrating it nicely to existing pages.

At some point Google changed their layout and it broke the extension. Someone installed it and I got that one star review, after which no one bothered installing it anymore.

Maybe rightfully so, as it took me about 2 years before I got around fixing it 😀

Easy Implementation

If you do the easy implementation, as for example with Github Star Count, you get this on Google:

Starify - The Easy Way

But that is just unacceptable, so this is what “Starify Links” does, which will break again at some point in the future 😓

Starify - The Hard Way

Flocking

That extension still had 200 installs, so much more than my current 34, so something had to be done!

What’s New

So what’s new, what I did to convince people to use my extension instead… or maybe just because once I get started, I just can’t seem to stop myself 😀

  • Activate directly on websites where it makes sense
  • Activate with a click or a (configurable) shortcut
  • Support all the badges that seem worthwhile
  • Make everything configurable

The Result - Starify All The Links

Thanks Claude

I had to do some things before starting all that because the current code base was, well, just the one js file.

The things that Claude did for me:

  • After I renamed the file to .ts, it adjusted the gulpfile to convert it to .js
    • I did the typescript typings myself, but I’m guessing that Claude could have done this for me too!
  • Split the single source file into many files
    • It chose rollup and configured it for me
  • Turned my hardcoded shortcut into a configurable chrome://extensions/shortcuts
  • Turned the extension icon into a “Starify Links” activator
  • Added Playwright tests with both fixed html pages as well as tests on actual sites
  • Made these tests execute with a Github Action
    • Testing on actual sites didn’t work out of the box, but this was fixed with one additional prompt
    • Added a cron job to run the tests daily
  • I introduced some design to allow badges other than repository links
    • After that Claude managed to add other badges with me just providing the link to the shields.io badge url
    • It didn’t work for all the badges, but it did work straight away for almost all of them

As soon as I asked it for some actual functional implementation, it fell short; the implementations were naive. I’m not sure if it would be able to figure it out eventually, as at that point I just took over and coded those parts myself.

The configuration screen was a great success for Claude, it pretty much built it without me doing any work, and all that in about 10-15 prompts.

But then when I was starting to trust it and just gave it a pretty big prompt and went for coffee, I came back to “API Error: 400 due to tool use concurrency issues. Run /rewind to recover the conversation.” While /rewind no longer exists, a simple “You failed. Can you try to continue where you left off?” was all it took to get it back on track!

What’s Next

I ran out of Claude tokens so the directActivation options screen is still WIP 😀


Stuff that came into being during the making of this post
Other interesting reads
Tags: product