{"id":1295,"date":"2025-10-23T00:00:00","date_gmt":"2025-10-22T22:00:00","guid":{"rendered":"https:\/\/demo.sidekick.be\/itenium\/starify-links\/"},"modified":"2025-11-28T13:31:40","modified_gmt":"2025-11-28T12:31:40","slug":"starify-links","status":"publish","type":"post","link":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/starify-links\/","title":{"rendered":"Chrome Extension: Starify Links"},"content":{"rendered":"<p>And that is what this extension did, add star badges to GitHub repository links \ud83d\ude00<\/p>\n<h1 id=\"not-my-first-rodeo\">Not my first rodeo<\/h1>\n<p>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\u2026 For a game that only had a web interface, it had a pretty bad one.<\/p>\n<p>So I created a UserScript called the <a href=\"https:\/\/github.com\/SanguPackage\/Script\">Sangu Package<\/a> (for Opera, Firefox and Chrome) that rectified all that; making the UI more user friendly, more consistent, more powerful.<\/p>\n<h1 id=\"one-star\">One Star<\/h1>\n<p>And that is how I ended up with one rating, a one star review for the \u201cStarify Github Links\u201d\u2026 Unlike the current two competitors (which arrived years after my extension, I\u2019d like to add!) which just add the badge and be done with it, I was integrating it nicely to existing pages.<\/p>\n<p>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.<\/p>\n<p>Maybe rightfully so, as it took me about 2 years before I got around fixing it \ud83d\ude00<\/p>\n<h1 id=\"easy-implementation\">Easy Implementation<\/h1>\n<p>If you do the easy implementation, as for example with <a href=\"https:\/\/chromewebstore.google.com\/detail\/github-star-count\/jahogeehepfohgakggfeeimokcgnmdid\">Github Star Count<\/a>, you get this on Google:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/itenium-be.github.io\/blog-posts-new\/assets\/blog-images\/starify-links-easy.png\" alt=\"Starify - The Easy Way\" \/><\/p>\n<p>But that is just unacceptable, so this is what \u201cStarify Links\u201d does, which <strong>will break<\/strong> again at some point in the future \ud83d\ude13<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/itenium-be.github.io\/blog-posts-new\/assets\/blog-images\/starify-links-hard.png\" alt=\"Starify - The Hard Way\" \/><\/p>\n<h1 id=\"flocking\">Flocking<\/h1>\n<p>That extension still had 200 installs, so much more than my current 34, so something had to be done!<\/p>\n<h1 id=\"whats-new\">What\u2019s New<\/h1>\n<p>So what\u2019s new, what I did to convince people to use my extension instead\u2026 or maybe just because once I get started, I just can\u2019t seem to stop myself \ud83d\ude00<\/p>\n<ul>\n<li>Activate directly on websites where it makes sense<\/li>\n<li>Activate with a click or a (configurable) shortcut<\/li>\n<li>Support all the badges that seem worthwhile<\/li>\n<li>Make everything configurable<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/itenium-be.github.io\/blog-posts-new\/assets\/blog-images\/starify-all-links.png\" alt=\"The Result - Starify All The Links\" \/><\/p>\n<h1 id=\"thanks-shieldsio\">Thanks Shields.io<\/h1>\n<p>The badges are provided by <a href=\"https:\/\/shields.io\/\">shields.io<\/a>.<\/p>\n<p>For the GitHub badges if you ever see \u201c<a href=\"https:\/\/github.com\/badges\/shields\/issues\/11496\">Unable to select next GitHub token from pool<\/a>\u201d help them out by authorizing their <a href=\"https:\/\/img.shields.io\/github-auth\">OAuth Application<\/a>.<\/p>\n<h1 id=\"thanks-claude\">Thanks Claude<\/h1>\n<p>I had to do some things before starting all that because the current code base was, well, just the one js file.<\/p>\n<p>The things that Claude did for me:<\/p>\n<ul>\n<li>After I renamed the file to <code>.ts<\/code>, it adjusted the <code>gulpfile<\/code> to convert it to <code>.js<\/code>\n<ul>\n<li>I did the typescript typings myself, but I\u2019m guessing that Claude could have done this for me too!<\/li>\n<\/ul>\n<\/li>\n<li>Split the single source file into many files\n<ul>\n<li>It chose rollup and configured it for me<\/li>\n<\/ul>\n<\/li>\n<li>Turned my hardcoded shortcut into a configurable <code>chrome:\/\/extensions\/shortcuts<\/code><\/li>\n<li>Turned the extension icon into a \u201cStarify Links\u201d activator<\/li>\n<li>Added Playwright tests with both fixed html pages as well as tests on actual sites<\/li>\n<li>Made these tests execute with a Github Action\n<ul>\n<li>Testing on actual sites didn\u2019t work out of the box, but this was fixed with one additional prompt<\/li>\n<li>Added a cron job to run the tests daily<\/li>\n<\/ul>\n<\/li>\n<li>I introduced some design to allow badges other than repository links\n<ul>\n<li>After that Claude managed to add other badges with me just providing the link to the shields.io badge url<\/li>\n<li>It didn\u2019t work for all the badges, but it did work straight away for almost all of them<\/li>\n<li>Update: I went back in history and asked Claude to introduce the necessary design \u2013 and it generated something very much like what I did manually!<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>As soon as I asked it for some actual functional implementation, it fell short; the implementations were naive. I\u2019m 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.<\/p>\n<h2 id=\"generated-options-page\">Generated Options Page<\/h2>\n<p>The configuration screens were a great success for Claude, it pretty much built it without me doing any work, and all that in about 10-15 prompts.<\/p>\n<p>This is what it generated for configuring the badges!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/itenium-be.github.io\/blog-posts-new\/assets\/blog-images\/starify-links-options.png\" alt=\"Configure all badges options screen\" title=\"Configure all the badges!\" class=\"img-responsive\" \/><\/p>\n<p>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 \u201c<em>API Error: 400 due to tool use concurrency issues. Run \/rewind to recover the conversation.<\/em>\u201d While <code>\/rewind<\/code> no longer exists, a simple \u201c<em>You failed. Can you try to continue where you left off?<\/em>\u201d was all it took to get it back on track!<\/p>\n<h1>Extras<\/h1>\n<p><b>Stuff that came into being during the making of this post<\/b><\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/itenium-be\/github-stars-links\">Chrome Extension source code<\/a><\/li>\n<li><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/kpficnopciffopkhjpckhkgmnlakcmig\">Download from the Chrome Web Store<\/a><\/li>\n<\/ul>\n<p><b>Other interesting reads<\/b><\/p>\n<ul>\n<li><a href=\"https:\/\/shields.io\">Shields.io: The badges provider!<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Back in 2019 I created a Chrome Extension called \u201c<a href=\"\/blog\/javascript\/starify-github-links\/\">Starify Github Links<\/a>\u201d.<\/p>\n<p>I probably just discovered <a href=\"https:\/\/github.com\/sindresorhus\/awesome\">sindresorhus awesome<\/a> 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.<\/p>\n<p>So how do you know what to spend your time on, GitHub stars, obviously!<\/p>\n","protected":false},"author":1,"featured_media":1933,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[3],"tags":[4],"class_list":["post-1295","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-product"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Chrome Extension: Starify Links - Itenium<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Chrome Extension: Starify Links - Itenium\" \/>\n<meta property=\"og:description\" content=\"Back in 2019 I created a Chrome Extension called \u201cStarify Github Links\u201d.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!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/starify-links\/\" \/>\n<meta property=\"og:site_name\" content=\"Itenium\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-22T22:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-28T12:31:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/starify-links.png\" \/>\n\t<meta property=\"og:image:width\" content=\"360\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Usdevelop\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Usdevelop\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/starify-links\/\",\"url\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/starify-links\/\",\"name\":\"Chrome Extension: Starify Links - Itenium\",\"isPartOf\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/starify-links\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/starify-links\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/starify-links.png\",\"datePublished\":\"2025-10-22T22:00:00+00:00\",\"dateModified\":\"2025-11-28T12:31:40+00:00\",\"author\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022\"},\"breadcrumb\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/starify-links\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/starify-links\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/starify-links\/#primaryimage\",\"url\":\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/starify-links.png\",\"contentUrl\":\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/starify-links.png\",\"width\":360,\"height\":300,\"caption\":\"Retro 1980s movie poster 'Starify Links' neon typography, chrome reflections, GitHub stars exploding in the background like supernovas\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/starify-links\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/demo.sidekick.be\/itenium\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Chrome Extension: Starify Links\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#website\",\"url\":\"https:\/\/demo.sidekick.be\/itenium\/\",\"name\":\"Itenium\",\"description\":\"We build software. We build careers.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/demo.sidekick.be\/itenium\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022\",\"name\":\"Usdevelop\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g\",\"caption\":\"Usdevelop\"},\"sameAs\":[\"https:\/\/demo.sidekick.be\/itenium\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Chrome Extension: Starify Links - Itenium","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Chrome Extension: Starify Links - Itenium","og_description":"Back in 2019 I created a Chrome Extension called \u201cStarify Github Links\u201d.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!","og_url":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/starify-links\/","og_site_name":"Itenium","article_published_time":"2025-10-22T22:00:00+00:00","article_modified_time":"2025-11-28T12:31:40+00:00","og_image":[{"width":360,"height":300,"url":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/starify-links.png","type":"image\/png"}],"author":"Usdevelop","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Usdevelop","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/starify-links\/","url":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/starify-links\/","name":"Chrome Extension: Starify Links - Itenium","isPartOf":{"@id":"https:\/\/demo.sidekick.be\/itenium\/#website"},"primaryImageOfPage":{"@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/starify-links\/#primaryimage"},"image":{"@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/starify-links\/#primaryimage"},"thumbnailUrl":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/starify-links.png","datePublished":"2025-10-22T22:00:00+00:00","dateModified":"2025-11-28T12:31:40+00:00","author":{"@id":"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022"},"breadcrumb":{"@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/starify-links\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/starify-links\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/starify-links\/#primaryimage","url":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/starify-links.png","contentUrl":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/starify-links.png","width":360,"height":300,"caption":"Retro 1980s movie poster 'Starify Links' neon typography, chrome reflections, GitHub stars exploding in the background like supernovas"},{"@type":"BreadcrumbList","@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/starify-links\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/demo.sidekick.be\/itenium\/"},{"@type":"ListItem","position":2,"name":"Chrome Extension: Starify Links"}]},{"@type":"WebSite","@id":"https:\/\/demo.sidekick.be\/itenium\/#website","url":"https:\/\/demo.sidekick.be\/itenium\/","name":"Itenium","description":"We build software. We build careers.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/demo.sidekick.be\/itenium\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022","name":"Usdevelop","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g","caption":"Usdevelop"},"sameAs":["https:\/\/demo.sidekick.be\/itenium"]}]}},"_links":{"self":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts\/1295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/comments?post=1295"}],"version-history":[{"count":2,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts\/1295\/revisions"}],"predecessor-version":[{"id":2131,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts\/1295\/revisions\/2131"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/media\/1933"}],"wp:attachment":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/media?parent=1295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/categories?post=1295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/tags?post=1295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}