Google Chrome: Third-party cookies will be gone by 2022

January 15, 2020 • Chrome, Google

Third-party cookies have been living on borrowed time, given their increasing rejection by the major browsers. And today Google announced support for third-party cookies in its Chrome browser would be phased out “within two years.”

The company seeks to replace them with a browser-based mechanism as part of its “Privacy Sandbox” initiative. The Privacy Sandbox was introduced last August, following an earlier announcement at Google I/O. The initiative is arguably a response to increasing privacy pressure and partly a response to the rise of cookie-blocking by others.

Balancing personalization and privacy. Google’s stated objective is to create “a secure environment for personalization that also protects user privacy.” Google says this requires “new approaches to ensure that ads continue to be relevant for users, but user data shared with websites and advertisers would be minimized by anonymously aggregating user information, and keeping much more user information on-device only.”

The company argues that “large scale cookie blocking,” such as being done by Firefox and Safari, encourage tracking techniques like fingerprinting and undermine the publisher ecosystem by making ads less relevant, thereby reducing their revenues. The less precise the audience targeting, the lower the ad revenue.

Audience targeting strategies. The Privacy Sandbox system envisions targeting and conversion measurement happening within the browser environment through “privacy preserving APIs.” Google says that for ad targeting it’s “exploring how to deliver ads to large groups of similar people without letting individually identifying data ever leave [the] browser.” The company explains this is based on techniques and technologies such as Differential Privacy and Federated Learning. The latter would allow interest-based targeting at large-group scale to avoid revealing any individual’s information.

Conversion measurement. Here Google is more vague, saying, “Both Google and Apple have already published early-stage thinking to evaluate how one might address some of these use cases.” Reportedly, conversions would also be tracked inside Chrome and advertisers would be able to get conversion data through an API but without identifying any individual user.

Finally, Google said that starting in February, it’s going to treat cookies “that don’t include a SameSite label as first-party only, and require cookies labeled for third-party use to be accessed over HTTPS.” It’s also going to work to stop fingerprinting and other types of “covert tracking.”

Why we care. Google’s move, together with Firefox and Safari, is a major change (and challenge) for the industry. Google says it’s trying to find “a middle way” that empowers users but enables the advertising ecosystem to function effectively,” compared to what it considers the more blunt approach of Apple’s “Intelligent Tracking Prevention.”

Critics will accuse Google of trying to assert more control over digital advertising. However, for the approach to work, Google will need to build consensus among a broad community of publishers, advertisers, technology companies and even Apple and Mozilla. In principle, at least, it’s a thoughtful and reasonable approach that also plays to its strengths — a vast ecosystem coupled with powerful data collection and modeling capabilities — and will preserve its dominant position in the digital ad market.

About The Author

Greg Sterling is a Contributing Editor to Search Engine Land, a member of the programming team for SMX events and the VP, Market Insights at Uberall.

Switching From Chrome to Firefox

December 31, 2019 • Chrome, Switching

Switching from Google Chrome to Firefox is easy and risk-free! Firefox can automatically move bookmarks, passwords, history and other preferences from Chrome without deleting it or interfering with any of its settings. Give it a try.

Don’t remove Chrome [yet]… We’ll need it to import your Bookmarks, Passwords and History soon.
- (Optional) If you have Google Chrome open tabs you want to save, bookmark them all in an easy to find location, such as in a new “Open Tabs” folder in the Bookmarks bar.
Download and install Firefox from Mozilla’s download page.
Quit ChromeExit Chrome if you have it running.
Open your newly-installed Firefox. The import tool will pop up.
The import tool will look similar tolike this:
Choose Chrome in the Import Settings and Data window. In the next screen, choose the things you want to import. Follow the prompts and Firefox will take care of the rest.
- (Optional) If you saved your open tabs in Google Chrome, find the “From Google Chrome” folder (normally at the end of the Firefox Bookmarks Toolbar), select the “Open Tabs” folder you created and click to open the tabs in Firefox.

// These fine people helped write this article:AliceWyman, Michele Rodaro, olso, Joni. You can help too – find out how.

Volunteer for Mozilla Support

No to Google Chrome

December 7, 2019 • Chrome, Google

We can no longer pretend that Google is a positive force in the world.

There is a simple first step that every internet user can take to make things a little better. Seek out a better web browser to replace Google Chrome and tell everyone to do the same.

No to Chrome is designed as a starting point for anyone who uses the internet to send a message to Google that their relentless disregard for our rights, dignity, democracy and communities will not be tolerated.

There are many ways protest against Google ranging from Tweets to full boycotts but No to Chrome is designed to be for anyone who uses the internet to participate easily and immediately.

Other Google bear traps

Have a look at our Google products pages to see the problems with other Google products and what you can do about them.

Google Chrome experiment crashes browser tabs, impacts companies worldwide

November 16, 2019 • Chrome, Google

A Google Chrome experiment has gone horribly wrong this week and ended up crashing browsers on thousands, if not more, enterprise networks for nearly two days.

The issue first appeared on Wednesday, November 13. It didn’t impact all Chrome users, but only Chrome browsers running on Windows Server “terminal server” setups — a very common setup in enterprise networks

Complaints flooded Google

According to hundreds of reports, users said that Chrome tabs were going blank, all of a sudden, in what’s called a “White Screen of Death” (WSOD) error.

The issue was no joke. System administrators at many companies reported that hundreds and thousands of employees couldn’t use Chrome to access the internet, as the active browser tab kept going blank while working.

In tightly controlled enterprise environments, many employees didn’t have the option to change browsers and were left unable to do their jobs. Similarly, system administrators couldn’t just replace Chrome with another browser right away.

“This has had a huge impact for all our Call Center agents and not being able to chat with our members,” someone with a Costco email address said in a bug report. “We spent the last day and a half trying to figure this out.”

“Our organization with multiple large retail brands had 1000 call center agents and many IT people affected for 2 days. This had a very large financial impact,” said another user.

“Like many others, this has had significant impact on our organization with our entire Operations (over 500 employees) working in a RDS environment with Google Chrome as the primary browser,” said another system administrator.

“4000 impacted in my environment. Working on trying to fix it for 12 hours,” said another.

“Medium sized call center for a local medical office lost a day and a half of work for 40-60 employees,” added another.

“Same issue experienced, hundreds of users impacted – hours spent attempting to isolate the cause,” said another user.

Hundreds of complaints poured in via Google’s support forum, Chrome bug tracker, and Reddit [1, 2]. One impacted sysadmin told ZDNet that they initially mistook the Chrome blank tabs as a sign of malware and reacted accordingly, starting network-wide security audits.

Google ships a fix

However, with time, the root cause of the bug was eventually found, and traced back to a feature called “WebContents Occlusion.”

According to Google Chrome design document, this is an experimental feature that suspends Chrome tabs when users move other app windows on top of Chrome, treating the active Chrome tab as a background tab.

The feature, meant to improve Chrome’s resource usage when not in active use, had been under testing in Chrome Canary and Chrome Beta releases all year.

However, this week, Google decided to test it in the main Stable release, so it could get more feedback on how it behaved.

That it behaved badly is an understatement.

“The experiment/flag has been on in beta for ~5 months,” said David Bienvenu, a Google Chrome engineer. “It was turned on for stable (e.g., M77, M78) via an experiment that was pushed to released Chrome Tuesday morning.”

“Prior to that, it had been on for about 1% of M77 and M78 users for a month with no reports of issues, unfortunately,” he added.

However, when rolled out to a broader audience — such as Windows users on terminal server setups — an unexpected bug occurred that instead of suspending Chrome tabs when users switched to another app, it unloaded the tab entirely, leaving a blank page behind.

Users could refresh the Chrome tab to access their sites again, but in some cases, this also meant they lost previous work.

The Chrome team said they pushed a new Chrome configuration file to all Chrome users and disabled the experiment.

Chrome engineers operate a system called Finch that lets them push updated Chrome settings to active installs, such as enabling or disabling experimental flags.

If the fix has not reached all impacted users, and they still have problems, they can disable the following two experimental flags by hand:

chrome://flags/#web-contents-occlusion

chrome://flags/#calculate-native-win-occlusion

An alternative method to fixing this is to start Google Chrome with the following command-line argument: –disable-backgrounding-occluded-windows

Fix prompts more criticism

However, fixing the problem actually made system administrators even angrier. Many didn’t know that Chrome engineers could run experiments on their tightly-controlled Chrome installations, let alone that Google engineers could just ship changes to everyone’s browsers without any prior approval.

“Do you see the impact you created for thousands of us without any warning or explanation? We are not your test subjects,” said an angry sysadmin. “We are running professional services for multi million dollar programs. Do you understand how many hours of resources were wasted by your ‘experiment’?”

“How many tens of thousands of dollars has this oops cost everyone? This is starting to look like a pretty massive mistake on Googles part,” added another disgruntled sysadmin.

“We take great care in rolling our changes out in a very controlled manner to avoid this type of scenario and we spent the better part of yesterday trying to determine if an internal change had occurred in our environment without our knowledge. We did not realize this type of event could occur on Chrome unbeknownst to us. We are already discussing alternative options, none of them are great, but this is untenable,” said another, hinting at a browser change across their organization.

Although it lasted just two days, this entire incident is panning out to be one of the Chrome team’s biggest bungles. Many impacted users demanded an official apology from Google, and by the looks of the financial impact it may have caused some companies, they are entitled to it.

New Chrome Zero-Day

November 9, 2019 • Chrome, Zero-Day

Thanks to the Kaspersky Exploit Prevention subsystem in our products, we recently detected an exploit — a malicious program letting attackers gain unauthorized access to the computer — through a vulnerability in the Google Chrome browser. It used a zero-day vulnerability, that is, one that was yet unknown to the developers. It was assigned the identifier CVE-2019-13720.

We reported the vulnerability to Google, which fixed it in the latest Chrome update. Here we describe how the attack that uses this vulnerability unfolds.

WizardOpium: Bad news in Korean

The attacks, which we labeled Operation WizardOpium, began from a Korean news site where the attackers injected malicious code. This loads a script from a third-party site that first checks to see if the system is suitable for infection and which browser the victim uses (cybercriminals are interested in Chrome for Windows not older then version 65).

If the operating system and browser meet the requirements, the script downloads an exploit piece by piece, then reassembles and decrypts it. The first thing the exploit does is run yet another check on the version of Chrome. At this stage, it becomes pickier and works exclusively with Chrome 76 or 77. Perhaps the cybercriminal toolkit contains other exploits for different versions of the browser, but we cannot say for sure.

After verifying it’s found what it wanted, the exploit tries to leverage the use-after-free vulnerability CVE-2019-13720, based on improper use of computer memory. Through manipulating memory, the exploit gains permission to read and write data to the device, which it immediately utilizes to download, decrypt, and run the malware. The latter can vary depending on the user.

Kaspersky products detect the exploit with the verdict Exploit.Win32.Generic. More technical details are available in the Securelist post.

Update Chrome

Even if you don’t read Korean news sites, we recommend that you immediately update Chrome to version 78.0.3904.87. There is already one exploit out there using this vulnerability, which means that others may follow. This will likely happen as soon as details of the vulnerability become freely available.

Google has released a Chrome update for Windows, macOS, and Linux. Chrome updates automatically, and simply restarting the browser should be enough.

To make doubly sure, check that the update has been installed. To do so, click on the three vertical dots in the upper right corner of the browser (“Customize and control Google Chrome”), and select Help → About Google Chrome. If the number you see is 78.0.3904.87 or higher, everything is in order. If not, then Chrome will start looking for and installing available updates (you will see a rotating circle on the left), and after a few seconds the number of the latest version will appear on the screen: Click Relaunch.

Google Chrome Will Block Mixed Content ? Are You Ready for It?

October 24, 2019 • Chrome, Google

Recently, Google Chrome announced that they will soon start blocking mixed content also known as insecure content on web pages.

This feature will be gradually rolled out starting from December 2019. This should give website owners enough time to check for mixed content errors and fix them before the block goes live.

Failing to do so will cause poor user experience, loss of traffic, and loss of sales.

In this guide, we will explain Google Chrome’s mixed content blocking and how you can be well prepared for it.

Getting ready for mixed content block by Google Chrome

Since this is a comprehensive guide, we have created an easy to follow table of content:

What is mixed content?
Why Google Chrome wants to block mixed content?
What will happen if a website is showing mixed content?
How to prepare your website for mixed content block?
How to fix mixed content errors in WordPress?

What is Mixed Content?

Mixed content is a term used to describe non-https content loading on an HTTPS website.

HTTPS represent websites using a SSL certificate to deliver content. This technology makes websites secure by encrypting the data transfer between a website and a user’s browser.

Google, Microsoft, WordPress.org, WPBeginner, and many other organizations are pushing HTTPs as the standard protocol for websites.

They have been very successful in their efforts. According to Google, “Chrome users now spend over 90% of their browsing time on HTTPS on all major platforms.”

However, there are still many websites serving partial insecure content (mixed content) over HTTPs websites. Google aims to improve this situation by giving website owners a nudge in the right direction.

Why Google Chrome Wants to Block Mixed Content?

Google Chrome already blocks mixed content, but it’s limited to certain content types like JavaScript and iFrame resources.

Blocked mixed content on a web page

From December 2019, Google Chrome will move forward to start blocking other mixed content resources like images, audio, video, cookies, and other web resources.

An insecure HTTP file on a secure HTTPs webpage can still be used by hackers to manipulate users, install malware, and hijack a website. This jeopardizes your website security as well as the safety of your website visitors.

It also creates a bad user experience as Google Chrome cannot indicate whether a page is completely secure or insecure.

What Will Happen if a Website is Showing Mixed Content?

Google Chrome has announced a gradual plan to implement mixed content blocking. It will be implemented in three steps spawning over the next three releases of Google Chrome.

Step 1

Starting from December 2019 (Chrome 79), it will add a new settings option to the ‘Site Settings’ menu. Users will be able to unblock the mixed content already blocked by Google Chrome including JavaScript and iframe resources.

If a user opts-out for a website, then Google Chrome will serve mixed content on that site, but it will replace the padlock icon with the insecure icon.

Step 2

Starting from January 2020 (Chrome 80), Google Chrome will start auto upgrading HTTP video and audio file URLs to HTTPs. If it fails to load them over https, then it will automatically block those files.

It will still allow images to load over HTTP, but the padlock icon will change to Not Secure icon if a website is serving images over HTTP.

Step 3

From February 2020 (Chrome 81), Google Chrome will start auto-upgrading HTTP images to load over HTTPs. If it fails to load them over https, then those images will be blocked as well.

Basically, if your website has any mixed content resources that are not upgraded to HTTPs, then users will see the Not Secure icon in their browser’s address bar.

This will create a poor user experience for them. It will also affect your brand reputation and business.

No need to panic though. You can easily prepare your website to fix all mixed content errors.

How to Prepare Your WordPress Website for Google Chrome’s Mixed Content Block

Google Chrome is the most popular browser in the world among both mobile and desktop users.

Leaving your website with incomplete HTTPS implementation or no HTTPS at all will result in loss of traffic, sales, and overall revenue.

Here is what you need to do to prepare your website for these changes.

Move Your Website to HTTPS

If your website is still using HTTP, then Google Chrome will already be showing a ‘Not Secure’ icon when users visit your website.

Not Secure HTTP website

It is about time to finally move your website to HTTPS.

We know that changes like these can be a bit intimidating for beginners. Some site owners postpone the move due to cost, which is no longer an issue as you can easily get a free SSL certificate for your website.

Other website owners delay it because they think it will be a complicated process and could break their website.

That’s why we have created a step by step guide to easily move your WordPress site from HTTP to HTTPS.

We will walk you through every step and show you how to get that secure padlock icon next to your website address in all browsers.

Finding Mixed Content on an HTTPS Website

If you already have an HTTPS-enabled website, then here is how you will find mixed content on your site.

The first indication of mixed content issues will be visible in Google Chrome’s address bar when you visit your website.

If Google Chrome has blocked a script on your website, then you will see the scripts blocked shield icon at the right corner of the address bar.

Blocked mixed content on a web page

Google Chrome has already blocked the insecure content and that’s why the padlock icon on the left corner of the address bar will not change.

The second indication that you should look for is the info icon. This icon will replace the padlock if the page you are viewing has mixed content that Google Chrome has not blocked.

Unblocked mixed content

Clicking on the icon will show the notice that ‘Your connection to this site is not fully secure’.

Usually, this content includes images, cookies, audio, or video files. Chrome does not block those files at the moment and that’s why it shows this notice.

If your site has both icons, then this means your site is loading multiple types of mixed content files using HTTP.

Next, you need to find out which files are loaded using the insecure HTTP URLs. To do that, right-click anywhere on your website and select Inspect tool from the browser menu.

Console tool in Inspect view showing mixed content errors and warnings

Switch to the ‘Console’ table under the Inspect window to view page load errors. You’ll be looking for ‘Mixed content:’ errors and warnings to find out which files are blocked and which files are loaded using the HTTP URLs.

Fixing Mixed Content Errors in WordPress

There are two easy methods that you can use to fix mixed content warnings and errors on your WordPress website.

Method 1. Fix Mixed Content Errors and Warnings Using a Plugin

This method is easier and recommended for beginners. We will use a plugin that will find and replace HTTP URLs to HTTPs on the fly before sending it to user’s browser.

The downside is that it adds a few milliseconds to your website’s page load speed which is barely noticeable.

First, you need to install and activate the SSL Insecure Content Fixer plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, go to Settings » SSL Insecure Content page to configure the plugin settings.

Secure Content Fixer plugin settings

Select the ‘Simple’ option and then click on the ‘Save changes’ button to store your settings.

Visit your website to look for mixed content warning errors.

For more detailed instructions, see our article on how to fix mixed content error in WordPress.

Method 2. Manually Fix Mixed Content Issues in WordPress

This method can get a bit complicated for beginners. Basically, you’ll be finding the insecure URLs across your website and replacing it with secure URLs.

We will still use a plugin to find insecure HTTP URLs on your website. However, you’ll be able to deactivate the plugin once you have changed the URLs, so this will not impact your page speed like the first option.

Let’s get started.

First, you need to install and activate the Better Search and Replace plugin.

Upon activation, you need to visit Tools » Better Search Replace page.

Under the ‘Search’ field, you need to add your website URL with http. After that, add your website URL with https under the ‘Replace’ field.

Better search and replace plugin settings

Click on Run Search/Replace button to continue.

The plugin will now run and find all instances of your website URLs starting with http and replace them with the https.

The plugin works on your WordPress database, so it will only change URLs for your content areas.

If the mixed content resources are loaded by your WordPress theme or plugin, then you will need to inform the theme or plugin developer, so they can release a fix for that.

For more details, see our complete beginner’s guide to fixing the common SSL/HTTPs issues in WordPress.

We hope this article answered your questions regarding Google Chrome’s mixed content block and helped you get ready for it. You may also want to see our guide on how to use Google Search Console to grow your website traffic, and the important marketing data you must track on all WordPress sites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Chrome to block unsecure content from loading on HTTPS pages

October 5, 2019 • block, Chrome

HTTPS has largely replaced its less secure predecessor HTTP as the default choice for sending resources over the internet. The key difference between the two is that HTTPS transmits data using an encrypted connection, while data loaded over HTTP is not. Google began marking all sites still utilizing HTTP connections as ‘Not Secure’ with the release of Chrome 68 last year, and today, Google announced additional plans to inform users when sites utilize an insecure connection. With these latest changes, the Chrome team hopes to address the problem of mixed content.

Mixed content refers to the practice of insecurely loading additional resources (images, audio, and video, for example) over HTTP on an otherwise HTTPS site. Beginning with Chrome 79, mixed content will be blocked gradually in order to give sites time to make necessary changes. The first of these changes in Chrome 79 will be a new setting that will allow users to unblock mixed content on a particular site. This setting can be found by clicking the lock icon found next to the address of an HTTPS site.

Mixed audio and video resources will be blocked by default in Chrome 80 if they can not be loaded over HTTPS. This content can be selectively unblocked using the previously described settings menu. Mixed images will also be effected in Chrome 80. They will still load, but will now cause a “Not secure” message to appear in the address bar. However, this grace period for images will end with Chrome 81 where all mixed content will be blocked by default. Chrome 81 will begin rolling out in February 2020.

Source:
Chromium Blog

Chrome Canary flag to hide website notification requests now functional

September 22, 2019 • Canary, Chrome

Requests for permission to send notifications are one of the most grating website behaviors, second only to auto-playing videos. Earlier this year, Firefox started experimenting with denying them by default, and now, Chrome is following suit. There’s a flag in the Canary build that blocks all notification requests, only allowing notifications from sites you intentionally approve.

The flag has been there for a while, but previously, it didn’t work. Accessible by navigating to chrome://flags/#quiet-notification-prompts, nixes notification request popups entirely in favor of a small icon in the omnibar denoting that the site wants to send notifications. You can click the icon to enable notifications, but otherwise, nothing will happen.

You’ll only see this when you click the icon.

It’s live now, so if you’re brave enough to use Chrome’s Canary channel, you can go test it out for yourself. We don’t know when it’ll make its way to more stable channels, but hopefully it’ll happen soon.

Thanks:
Abdullah

5 useful Chrome extensions every web designer should try

August 26, 2019 • Chrome, Useful

This one’s for all of you web designers — we’ve rounded up some tools that we think you’ll find particularly helpful in your day-to-day workflow! Keep scrolling through to check out a hand-picked list of Google Chrome extensions for your web browser that just might change the way you work.

From checking your website for usability, identifying fonts, testing out responsive designs, and more, get ready to add a whole new layer of efficiency to your workflow. Who knows, you might even discover some tools you didn’t even know you needed! We hope you enjoy and don’t forget to check out our roundup of Chrome extensions for every kind of designer to download even more handy resources.

1. UX Check

UX Check works to inform you of any possible usability issues on a website without having to involve real users. The extension calls out any areas of your website that need improvement based on Nielsen’s ten usability heuristics  — a list of general principles for designing user-friendly interfaces. This is an ideal tool if you’re not able to conduct usability testing with users themselves. You can even export the feedback into a document to share with other team members later on!

839cf2a7e10433a88d72afa7427ff1fb

2. Fontface Ninja

Are you the kind of designer that loves getting font inspiration from typefaces you come across on the web? Instead of furiously searching for the font online, try using Fontface Ninja, a Chrome extension that lets you hover over the text on your screen to instantly help you identify a font, it’s size, line spacing, letter-spacing, and even the color hex code.

On top of that, Fontface Ninja enables you to test the font out yourself with whatever text by typing something out in the extension’s drop-down window. If you absolutely love it, there’s a handy link for you to find the web font’s source so you can purchase and/or download it for free.

F23b678b58f3dfff8c08ef626a76e159

3. Page Ruler Redux

Page Ruler Redux is the web designer’s (and web developer’s!) go-to digital ruler. Use the extension to get an accurate, pixel-perfect measurement of any web page element on your screen. Simply drag the ruler across any section of a website, and inspect the selected element’s height, width, and position. You can even adjust the ruler’s color to ensure there’s enough contrast depending on the website’s background!

99d0477cf2cc695ae9b116f8918c2340

4. Color by Fardos

This is more than just your average color picker or eyedropper tool. In addition to identifying color hex codes on the web, Color by Fardos comes with a few other helpful features: Identify a color’s different shades and tints, get color pairing recommendations based on color theory, and also grab the CSS for any gradient straight from your browser. This is a perfect way to get inspired by other website’s color palettes, without having to replicate them exactly.

F19e8b3aba51429ba9bf792b3b266bc4

5. Window Resizer

This brilliant Chrome extension enables you to re-size your browser window to mimic all kinds of different mobile and desktop resolutions — perfect for quickly testing out responsive web designs. View your layouts on different browser resolutions and ensure your web designs look top-notch across all devices. While the tool comes with a few pre-set resolutions to choose from, you can also customize those as you please through changing the window’s size, height, and position.

F699e8d4d9903104276317133e9bcea7

That’s a wrap! We hope you find some use out of these Google Chrome extensions. Find them in the Chrome web store to test them out and see how much they enhance your browsing experience and overall workflow. For more hand-picked design resources to explore, check out 7 best illustration resources to use in your web designs, and 6 handy color palette picking tools.

Find more Process stories on our blog Courtside.
Have a suggestion? Contact stories@dribbble.com.

10 best Chrome extensions for designers

August 18, 2019 • Chrome, extensions

As designers, we’re almost always searching for new tips, tricks, and tools to help speed-up and improve our workflow. After a few months of testing out Chrome extensions, I’ve compiled a list of the 10 best extensions and plugins for designers.

If you’re a designer— you’re most likely staring at a 27″ iMac as you read this. Yet, most of our users don’t have monitors that are baby-elephant-size.

Thus meet Window Resizer. This is a real life-saver when it comes to seeing how your site looks on different viewports. Simply open the extension and either click the preset viewports or enter in something custom.

They say a picture is worth a thousand words and so a video is worth 10,000? 1M? Who knows — a lot though. Loom is a truly amazing free piece of software, which will help you record animations, user-flows, or bugs and share them with your team.

I’ve used this tool a lot over the past few months. It’s great for when you’re trying to communicate things that can’t be captured with just screenshots. Simply install the extension and press record. Once you’re finished, you can share your video and get stats on who has viewed it and more. 10/10 would recommend to a friend — and you of course 🙂

Are you spending a ton of time inspecting elements, grabbing screenshots, and logging bugs on your site? Well, look no further than the Toybox chrome extension. This is truly the fastest way to leave feedback and inspect CSS directly on your site.

You can think of it like InVision commenting and Zeplin Inspecting — but on your site instead of a design file. Not only that, when you leave a comment, it automatically takes screenshots, records browser data, OS info, viewport size and more — making reproducing issues a breeze. It’s a serious must-have for any product team or agency.

Need some inspiration with your morning coffee (or tea)? The Muzli chrome extension has got you covered. Every time you open a new browser window, you’ll see an up-to-date feed of all things awesome design. They pull from tons of design sources to give you what’s new and hip and cool.

I’ve been using this extension for years and it’s just great.

Sometimes you just need to grab the logo or icons on a page. If that sounds like something you do — then welcome SVG Grabber into your life. Click a single button and it will automatically pull all the SVGs that are on the page. Get a complete view of what it was able to capture and quickly download the ones you need.

Not necessarily an extension I use all the time but it’s been great to have on the back-burner for those tricky moments.

Measuring the size of objects on your page can be a serious pain. If you’re someone who frequently opens the screenshot tool to do so — I’d definitely recommend getting yourself the Page Ruler extension.

Open the extension, drag the box to measure, and you’re all set! Not much else to it.

Dark mode — a true necessity for any designer. So this is actually built right into Chrome Dev Tools and is not an extension — but thought I’d still mention it 😉

Simply open Dev Tools > Click the 3 dot Ellipses in the top right corner > Click settings > Under Appearance, switch it to Dark. That’s it! Now you can dodge your way through the DOM in complete darkness.

Sometimes you just need a quick way to see what color is being used — and ColorZilla is a great solution for just that. Simply hover over elements on your page to see the hex and rgb color values being used. Click to quickly copy it to your clipboard. It’s fast, simple, and efficient.

They have a few other features but haven’t used those too much tbh.

Another easy, breezy, beautiful extension for your downloads is Fontface Ninja. This lets you hover over elements to see what fonts they’re using. You can also go straight from the fonts on the page to purchase using their extension toolbar.

A simple and handy extension to have on your dock.

This pup isn’t really designer specific but I found it the other day and thought it was a real hoot-and-a-holler. Custom Cursor lets you change the default cursor to any of their flavor-town selections, as well as allowing you to upload a custom cursor.

Very fun, very funky, very fresh — give it a whirl.

— — — — — — —

Thanks for reading and I hope you enjoy some of these extensions as much as I do 🙂 Please drop a comment if you’ve got any other extensions that you use in your workflow!