17 must-have Chrome Extensions for designers
📌 Pin it!
I’m a Mac user and will likely be one for the foreseeable future. Their interface makes more sense to my creative brain; the clean lines & simplicity just mesh better with me all around. Plus I “grew up” with it being the standard machine used for the design industry, which is also what my formal education is based on.
That being said, I have the choice of using Safari, Firefox, Opera or Chrome, and I’m sure there are some others I don’t know exist, but I choose to use Chrome because of all the available extensions! Let’s dive into that list now!
(*I’m not an affiliate for any of these companies or businesses, with the exception of Trello & those aff-links will be marked with an asterisk*)
Web design
1 | Color Zilla
A color picker like that of Photoshop’s, for your web browser. Need the shade of blue that Facebook uses? Now you don’t have to right click, check Inspect and find it that way, or take a screenshot/drag an image into Photoshop and use its eye dropper tool.
Even better? It gives you the Hex code and automatically copies it to your clipboard. Here’s some more goodies you can get from this extension:
✓ Eyedropper - get the color of any pixel on the page
✓ Advanced Color Picker (similar to Photoshop's)
✓ Ultimate CSS Gradient Generator
✓ Webpage Color Analyzer - get a color palette for any site
✓ Palette Viewer with 7 pre-installed palettes
✓ Color History of recently picked colors
✓ Displays element information like tag name, class, id, size etc.
✓ Auto copy picked colors to clipboard
✓ Keyboard shortcuts
✓ Get colors of dynamic hover elements
✓ Single-click to start color picking (currently only on Windows)
✓ Pick colors from Flash objects
✓ Pick colors at any zoom level
2 | Page Ruler
This one is great for ever-changing banner image sizes, profile pic sizes, and pretty much anything else on the web! See a button size that you like? Get the exact pixel dimensions with this extension, and all of these features too:
✓ Draw a ruler to any page and view the width, height and top, bottom, left and right position
✓ Drag the edges of the ruler to resize it
✓ Use the arrow keys to move and resize the ruler
✓ Show guides extending from the ruler edges
✓ Manually update the size and position of the ruler from the toolbar to make precision changes
✓ Enable “Element Mode” to outline elements on the page as you move your mouse over them
✓ Navigate through parents, children and sibling elements of any measured element
3 | Squarespace ID Finder
This one is specifically geared toward Squarespace users & designers. It displays the page section ID and block ID for everything on the page using a Squarespace block, which makes it easier to target using custom CSS.
It makes it easier to find, which means you can avoid slogging through source code in order to find that info.
Just click on the overlay buttons and the extension automatically copies the ID to your clipboard.
4 | SquarespaceWebsites Tools Pro
This one is one of the most expensive Chrome extensions I’ve found yet, but it’s worth every penny!
As a $150+ annual subscription, it seems quite steep, –but it helps you:
migrate data from one site to another (even from 7.0 to 7.1) in a few minutes & just a couple clicks
copy content from one page & add to another, even if it’s not the same website design
create your own page layouts as presets, (FANtastic for web designers)
extra settings for Summary blocks
quick links at the top for easy access to Code Injection, Custom CSS, Pages, + and anything else you need to add
+ a lot more I haven’t found/used yet, myself.
This one has been on my wishlist for a few years & now that I have it, I’m kicking myself for not getting it sooner.
5 | SEO tips
UBERSUGGEST
This free extension gives you live-updated stats in every Google search, so you can see how people are searching & get insights on those results, like:
Cost Per Click (CPC) – for Google, YouTube and Amazon
highly targeted keywords related to the search
stats for the top 10 sites in the search
the domain score
number of Facebook shares
number of Pinterest shares
number of backlinks to that site
charts & chart info breakdowns
how many times those keywords have been searched for in the last 12 months
percentage of SEO clicks your search gets on Google
age groups looking for those terms
KEYWORDS EVERYWHERE
This one gives ya similar data but you have to pay for access now. Last I checked it’s around $10 for about 100,000 Google searches.
You can also enable or disable the extension (without removing it) so you don’t use your $10 in credits for all your “Hey Siri” searches… 😂
6 | Finding Fonts & Text Management
Font Finder, screenshot example
FONT FINDER
This one is a must-have for designers! See a font on another website that you like & are DYING to know what it is? This extension will tell you (without having to open & weed through the Inspect page function of Chrome) the CSS for that font style, including this info:
✓ Font color (rgb and hex)
✓ Background color (rgb and hex)
✓ Font family (including actual font being rendered!)
✓ Font size
✓ Line-height, vertical-align, letter and word spacing
✓ Font weight, style, variant
✓ Text transform, decoration, align and indent
✓ Element's type, class and ID
Holy sh!t, right! That’s everything you’d see that’s relevant from the Inspect function, without the hassle of locating it in the code. It’ll definitely save you a few seconds, even if you know how to look for it in Inspect mode, and minutes if you don’t know how to use Inspect mode.
CHANGE CASE
This great little extension gives you quick key commands to change your text case in a simple keystroke. I use it ALL the time!
A lot of my old blog posts frequently had the H3 in all caps, so as I’m going back through all of these & updating them (like this post), it’s easy for me to select the whole line & change the case with a key command, rather than type it out all over again.
LOREM IPSUM GENERATOR
Need quick & easy access to placeholder text? This is a quick & simple way to copy/paste lots of it.
Or check out this post for 15 different Lorem Ipsum generators for a more fun & unique version of placeholder text.
Anywhere you type on the web, Grammarly can be there to help you say it right. That goes for Facebook, Gmail, Twitter, Squarespace, your email marketing service, Dubsado, etc.
When there’s an error, Grammarly highlights it on the page. When you click that spot, their small pop-up lets you choose whether to correct it or leave it alone. After all, soooooometimes we spell things wrong on purpose, right?
Here’s what they say about themselves:
✓ Contextual spelling checker
Grammarly detects correctly spelled words used in the wrong context. You can stop worrying about misusing homophones like lose/loose, affect/effect, lie/lay, there/their/they’re, and many other commonly confused words.
✓ Grammar checker
Grammarly can fix hundreds of complex grammatical errors, including subject-verb agreement, article use, and modifier placement, to name just a few.
✓ Trusted by millions of users
Grammarly is trusted by students, writers, business professionals, bloggers, and plenty of people who just want to write better. Grammarly adapts to your needs and writing style, giving you the confidence of mistake-free communication every time you write.
✓ Grammarly in the news
Forbes: “Grammarly quickly and easily makes your writing better and makes you sound like a pro, or at least helps you avoid looking like a fool.”
Harvard Business Review: “...good grammar is instrumental in conveying ideas with clarity, professionalism, and precision...Good grammar is simply good business.”
ABC News: “Poor grammar is just as offensive as gross pick-up lines.”
7 | Go Full Page
This one is great for those of us who design websites and getting that full web page screenshot into our Portfolios. I literally use it ALL THE TIME.
With one click, this extension takes multiple snapshots of the web page, pieces it all together, and puts them in 1 file you can easily download as a pdf or png.
They also have some additional, new paid features like adding text, shapes, blurring parts of the photo for privacy, and more –and the upgrade is very affordable.
8 | Recording your screen
Loom is a company that offers video screen capture with optional audio and/or camera video and uploads it as you record. As of posting, they offer a free version and some paid plans with more features.
It’s great to use for video tutorials, and so much easier than using separate software, editing then uploading it to YouTube or Vimeo or some other video platform so it can be embedded on my site remotely.
Loom even lets you trim the video clip, add a description to the bottom, allow comments (that tell you the time stamp when they commented), and even add a Call To Action button with a custom link, color & text.
It’s one of my favorite tools for creating tutorial walk-throughs for my clients on how to use their new website! When they have questions (& comment about it) I can see the part of the video where they decided to ask the question which really helps focus on what they’re asking specifically & why.
Screencastify does most of the same things as Loom, but it automatically adds the videos to your Google Drive & has a quick upload option to YouTube, which makes them easily embeddable in Squarespace with just a video link (no embed blocks necessary) and easily accessible outside of your Screencastify dashboard. They also may be a little cheaper to upgrade, than Loom.
PAGE MARKER
If you record tutorial videos frequently, this may be a great tool to be able to draw right on the screen to show viewers specific highlighted areas of the screen.
Either Loom or Screencastify (I can’t honestly remember right this sec) has this built-in on the upgraded/paid plans, so you may not need a separate tool for this.
9 | 1 Password
Manage all of your passwords + have a safe place to temporarily store client passwords during projects.
It even allows you to have secure notes, payment cards, wifi passwords & more, –all organized into “folders” or lose if that’s your thing.
10 | CSS Scan Pro
This is a visual page-code inspector with all kinds of fun additional features including page rulers, copy & edit CSS, see the assets (images) used on the page & download them easily (great for grabbing imagery from a client’s old site during a refresh/redo when they don’t have them to send/upload for you!)
It’s a great addition to any web designer’s tool belt, but it is another annual subscription cost and I don’t believe they offer a free plan (2021).
11 | Toggl Button: Productivity & Time Tracker
This is handy and it even shows up in Trello, Asana, Todoist, and Jira among 100+ other integrations! It’s free to create a Toggl account, and the little plugin manages things like Pomodoro timers, idle detection, and tracking reminders.
Since I use Quickbooks for invoicing, I just input the time from my Toggl (when used) into the invoice manually. If you need a time converter (to decimal points) for invoice quantities, check out this (free) Time to Decimal calculator.
General use:
12 | Planoly Uploader
This makes scheduling pins with Planoly, quick & easy! Here are some specifics in their words:
✓ Schedule content the same way (as the Tailwind extension): See all of the shareable images on a webpage with one click, then schedule as many of them as you’d like.
✓ Post content conveniently, as you discover it: Schedule any image on the web by clicking the "Schedule" button when hovering over it.
✓ Pin the same Pin to multiple Pinterest boards, or to a group of boards, then set an interval between the publishing of each Pin so as not to overwhelm your followers.
A little tip for finding pins naturally in my own Pinterest newsfeed, click the schedule button & leave that popup window open and move it off to the side. Don’t do anything on that page, just leave it be. Go back to your Pinterest feed and keep clicking the Schedule button on other pins – it loads on that other page each time & saves it to your drafts automatically. You can go back later & fill out everything to schedule them.
For scheduling in bulk though, definitely use the extension.
Let’s say you’re on a blog archives page and there are several articles you want to share on your own Pinterest account, knowing your followers would also find the info helpful. Select the extension button, click all the images you want to schedule, then select the “Go Schedule” button in the bottom right corner. That takes you to the same pop-up page as the individual “Schedule” button that appears over images on hover.
You can choose to exit out of that window & schedule later, if you want (because they’re already saved to your drafts at that point) or you can schedule everything right there, including all the extras you may normally do like pinning to multiple boards, adding hashtags to the description or including a wait time between pins (if pinning the same thing to multiple boards).
13 | Facebook Pixel Helper
This one just lets you know if/how many Facebook Pixels are embedded on the site you’re visiting.
In case you don’t know, Facebook Pixels are one of the ways that websites can target a specific person or audience in their marketing, which is why you often see ads on Facebook for products you’ve recently looked at online (or similar items).
These days, it’s safe to assume most sites have a Facebook Pixel installed (mine does, though I’m not actively using it for marketing). So if you want to avoid this you may want to consider using a Private mode or downloading Opera for the private VPN (Virtual Private Network) feature.
Mainly, this is helpful for installing the Pixel at the start of a website. It lets you know whether or not the installed Pixel is functioning properly on that page, and whether or not there is more than 1 on that site.
14 | Toby & Toby Mini
TOBY
Toby, the company, essentially lets you create a free account that allows bookmarking, tab style.
What I mean by that is, if you’re the type of person to have 5 or more tabs open at any given time in your web browser, then you can save your entire session with Toby and open all those tabs again later with 1 click. Even if you had to close/quit Chrome or shut down your computer.
More than that: if you have a certain set of tabs open when you create blog posts, then you can essentially bookmark that group & name it “Blog Post Group” (or whatever). You can have a group for pinning/scheduling to Pinterest, or scheduling all of your social media (which could include tabs for Facebook, Instagram, Pinterest, Tailwind, Later/Buffer/Hootsuite, etc.).
For quick access, this extension lives in your new tab window until you visit a site on it. If you don’t like that or have another app taking up residence in your new tab windows & you like it that way & don’t want to change that but still want the Toby features, then Toby Mini is for you.
TOBY MINI
Toby Mini has all the same features as the big Toby, except it doesn’t interfere with whatever your tabs look like. You can access it all from the extension icon in Chrome. So it might be an extra click or two, but worth it if you don’t want Toby living in your New Tab pages.
15 | Momentum
AKA the reason I use Toby Mini. This extension lives in your New Tab page only and gives you beautiful scenery as the background, the current time, a super easy-to-use to-do list, brief weather stats for your location, an area for links, and an awesome motivational/inspirational quote for the day.
Their main feature list includes:
✓ New inspirational photo and quote each day
✓ Set a daily goal/focus/intention
✓ Keep track of tasks with Todo list
✓ See the weather and forecast
✓ Links and search
✓ Show bookmarks bar on new tab
✓ Default Chrome Tab/Apps links
✓ Customize the dashboard by showing/hiding widgets
✓ Set your uptime and downtime with Balance mode
✓ Feel good and get things done!
Other features are available after upgrading. I use the free version & that’s enough for me but here are the plus features:
✓ Customize font and color themes
✓ Add your own quotes and background photos
✓ Skip to a new photo or quote whenever you like
✓ Todo integrations: Asana, Trello, Todoist, GitHub, Wunderlist, Google Tasks
✓ More widgets: Notes, Countdown timer, Metrics
✓ Autofocus mode: pull your tasks into your focus, combine with integrations
✓ Enhanced Weather: extra weather info and more accurate feed
✓ Enhanced Todo: multi-todo lists and color labels
✓ Priority support from our friendly team
✓ Support the development of Momentum (Thank you!)
✓ Enjoy next-level focus and productivity
16 | Honey
This one is a DEFINITE MONEY-SAVER. (They also just released an iPhone app!! I just downloaded it, but haven’t used it yet.)
It searches for coupon codes on tons of online stores and gives you the best deal available for your purchase. It even works on Amazon and will also tell you whether the price has dropped recently or not so you can add it to a waitlist & get an alert when it’s on sale again.
I have personally used this (and all the other extensions in this list, so I guess you already knew that) to save money on so many orders. Hello, $20+ savings on Bath & Body Works, Amazon, True&Co, Third Love, and sooooooo many more!
It doesn’t work every time, but when it does it definitely saves me money & has already proved it’s worth in a short amount of time.
17 | Random Number Generator
Do you have giveaways frequently? This handy little extension asks you for the starting & ending number for the list you’re choosing from & will then generate a random number, which becomes your winner!
Take a screenshot of the selection from the extension for proof if ya want a record, and go notify your peeps of the winners!
Bonus!
18 | Project Management extensions
a web-clipper for my project management tool of choice.
A quick way to add tasks to any project.
A quick way to add tasks, track time, take notes, and a few other features.
Quickly create a new card on any board/list in your Trello account +/– attaching links or pages to the card. Also gives you quick access to your boards by typing in “t” then Space, then the name of your board. Hit enter & it goes right to it!
