- On February 25, 2021
Sign up for Behind the Browser®
We couldn’t live without browser extensions. These glorious (and usually free) widgets are a godsend to anyone who does their work inside a browser. In this day and age, that’s just about everyone. Today we’re going to share some of our favorite extensions for website management and maintenance.
Browser extensions span a wide-range of categories, from super productive work widgets to pure time wasters. According to this ZDNET article from 2019, there are over 188,000 extensions for Google’s Chrome browser. So we realize that we’re just barely dipping a toe in the water by sharing this short list of our favorites. Nevertheless, with all the extensions that are out there, maybe we can help you find a few jewels.
As you might guess, there are some security concerns with using third party browser extensions. Because extensions have full access to the data from the pages you visit, it’s important that you carefully read the reviews for any extension you’re thinking of installing. The browser vendors, Google, Mozilla, Apple, etc., do review the extensions they offer in their online marketplaces, but they don’t catch everything.
WAVE, from webaim.org, is hands down the browser extension we use the most. WAVE is an acronym for Web Accessibility Evaluation Tool and the name says it all. With this extension you can instantly review any web page to see how it stacks up against WCAG, the Web Content Accessibility Guidelines put out by the World Wide Web Consortium or W3C. This tool is a must for anyone managing a website and especially those charged with website compliance.
Taking screenshots is an all too frequent practice when working on websites. But, as you know, most web pages are taller than the height of your screen or viewport. Trying to get a single image of these long scrolling pages can mean taking multiple screenshots and ‘sewing’ them together with image editing software.
The Awesome Screenshot extension will allow you to create an image from a full, scrolling webpage in just one click. You can also create basic screen recordings with the tool. And, if you upgrade to a paid account for $5 per month, you’ll be able to create 4K resolution video screen captures and to connect your images and recordings to services like Jira, Slack and Asana.
The VisBug extension allows you to inspect and make edits to the elements of any webpage. The edits you make will only show on your screen (i.e. they don’t affect the live webpage) and can’t be saved. But the tool provides you with a great way to quickly test different changes you’re considering making, without enlisting the help of a designer or developer..
For those times when you need to find a precise color or measure a specific area, even down to a tiny cluster of pixels on your high resolution screen, PixelZoomer is the tool for the job. This extension will blow up the active webpage (in a new tab) up to 32x its native size. With the extension’s selector tool you can measure the width and height of any page part. With the eyedropper tool you can copy the color value of any pixel, which is essential when you need to match web colors and don’t have a web style guide to reference.
The Save Page WE tool creates and quickly downloads an HTML version of whatever page you’re viewing in the browser. For developers or website managers who are tasked with building or modifying pages in HTML/CSS, this tool gives you an easy way to create a file to work on from an existing webpage. Have you ever wanted to copy the layout of a page you’ve seen on the Web? Use Save Page WE and, in an instant, you have a copy to start working from.
It’s also a great tool for saving an article (and its images) to read later.
If you ever find yourself looking at an image on the Web and thinking, “This looks good. We could use something like this on our website.” then this extension is for you. Search by Image lets you find images similar to the one you’re viewing with a simple click.
Search by Image also allows you to select which search engine(s) you’d like to use for the search. The extension opens a new tab for the results from each search engine selected.
Available for Chrome
SVG images such as logos and icons can’t be downloaded like JPGs or other typical web images. This is because SVG’s are vector-based images (not raster or bitmap images) and are actually blocks of code that tell the browser how to render an image with a set of mathematical instructions. This allows SVG images to scale smoothly and look sharp at any size in your browser.
So how can you grab an SVG from a webpage? The easy way is to install the SVG Grabber browser extension. This tool grabs all the SVG files on a given page and drops them into a new tab for copying or downloading. We launch the extension on the Wall Street Journal Site for this example.
And if you come across a site that appears to be a phishing site or otherwise malicious, with Netcraft you can report that site to the extension’s community of users with a simple click.
As we indicated in the introduction, this is just the tip of the iceberg when it comes to browser extensions. Even if we’re only considering extensions that help with managing your website, there are hundreds (if not thousands) that can help with that work. If you have a browser extension that you recommend, please share it with us at firstname.lastname@example.org or @tenrec on twitter. We’d love to try it out.
Of course, if you have any questions about the tools mentioned in this article, we’re happy to help and can be reached at email@example.com.