Back to musings

Enhance your web browser with these designer extensions

A list of 10 invaluable extensions that supercharge our browser experience and productivity, especially when working with web designers and developers

Web browsers are easy to view with complacency. We mainly use them to search the internet, and in that aspect, all the brands available — Google Chrome, OS Safari, Mozilla Firefox, and Microsoft Edge — do the exact same job. And that’s the extent that most of us expect from our browsers, with exceptions being to manage bookmarks or access integrated workspaces like a calendar, spreadsheet, or word processor. 

However, beyond these core functions, you will find an incredible toolbox of free extensions that can be added to supercharge your browser experience and your productivity. At Initiate, we look to these plugins for both practical utility and creative inspiration. They allow us to stay focused throughout the stages of design, as research, idea generation, and testing tend to happen in the browser for digital projects. Even though created with graphic creators in mind, I feel these tools are awesome resources for anybody working in digital marketing, especially if you collaborate with digital designers or web developers. 

Here are 10 browser designer extensions that we find invaluable

1) WhatFont

Activate this to quickly identify what font is used on a website (even your own). Hover over some type and it’ll offer up key information like font name, weight, size and colour without having to inspect the source code.

Available for Chrome, Safari, Firefox

2) GoFullPage

A dead-simple way to take a full-page screenshot of your current complete browser window. Simply click the extension icon, then you can download it as an image or PDF.

Available for Chrome, Microsoft Edge

3) Measure-it

Quickly draw a box around any element on any webpage to check the width, height, or alignment of page elements in pixels. Great for checking the dimensions of photos and graphics.

Available for Chrome, Firefox

4) Image Downloader

Want a complete review of all the images that are part of a web page in a streamlined sidebar? This extension lets you select which ones you want to download and even offers basic resizing when doing so.

Available for Chrome

5) Eye Dropper

A super handy tool that lets you easily pick out a single colour from any part of a webpage. It gives you complete colour code information, which is great for finding and comparing colour values quickly.

Available for Chrome

6) Site Palette

Expanding on the previous tool, this extension completes a web page scan and generates a comprehensive colour palette. That colour scheme can be saved and shared, which is useful when doing any analysis of brand colour use.

Available for Chrome, Safari and Firefox

7) Stylebot

This simple developer tool allows you to adjust the basic appearance of any webpage (colours, fonts, spacing) to test subtle adjustments to a design without digging into the source code.

Available for Chrome, Firefox and Microsoft Edge

8) Grammarly

If you do any writing online, you’re probably familiar with Grammarly, and how it can improve your writing grammatically. It’s an invaluable tool, which can also be deployed as an extension directly in the browser, which is useful if you use Google docs.

Available for Chrome, Safari, Firefox, and Microsoft Edge

9) Loom

Loom is a lightweight screen and camera recorder that captures the user’s behaviour. This is useful for actions such as recording a website design walk-through or short tutorial, demonstrating bugs to share with your team for review, and so much more.

Available for Chrome

10) Dark Reader

Activate this extension and any website that you visit will display in a dark theme. I find this much easier on the eyes, particularly when research requires reading long-form articles or blog posts.

Available for Chrome, Safari, Firefox, and Microsoft Edge

As you might notice, some of these extensions are available only in Chrome, and that might be a concern if you’re wary of Google’s practices regarding your data. You’ll find that because most extensions are built using open-source code, and available for free, many are cloned by savvy developers and available for use in other browsers, although with a slightly different name. A quick search in your browser of choice will bring up a host of alternative options you could try.

Extensions are a great way to streamline your working processes by keeping some very powerful timesaving tools always within reach at the top of your web browser. With a huge variety of options available, the simplicity in which they can be added or replaced, and the fact they are free, make them a worthwhile part of the way you work.

What’s your favourite browser extension? Send us a note to let us know!