Wispen
By
@Saad
- 1 Devlogs
- 9 Total hours
chrome extension that gives instant insights of any webpage
Ship #1
Changes requested
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).
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
