Recently on the podcast I mentioned the browser extension “MeasureIt!” to Matt because I thought it would save him some time.
It got me to thinking about how much I use these browser extensions, and what ones I might be missing.
I thought I'd share with you the ones I keep handy, why I like them, and ask you if I'm missing any must-have's.
My List of Must-Have Browser Extensions
Using the Chrome store here (sorry, FireFox users) since I've switched to using Microsoft Edge and all the extensions are compatible.
This is, without doubt my favorite extension… It's an all-in-one tool for web development that gives you the ability to:
- Inspect elements way easier than the inspector tool (fonts, sizes, CSS properties, etc.)
- Pick colors (and copy or save!) from any page
- Take screenshots
- Copy CSS / Export to CodePen in one click
- See the technology used to build a website
- Download all the assets from a page (images, videos, etc.)
- View a page in responsive modes across a multitude of devices
This one extension alone replaced 4 that I was using to do all of these things before.
While many “all in one” solutions usually come with a compromise (compared to ones who focus on doing one thing) this extension is top of its class with all the features.
Nimbus is super handy for taking screenshots of web pages and has a lot of goodies baked in. A few of the things I love are:
- Take screenshots of what's visible
- Take screenshots of the entire page
- Annotate screenshots once you've taken them
- Delayed screenshots (if you need to capture a drop-down or hover)
Their system for uploading the screenshot and giving you a quick-share link doesn't always work… And they've removed the “copy to clipboard” option (perhaps they moved it to the paid version)— still I haven't found a more useful extension on the market!
It might be worth mentioning that Nimbus stores a copy your screenshots on their server. So you might not want to use it for your sexy selfies.
Font finder is great for getting all the details about a typeface displayed on a website. Click the extension, then click any bit of text and a little popup will tell you:
- The color (in Hex and RGB)
- The background color
- The font Family
- Font Size
- Line height
- Letter spacing
- Font weight
- Font style
And a whole lot more.
Need to find the hex value for any color on your screen? I rely on this extension multiple times each day— mostly because it’s simple to use!
Simply click the extension, then click anywhere on your screen and the hex value of the color you selected will be copied to your clipboard automatically.
It even keeps record of the recent colors you picked so you can go back and fetch them quickly.
I’ll admit, I dont understand all the information that BuiltWith spits out, but it does make taking a quick glance at the technology used to build a website pretty easy.
In a practical sense, it usually satisfices my curiosity as to whether or not a website was built with WordPress— and even which plugins are being used in some cases.
I’m a big fan of Loom (now that I’m running something using Chrome anyway) for creating quick videos for my clients or even my friends at TAB.
The browser extension just makes it that much easier to hit the button and start recording right away without a bunch of setup (no more excuses!).
I find myself creating Loom videos much more often now that I have it as an extension than I did when I’d have to go to their website or open up the desktop app.
I was using MeasureIt!, but Lee at LDB Creative turned me onto Page Ruler Redux, which is fantastic!
Quickly and easily measure anything on a screen to get exact measurements, spacing, and a whole lot more.
This comes in especially handy when you are recreating something or “borrowing” some inspiration.
Honey goes out and finds coupon codes and deals at checkout. It doesn’t find deals for most of the things I buy but when it does I’m always thankful.
In fact, I never pay full price for a domain on NameCheap because the Honey extension always helps find a coupon code to save me at least 10%.
A few suggestions from The Admin Bar community.
Since sending out this list in an email, I’ve received several suggestions for extensions from The Admin Bar community.
OneTab lets you clear out the clutter of having 100 browser tabs open (admit it, you have at least 10 right now, don’t you?). The extension quickly puts all your open tabs into a list in ONE tab so you can quickly come back and access them as needed.
The extension claims to reduce memory consumption by up to 95%. Of course, I haven’t measured that— but it certainly helps! And let’s face it… with all these new browser extensions you’re installing, you could probably use all the memory help you could get ?
Thanks to Richard at RNR Design for the submission!
Wonder what a page looks like at a certain resolution? The Window Resizer extension has a pretty cool trick! Instead of creating a container inside your browser (and kind of “faking” the resolution within a window) it automatically restores your browser window to the exact dimensions you select. You can choose from a ton of pre-selected sizes or type in your own.
The only thing that is a bit funky is when you want to view it on a screen resolution that is bigger than your monitor— easy solution: time to go monitor shopping!
Thanks to Karen at Brightgirl Designs for the submission!
I could see Google Font Previewer coming in handy— with a couple clicks you can change all the fonts on a website to any Google font.
If you’re working on a redesign and want to see what a site might look like with some new typography— you can get a quick preview in just a few clicks of the mouse.
Not sure I’ll keep this one installed all the time, but I’ll likely grab it from time to time.
Thanks, Fola Design for the submission!
All the work that went into creating this list and asking for feedback was worth it— just for finding SEO Meta in 1 Click!
Navigate to any website, click the browser extension, and get instant access to the: page title, meta description, author, publisher, headings, links scripts, images, links, social, and quick links to testing tools.
As Rosie from Wuf Design (who submitted this gem) said: “It’s great for a quick look at if a site has basic SEO, especially useful whilst on the phone to potential new client”.
Need to copy a emoji to your clipboard? Emoji Go makes it easy and come with a great search function.
Find the emoji you're looking for, click on it, and it's immediately in your clipboard for quick pasting.
I bookmarked an emoji page a while back, but when Noah from Thrive Design shared this one with me I quickly replaced that system!
Tag Assistant is a handy little tool to make sure you've applied all your tags (like Analytics, for example) to your websites. Anyone using Google Tag Manager will love this little extension!
The Great Suspender will put your open but inactive tabs to sleep. You can set the amount of time you want to wait before you suspend a tab, and even exclude tabs from being suspended.
This is a great, and automated, way of keeping your browser resources in check.
When you return to a suspended tab you can just click the page to have it refresh and open back up.
I've always felt like a fool dragging a notepad file around trying to make sure things were aligned— but Grid Ruler solves this problem!
Quickly add the ability to drag rulers across any page. As a bonus it also works from inside page builders. A must have!
When migrating websites from one server to another, I'm always anxious about propagation. This little plugin simply tells you the IP address a website is being served from so you and instantly see if your propagation has finished! Thanks for the share, Eric!