Ship

@Saad on Wispen · about 1 month ago

I made Wispen — a chrome extension that shows instant insights about any webpage. click the icon and see reading time, color palette (click to copy hex), fonts used, links, images, headings, and load time. one click, no setup.

challenging part: getting the popup to talk to the actual webpage. popup scripts can’t just read the page — you have to inject a function into the tab with chrome.scripting.executeScript. also spent around an hour on a css bug where the loading spinner refused to hide even after data loaded. turned out to be a specificity issue, one !important fixed it.

proud of: the ui actually looks like something i’d install. the color palette feature genuinely works well on real websites.

to test: download from github, open chrome://extensions, turn on developer mode, click “load unpacked”, select the wispen folder, pin the icon. try it on any site (stripe.com looks great).

1 devlog
9h

Try project → See source code →

Open comments for this post

@Saad on Wispen · about 1 month ago

8h 35m 13s logged

I built a chrome extension!!

Wispen is a small web extention that shows instant insights of any webpage. you just have to click on the icon on any site and a small panel overlays and it shows you:

reading time and word count
every font used on the website [click to copy]
every color used on the website [click to copy hex]
links, images and headings count
page load time and total size
a copy button that exports a full text summary

there were two reasons of why I built it, first is that I had to participate in the Widget program by hackclub(had to make a browser extension) and second i kept opening dev tools if I wanted to get some font from a site i liked everytime.

the extension doesn’t have any backend, no login, no tracking, just simple html, css and js and manifest v3

Open comments for this post

@Saad on ION · about 1 month ago

2h 13m 3s logged

okay so this is gonna be my first devlog,
quick context: I have been thinking for a long time to make something for this event but couldn’t manage time cuz of my studies, well here we are now.

I am making a portfolio as an interactive doodle space station and environment(i couldn’t think of something so I went with the theme of Stardance :)
Rightnow there’s nothing much but I have made a basic layout and background logic, blinking stars and shooting stars on random interval to keep things moving and not look static (used vite template).
I am using react and css as my tech stack(prolly). thats all!!